Storage

local Storage에 데이터는 key value쌍으로 저장될 수 있고 이것이 브라우저에서 관리되는 하나의 데이터 저장소로 사용이 된다.

그리고 이와 동일한 방식으로 Session Storage라는 것도 제공이 되고 있다.

LocalStroage를 사용하면 Document출처의 Storage객체에 접근할 수 있다. 저장한 데이터는 브라우저 세션 간에 공유된다.

즉, 로컬스토리지에 저장되는 데이터는 해당되는 도메인 주소에 종속되어 저장되는 것이다.
쉽게 생각하면 하나의 사이트에 종속되는 것이다.

로컬 스토리지와 세션 스토리지는 기본적으로 브라우저에 데이터를 저장하는 스토리지라는 점에서는 같지만,

로컬 스토리지의 데이터는 만료되지 않는다. 즉, 따로 지우지 않는 이상 로컬 스토리지의 데이터는 반영구적으로 사용할 수 있다.
세션 스토리지의 경우에는 페이지의 세션이 끝날 때, 즉 페이지를 닫을 때 데이터가 사라진다.

예제
localStorage.setItem('myCat', 'Tom')
현재 도메인의 로컬 스토리지에 접근한 후, 스토리지에 항목 하나를 추가하는 코드이다.
이 때 myCat은 Key, Tom은 Value이다.
되도록이면 데이터는 문자데이터로 저장하여야 한다.

const cat = localStorage.getItem('myCat')
로컬스토리지에 저장된 myCat 데이터 항목을 읽는 방법이다.

localStorage.removeItem('myCat')
제거는 이렇게 할 수 있다.

ex.

const user = {
  name: 'honeyricecake',
  age: 35,
  emails: [
    'adsf@naver.com',
    'ghjk@naver.com'
  ]
}

localStorage.setItem('user', user)

이렇게 저장을 하면

저장이 되긴 하는데 Object를 눌러서 데이터를 참조할 수 없다.
즉, 우리는 객체 데이터나 배열 데이터를 그대로 사용할 수 없고 문자 데이터로 변환해서 사용해야 한다.

const user = {
  name: 'honeyricecake',
  age: 35,
  emails: [
    'adsf@naver.com',
    'ghjk@naver.com'
  ]
}

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

이런 식으로!

그러고 나서 로컬 스토리지를 다시 보면

이렇게 원하는 형식으로 데이터가 저장되는 것을 볼 수 있다.

이렇게 브라우저에서 해석하여 우리가 아는 객체 데이터 형식으로도 보여준다.

const user = {
  name: 'honeyricecake',
  age: 35,
  emails: [
    'adsf@naver.com',
    'ghjk@naver.com'
  ]
}

localStorage.setItem('user', JSON.stringify(user))
console.log(JSON.parse(localStorage.getItem('user')))

이렇게 해주면

자바스크립트에서도 이렇게 출력되는 것을 볼 수 있다.

데이터 수정 방법

ex.

const str = localStorage.getItem('user')
const obj = JSON.parse(str)

obj.age = 22
localStorage.setItem('user', JSON.stringify(obj))

이는 조금 원시적인 방법으로 lowdash 패키지의 기능을 활용해서 로컬스토리지를 하나의 db처럼 조금 더 쉽게 관리할 수 있게 해주는 패키지가 있다.

lowdb라는 패키지인데 이런게 있다는 것만 알아두고
우리가 로컬스토리지의 기능을 활용하여 브라우저에 데이터를 저장하여 충분히 활용할 수 있다는 것만 알아두자.