JSON, js 데이터로 변환하기 / 로컬 스토리지 local storage에 데이터 삽입, 꺼내오기, 수정하기 setItem, getItem, removeItem

 

🌲 개발자도구의 Local Storage와 Session Storage

...저장한 데이터는 브라우저 세션 간에 공유됩니다. localStorage는sessionStorage와 비슷하지만,localStorage의 데이터는 만료되지 않고sessionStorage의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다릅니다. (출처 MDN)

 

 

 

 

---

✅ 다음의 객체 데이터를 Local Storage에 넣어보자.

const user = { 
  name : 'kim', 
  age : 99, 
  email : [
    'siot@mail.com',
    'second@mail.com'
  ]
}

 

📍 Local Storage에 keyvalue값을 넣는 메소드 setItem()

*작은 따옴표 주의

localStorage.setItem('user', user)

아래와 같이 object로 입력된다.

 

📍 JS데이터를 문자데이터화 시켜주는 명령 JSON.stringify()을 사용하면

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

value값이 JSON형태의 문자데이터로 저장되고 목록을 클릭하면 아래부분에 js데이터로 출력된다.

📍 Local Storage에서 값을 가져와보자 getItem()

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

문자데이터로 저장되었기 때문에 console에도 JSON형태의 문자데이터로 출력된다.

 

📍 JSON형태의 문자데이터를 JS형태의 데이터로 JSON.parse()

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

 

📍 LocalStorage에 있는 데이터 지우기 removeItem()

*removeItem을 하지 않는 이상 코드에서 삭제해도 Application의 local Storage에는 데이터가 남아있다.

 

📍 LocalStorage 데이터 변경하기

로컬스토리지에서 데이터를 가져온 다음, 새로운 값을 주고 다시 로컬스토리지에 데이터를 넣는다.

const str = localStorage.getItem('user') // 로컬스토리지에서 가져오기
const obj = JSON.parse(str) // 로컬스토리지에서 js데이터로 가져오기
user.age = 100 // age에 값 100 할당
localStorage.setItem('user', JSON.stringify(user)) // 로컬스토리지에 JSON형태로 넣기

 

---

📍 lodash 패키지 lowdb 이용해 데이터를 변경하는 방법

 

GitHub - typicode/lowdb: Simple to use local JSON database (supports Node, Electron and the browser)