[Javascript] HTML5 Web Storage 를 언제 사용해야 할까? (cookie 대신 활용한 사례)

Web Storage 란?

HTML5부터 제공하는 기능으로 해당 도메인과 관련된 특정데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능입니다. 우리가 알고 있는 쿠키(cookie) 와 비슷한 기능인거죠. 

 

Web Storage가 필요한 이유?

쿠키와 Web Storage 모두 브라우저에 저장되기는 하지만 쿠키는 아래와 같은 단점이 있기 때문에 Web Storage를 사용합니다.

• 4KB의 데이터 저장 제한
• HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안에 취약
• 쿠키는 모든 HTTP Request에 포함되어 있어 웹서비스 성능에 영향을 줄 수 있음

 

Web Storage 종류

기존에 우리가 흔히 사용했던 쿠키와 세션(Session) 처럼 Web Storage도 localStorage와 sessionStorage를 제공합니다. sessionStorage라고 해서 기존 세션처럼 서버에 저장된다고 생각할 수 있지만 sessionStorage도 로컬 브라우저에 저장됩니다. 다만 생명주기가 localStorage와 sessionStorage가 서로 다르다고 생각하면 됩니다.

 

• localStorage : 브라우저를 닫았다가 다시 열어도 계속 유지
• sessionStorage : 브라우저가 열려있는 한 페이지를 Reload 해도 계속 유지. 하지만 브라우저를 닫으면 삭제됨

 

사용방법

localStorage와 sessionStorage 는 사용방법이 동일하기 때문에 localStorage 만 설명하도록 하겠습니다.

 

데이터 저장

아주 간단합니다. 객체에 데이터 세팅하듯이 동일하게 사용하면 됩니다. 

window.localStorage.colorSetting = '#a4509b';
window.localStorage['colorSetting'] = '#a4509b';
window.localStorage.setItem('colorSetting', '#a4509b');

 

데이터 가져오기

var color = window.localStorage.colorSetting;
var color = window.localStorage['colorSetting'];
var color = window.localStorage.getItem('colorSetting');

 

데이터 삭제하기

//특정 데이터만 삭제
window.localStorage.removeItem('colorSetting');

//전체 삭제
window.localStorage.clear();

 

브라우저가 Web Storage를 지원하는지 확인하는 방법

현 시점에서 왠만한 브라우저는 전부 지원하고 있습니다. 

if( ('localStorage' in window) && window['localStorage'] !== null) {

  alert('현재 브라우저는 WebStorage를 지원하고 있습니다.'); 

}else{

  alert('현재 브라우저는 WebStorage를 지원하지 않습니다.'); 
  
}

 

실제 WebStorage를 활용한 사례

사용자가 선택한 엑셀파일의 데이터를 Json으로 변환한 후 웹브라우저 저장할 때 사용했습니다. 

Web Storage를 사용하지 않으면 페이지를 Reload하거나 브라우저를 닫았다가 다시 접속할 때마다 엑셀파일을 선택해야 하는 불편함이 있었을 겁니다. 서버에 저장하면 엑셀파일 내용을 읽을 때마다 서버에 접속해야하니 서버 부하가 생길테고요. 

엑셀파일을 선택하는 화면

 

약어사전을 WebStorage에 저장했기 때문에 다음에 다시 접속할 때 자동으로 엑셀파일 내용을 세팅해준다.

 

Web Storage에 Json을 저장할 경우 주의사항

Web Storage에 Json을 저장한 후 나중에 데이터를 불러와서 사용하려고 하니 오류가 나더군요. 확인해보니 Web Storage에 저장할 때 객체로 변환해서 저장하더라고요. 그래서 아래와 같이 Web Storage에 Json을 저장하고 불러와서 사용했습니다.

//json 저장
window.localStorage.setItem('ABRV_DIC_JSON_STRING', JSON.stringify(ABRV_DIC_JSON));

//다시 데이터 불러와서 사용시
var fixStorageData = window.localStorage.getItem("ABRV_DIC_JSON_STRING"); 
var ABRV_DIC_JSON = JSON.parse(fixStorageData);

 

Web Storage 가 적용된 사이트는 아래 링크를 참고하세요. 개발자에게 도움이 되는 웹서비스 입니다. ㅎㅎ

http://www.junspapa.com/naming/namingtool.html

프로그래밍 네이밍 툴 - 한글단어를 영어약어로 변환

 

 

그리고 WebStorage 에 대한 자세한 사항은 아래 링크를 참고하세요.

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

Using the Web Storage API