[JavaScript] Local Storage / Session Storage

LocalStorage 

 - 데이터를 반영구적으로 사용할 수 있다

 

SessionStorage 

 - 페이지 세션이 끝나면 데이터가 사라진다.

 

사용방법 

1. 항목 추가하기

아래처럼 작성하는데

setItem을 이용하여 key, value를 저장해주면 되는데 문자 데이터를 이용하여 작성할 것

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

 

 

 

2. 항목을 읽는 방법

getItem을 이용하여 읽어낸다. 

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

 

3. 항목 제거하기

제거할 때는 removeItem을 이용하여 키값을 적어주면 된다.  

localStorage.removeItem('myCat');

 

 

아래처럼 작성을 하였을 때 localStorage에 내용이 잘 들어갔을까?

일반적인 객체데이터로 저장하면 제대로 들어가지지 않는 것을 볼 수 있다. 

그래서 문자 데이터로 저장을 해줘야 하는데 문자데이터로 저장하는 방법은

JSON.stringify(user) 이렇게 넣어주면 문자데이터로 저장하는 것이 가능하다.

localStarage.setItem('user',JSON.stringify(user))

 

그리고 값을 가져올 때는 

console.log(JSON.parse(localStorage.getItem('user')))

JSON.parse() 안에 넣어 JS문법으로 값을 받아올 수 있도록 한다.

 

만약 수정을 원한다면 

값을 가져와서 수정하고 다시 값을 넣어주어야 하는데 이렇게 되면 과정이 복잡하다

 

그래서  lowDB라는 것이 있는데 이걸 활용하면 좀 더 편하게 할 수 있다고 한다.

https://github.com/typicode/lowdb

GitHub - typicode/lowdb: Simple to use local JSON database. Powered by plain JavaScript (supports Node, Electron and the browser

다음번에는 lowDB를 살펴봐야겠다. 

---

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage 참고

Window.localStorage - Web API | MDN