Storage

lbr·2022년 7월 12일

JavaScript

Storage

브라우저에 데이터를 저장할 수 있는 개념입니다.

Local Storage 와 Session Storage를 브라우저에서 확인하기

크롬 개발자 도구(F12)를 눌러 브라우저 저장소 개념을 확인할 수 있습니다.

Local Storage

Session Storage

Window.localStorage

localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. localStorage는 sessionStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고 sessionStorage의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다릅니다. - 위키백과

localStorage의 데이터는 하나의 사이트에 종속됩니다.

예제

저장하기

localStorage.setItem('myCat', 'Tom');

첫번째 인수는 Key, 두번째 인수는 Value 입니다.
저장하는 데이터는 문자데이터로 저장해줍니다. 문자데이터가 아닌 경우에는 제대로 저장이 되지 않을 수 있습니다.
객체데이터와 배열데이터는 JSON.stringify() 를 사용하여 문자데이터화 시켜서 데이터를 저장합니다. 그렇게 저장된 문자데이터를 가지고 와서 JSON.parse() 를 통해서 데이터화합니다.

읽어오기

const cat = localStorage.getItem('myCat');

제거하기

localStorage.removeItem('myCat');

활용

저장하기

cosnt user = {
  name: 'HEROPY',
  age: 85,
  emails: [
    'thesecon@gmail.com',
    'neo@zillinks.com'
  ]
}

localStorage.setItem('user', JSON.stringify(user));

저장된 결과

읽어오기

cosnt user = {
  name: 'HEROPY',
  age: 85,
  emails: [
    'thesecon@gmail.com',
    'neo@zillinks.com'
  ]
}

//저장하기
localStorage.setItem('user', JSON.stringify(user));

//가져오기
//console.log(localStorage.getItem('user')); // 단순한 문자데이터로 들어왔습니다.
console.log(JSON.parse(localStorage.getItem('user')));

읽어온 결과

위 출력은 단순한 문자데이터 입니다. 이것을 JSON.parse를 통해 아래처럼 JavaScript 데이터로 바꾸어줍니다.

제거하기

cosnt user = {
  name: 'HEROPY',
  age: 85,
  emails: [
    'thesecon@gmail.com',
    'neo@zillinks.com'
  ]
}

//저장하기
localStorage.setItem('user', JSON.stringify(user));

//가져오기
//console.log(localStorage.getItem('user')); // 단순한 문자데이터로 들어왔습니다.
console.log(JSON.parse(localStorage.getItem('user')));

//제거하기
localStorage.removeItem('user');

제거된 결과 화면

수정하기

cosnt user = {
  name: 'HEROPY',
  age: 85,
  emails: [
    'thesecon@gmail.com',
    'neo@zillinks.com'
  ]
}

//수정하기
const str = localStorage.getItem('user');
const obj = JSON.parse(str);
obj.age = 22;
localStorage.setItem('user', JSON.stringify(obj));