LocalStorage & SessionStorage

LocalStorage와 SessionStorage 의 차이점, 간단한 사용법을 알아보자!

"Uncaught QuotaExceededError: Failed to execute 'setItem' on 'Storage': Setting the value of 'key' exceeded the quota."
오류로부터 시작된 여정...

localStorage에 user정보를 저장하다가(이런짓을 하면 안된다는것을 깨닫기 전...) 맞닥뜨린 반갑지않은.. 이젠 한편으론 고마운? 메세지였다. 그냥 편하게 불러다 쓰던 localStorage에 대해 쬐끔 더 알게된 계기가 되었으니...

결론만 말하자면 위 오류는, localStorage 하나의 key값에는 브라우저별로 정해진 문자열(characters) 길이에 한도(limit)가 존재하는데 그 한도를 초과했다는 경고이다.
(이 한도는 각 브라우저에서 https://arty.name/localstorage.html 사이트에 들어가보면 확인할 수 있다. 확인결과 chrome, safari는 5200000 characters limit. firefox도 5200000 이라는데 직접 확인은 못해봤다.)

기왕 알아본 김에 그간 모르고 쓰던 Web storage에 대해 조금만 더 알아보기로 했다.

Web(HTML5) storage (LocalStorage, SessionStorage)

• Cookies
  - 최대 4KB
  - 많은 웹사이트에서 방문페이지 저장이나 유저의 로그인 정보 저장하는 방법등으로 사용
  - 문자열만 저장 가능
  - 브라우저가 닫히면 영구삭제되는 Session cookies와 만료일이 지나면 삭제되는 Persistent cookies 두가지 유형이 있다

• Web storage ?
  - Cookies에 비해 Client에 더 많은 저장공간을 제공 (key/value 문자열 형식)
  - 저장소 크기와 저장 데이터 지속성에 따라 localStorage, sessionStorage 구분

  • LocalStorage
    • 브라우저당 5MB (필요에 의해 용량을 늘릴수도 있지만 대부분 허용하지 않는다)
    • 앱이나 유저에 의해 삭제될때까지 데이터가 지속된다
    • 동일한 웹을 실행하는 모든 창과 탭에서 데이터 공유
    • 보안상 안전한 저장소가 아니므로 민감한 정보는 저장하면 안된다!!!
  • SessionStorage
    • 시스템 메모리에 의해서만 용량 제한을 받는다
    • 원래의 창이나 탭에서만 데이터가 지속된다
    • 데이터를 생성한 창이나 탭에서만 데이터에 접근 가능

• Web storage 사용.
  - 문법은 매우 간단하며 LocalStorage와 SessionStorage는 사용법이 같다

     localStorage.setItem('<key>', <value>) // 저장
     localStorage.getItem('<key>') 	    // 호출
     localStorage.removeItem('<key>')       // 삭제

참조

http://www.gwtproject.org/doc/latest/DevGuideHtml5Storage.html