Blog

HTML5 LocalStorage

모바일 검색 자동완성에 최근검색어를 같이 출력하기 위해 사용자 디바이스의 localStorage에 최근검색어를 저장하기로했다. 해서 간략히 정리해 본다. (PC 브라우저의 경우 익스플로러는 8부터 지원한다.)

HTML5에서 제공하는 클라이언트 저장소는 localStorage와 sessionStorage 두가지인데 localStorage만 정리해보겠다.

 

특징

  • window.localStorage – stores data with no expiration date
    • – Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.
  • window.sessionStorage – stores data for one session (data is lost when the browser tab is closed)

localStorage는 사용자가 제거하기 전까지는 만료기간이 없으며, 최소 5MB이상 저장이 가능하다. sessionStorage는 브라우저가 닫힐 경우 데이터도 사라진다.

 

사용법

key/value로 저장되며 사용법은 생각보다 많이 간단하다. localStorage는 전역에서 접근할 수 있으며

  • setItem(key, value),
  • getItem(key)

로 값을 get/set할 수 있다.  저장되는 value는 모두 String으로 저장되며, 저장할 경우 같은 key가 이미 있으면 덮어쓰기 때문에 중복검사를 위한 처리를 따로해 주어야 한다. 그리고 값을 꺼내올 경우에 해당 key가 없으면 null을 반환한다.  추가로

  • removeItem(key)
  • clear()
  • length
  • key(value)

메소드를 제공한다. removeItem(key)로는 해당 key값만 제거 할 수 있으며 localStorage를 모두 비울때는 clear()를 사용하면 된다. 그리고 length로 저장된 값의 갯수, key(value) 값으로 해당 키를 가져올 수 있다.

 

이벤트

이벤트는 localStorage의 내용이 변경 되었을 경우 storage이벤트가 발생하며 이벤트 객체에는 key, oldValue, newValue, url등이 있다.

Property Type Description
target Read only EventTarget The event target (the topmost target in the DOM tree).
type Read only DOMString The type of event.
bubbles Read only boolean Does the event normally bubble?
cancelable Read only boolean Is it possible to cancel the event?
key Read only DOMString (string) The key being changed.
oldValue Read only DOMString (string) The old value of the key being changed.
newValue Read only DOMString (string) The new value of the key being changed.
url Read only DOMString (string) The address of the document whose key changed.
storageArea Read only Storage The Storage object that was affected.

출처 https://developer.mozilla.org/en-US/docs/Web/Events/storage

 

참고사항

localStorage에 값을 get/set할 경우 렌더링이 블럭된다. 암호화 하지 않는이상 중요한 데이터는 저장하지 않아야 한다. ios의 경우 사용자가 Private Browsing을 사용하면 localStorage를 사용할 수 없다. 아직 해결책을 찾지는 못했고 다음과 같은 방법으로 사용자에게 적절한 UX를 제공할 수 있을 것 같다.