[JS]LocalStorage와 SessionStorage(내용 업데이트)

Window.localStorage

localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있다. 저장한 데이터는 브라우저 세션 간에 공유된다. localStorage는 sessionStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고 sessionStorage의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다르다.

 

예제

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

key: value 형식으로 첫 번째 인수는 key, 두 번째 인수는 Value이다. 데이터를 저장할 때 문자 데이터 형식으로 저장하는 게 좋다.

객체나 배열 데이터 같은 경우 JSON 객체 stringify를 통하여 문자 데이터화 시켜서 데이터를 저장하고 저장된 문자 데이터를 가져와 parse로 분석하여 JS 파일 내부에서 데이터로 사용할 수 있다. setItem 메소드를 통해 인수인 데이터를 특성한 브라우저에 저장할 수 있다. 

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

읽어 오는 용도로 사용한다. key값만 알고 있으면 되기 때문에 인수로 하나만 사용하였다. 

localStorage.removeItem('myCat');

제거할 수 있다.

const user = {
  name: 'jeong',
  age: 85,
  emails: [
    'gyflsakfn@naver.com',,
    'neo@daum.com'
  ]
}

localStorage.setItem('user', user)

실행 결과

데이터가 저장되었지만 원하는 형태의 데이터가 아닙니다. 대괄호로 감싸져 있는 문자  데이터가 저장되어 있습니다. 내가 저장한 것은 실제 객체 데이터어야 합니다. 로컬 스토리지에 데이터를 저장할 때는 평소에 사용하는 일반적인 객체나 배열데이터를 사용하면 안 되고 그것을 문자 데이터로 변환하여 저장해야 합니다. js 데이터를 문자 데이터화 시키는 메소드인 stringify를 사용해야 한다.

const user = {
  name: 'jeong',
  age: 85,
  emails: [
    'gyflsakfn@naver.com',,
    'neo@daum.com'
  ]
}

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

 

실제로 저장된 것은 JSON형태의 문자 데이터 이지만 브라우저가 분석하여 보기 좋은 js 데이터로 출력해주는 것을 볼 수 있다. 

const user = {
  name: 'jeong',
  age: 85,
  emails: [
    'gyflsakfn@naver.com',,
    'neo@daum.com'
  ]
}

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

getItem을 통하여 locanStorage에 있는 user데이터가 출력이 되지만 문자 데이터 형태로 출력이 됐다.

parse를 통해 JSON포맷을 js 데이터로 변환해 주었다. 

 

removeItem을 통해 localStorage의 데이터를 삭제해줄 수 있다. 

localStorage.removeItem('user')

 

수정

const user = {
  name: 'jeong',
  age: 85,
  emails: [
    'gyflsakfn@naver.com',,
    'neo@daum.com'
  ]
}

const str = localStorage.getItem('user')
const obj = JSON.parse(str)
obj.age = 22
console.log(obj)
localStorage.setItem('user', JSON.stringify(obj))

변수 str에 localStorage의 user 문자 데이터를 받아온다. 받아온 문자 데이터를 parse 하여 obj변수에 넣어준다.

obj.age = 22 하여 js 데이터의 age를 22로 바꾸어준다. 바뀐 js 데이터를 localStorage에도 적용하기 위해 setItem을 실행하는데 ('user', obj)는 저장이 안 된다. 왜냐하면 obj는 js에서 사용하고 있는 하나의 객체 데이터이기 때문에 문자 데이터화 시켜준 값을 넣어줘야 한다. 그래서 stringify를 사용하여 수정된 js 데이터를 문자 데이터화 해주고 키 값인 user에 덮어쓰기 해준 것이다. 

 

lodash의 패키지의 기능을 이용하여 loacl Storage를 하나의 DB처럼 쉽게 관리해줄 수 있는 패키지인 Lowdb

JSON 기반의 작은 database이다. 

https://github.com/typicode/lowdb

localStorage mdn

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

 

 

 

 

Window.sessionStorage 

sessionStorage 읽기 전용 속성은 현재 출처 세션의 Storage 객체에 접근합니다. sessionStorage는 localStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고, sessionStorage의 데이터는 페이지 세션이 끝날 때 제거되는 차이가 있습니다.

• 페이지 세션은 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아있습니다.
• 페이지를 새로운 탭이나 창에서 열면, 세션 쿠키의 동작과는 다르게 최상위 브라우징 맥락의 값을 가진 새로운 세션을 생성합니다.
• 같은 URL을 다수의 탭/창에서 열면 각각의 탭/창에 대해 새로운 sessionStorage를 생성합니다.
• 탭/창을 닫으면 세션이 끝나고 sessionStorage 안의 객체를 초기화합니다.

sessionStorage에 저장한 자료는 페이지 프로토콜별로 구분합니다. 특히 HTTP(http://example.com)로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS(https://example.com)와는 다른 sessionStorage에 저장됩니다.

 

설정하는 것을 localstorage와 동일하다.