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에 대해 조금만 더 알아보기로 했다.
Cookies
- 최대 4KB
- 많은 웹사이트에서 방문페이지 저장이나 유저의 로그인 정보 저장하는 방법등으로 사용
- 문자열만 저장 가능
- 브라우저가 닫히면 영구삭제되는 Session cookies와 만료일이 지나면 삭제되는 Persistent cookies 두가지 유형이 있다
Web storage ?
- Cookies에 비해 Client에 더 많은 저장공간을 제공 (key/value 문자열 형식)
- 저장소 크기와 저장 데이터 지속성에 따라 localStorage, sessionStorage 구분
Web storage 사용.
- 문법은 매우 간단하며 LocalStorage와 SessionStorage는 사용법이 같다
localStorage.setItem('<key>', <value>) // 저장
localStorage.getItem('<key>') // 호출
localStorage.removeItem('<key>') // 삭제
http://www.gwtproject.org/doc/latest/DevGuideHtml5Storage.html