localStorage key,value 저장방법 / setItem, getItem, removeItem / lowdb

localStorage

- 데이터를 지우지 않는 한 반영구적으로 사용할 수 있다.

 

sessionStorage

- 페이지를 닫으면 데이터가 사라진다.

 

 

localStorage 알아보기

localStorage.setItem('key', 'value');
- 데이터를 지정

localStorage.getItem('key');
- key값만 사용해서 데이터를 가지고올수 있다.

localStorage.romoveItem('key');
- key값으로 데이터를 지울수 있다.

 

ex)

const user = {
  name: 'codenote',
  age: 22,
  emails: [
    'kjun_all@naver.com',
    'codenote@gmail.com'
  ]
};

localStorage.setItem('user', user);

---

- 예시로 user 정보로 데이터를 만들게 되면

value값이 제대로 나오지 않는 걸 확인할수 있다.

---

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

- user 의 객체데이터를 문자로 변환하여야 하는데. JSON.stringify 를 이용하여 저장하면? 

value 값이 제대로 저장된것을 볼수있다.

 

---

lacalStorage에 저장되어 있는 정보를 데이터를 출력하려면

console.log(localStorage.getItem('user'));

getItem으로 호출할 수 있다.

---

그러나 콘솔에 확인해보면 문자데이터 형태로 나오게된다.

객체데이터로 나오게 하기 위해서는 JSON.parse를 통해서 객체데이터로 불러올 수 있다.

---

 

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

- JSON.parse를 통해서 이렇게 객체데이터로 불러올수 있다.

 

 

 

---

저장된 정보를 수정할려면...

const str = localStorage.getItem('user');
// 변수를 통해서 보관
const obj = JSON.parse(str);
// 문자데이터를 객체데이터로 변환
obj.age = 23
// 수정할 정보를 입력
localStorage.setItem('user', JSON.stringify(obj));
// 수정한 정보를 setItem으로 문자데이터로 변환하여 저장

---

Lowdb

lodash로 쉽게 사용가능

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