[JS] 자바스크립트 Web Storage

 

 

 

 

 

 

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

 

 

 

1. Web Storage의 필요성

 

쿠키가 아래와 같은 단점을 갖기 때문에 Web Storage를 사용한다.

 

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

 

 

 

2. Web Storage 의종류

 

Web Storage도 쿠키와 세션처럼 localStorage와 sessionStorage를 제공한다.

sessionStorage라고 해서 세션처럼 서버에 저장된다고 생각할 수 있지만 sessionStorage도 로컬 브라우저에 저장된다. 다만 localStorage와 sessionStorage의 생명주기는 서로 다르다

 

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

 

 

 

3. 사용방법

 

localStorage와 sessionStorage 는 사용방법이 동일하다

 

3-1. 데이터 저장

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

 

 

3-2. 데이터 로드

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

 

 

3-3.데이터 삭제

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

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

 

 

3-4. Web Storage 지원여부 확인

if( ('localStorage' in window) && window['localStorage'] !== null) {
  alert('현재 브라우저는 WebStorage를 지원함'); 
}else{
  alert('현재 브라우저는 WebStorage를 지원하지 않음'); 
}

 

 

 

 

 

 

# 참고사이트

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