써치킴의 우당탕탕 개발 블로그

[JS Level up][Ch2][데이터 실습] Storage 본문

파도파도 나오는 JavaScript

[JS Level up][Ch2][데이터 실습] Storage

써치킴 2022. 2. 4. 00:34

구글에 local storage mdn 검색 > https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage 진입

localStorage 

Storage 객체에 접근할 수 있다. 저장한 데이터는 브라우저 세션 간에 공유된다.

-> localStorage에 저장하는 데이터는 해당하는 도메인 주소에 종속돼서 저장 > 하나의 사이트에 종속

locatStorage에서 데이터를 사용하려면 모두 문자 데이터로 저장되어야한다!


localStorage의 데이터는 만료되지 않고

sessionStorage의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다르다.


const user = {
  name : 'Searchkim',
  age : 29,
  email : [
    'ejkim.Dev@gmail.com',
    'ejkim2@gmail.com'
  ]
};

localStorage.setItem('user', JSON.stringify(user));     // localStorage에 user 문자화시켜서 저장
console.log(JSON.parse(localStorage.getItem('user')));  // localStorage에 저장된 user를 객체화시켜서 출력
// localStorage.removeItem('user');                     // localStorage에 저장된 user 삭제

// localStorage에 저장된 user 수정하는 방법
const str = localStorage.getItem('user');   // user 가져옴
const obj = JSON.parse(str);                // user 객체화 
obj.age = 22;                               // 수정
console.log(obj);
localStorage.setItem('user', JSON.stringify(obj));    // 문자화시켜서 저장

개발자 도구 > Application > Local Storage -> 현재 웹페이지 Storage가 목록으로 출력됨

↑ 해당 데이터를 다르는 방식이 조금은 원시적이기 때문에, 

lodash라는 패키지의 기능을 이용해서 localStorage의 데이터를 db처럼 관리해줄 수 있는 패키지가 있다. -> lowdb 활용

> 구글에 lowdb 검색 > https://github.com/typicode/lowdb

Comments