sessionStorage & localStorage 사용

쿠키와 두 가지 스토리지 비교

• 	Cookie	Session Stograge	Local Storage
  만료 기간	별도 지정	현재 탭 유지 시	무제한
  용량	4KB	무제한
  HTTP 요청	포함	미포함

   

참고 : https://developer.mozilla.org/ko/docs/Web/API/Window/sessionStorage

Window.sessionStorage - Web API | MDN

[ 사용 예 ]

별도 선언 없이 바로 사용 가능하다. (IE 8이상 지원)

var userData = {id: 'hailey0', name: 'Hailey', grade: 'gold', locale: 'ko'};
sessionStorage.setItem('user', userData);
sessionStorage.setItem('userJson', JSON.stringify(userData));

// window.sessionStorage 도 가능!

 

쿠키의 경우 문자열로 저장되므로 라이브러리를 사용하지 않으면 getter setter 를 정의하여 사용해야하는 단점이 있지만, 스토리지의 경우 기본으로 제공된다. 위와 같이 여러 페이지에서 사용할 데이터 이지만, 다른 http 통신에는 사용할 필요가 없는 경우 sessionStorage 를 이용하면 편리하다.

JQuery 쿠키 라이브러리 > https://hailey0.tistory.com/38

단! 문자열로만 저장이 되기 때문에 객체를 사용하고자 하는 경우 JSON 형태로 변경하여 사용해야 한다. 그렇지 않으면  [object Object] 와 같이 저장된다.

var user = sessionStorage.getItem('user'); // '[object Object]'
var userJson = sessionStorage.getItem('userJson'); 
// '{"id":"hailey0","name":"Hailey","grade":"gold", "locale": "ko"}'
userJson = JSON.parse(userJson);

//key 아이템 제거
sessionStorage.removeItem('user');
//전체 초기화
sessionStorage.clear();

 

localStorage 의 경우는 데이터가 창을 닫더라도 살아 있기 때문에, 데이터가 누적되는 경우에는 민감 데이터는 절대! 저장하면 안되고 어플리케이션에 따라 데이터 초기화 처리가 중요하다. 하지만 새 탭, 새 창을 열었을 때에도 유지되어야 할 때에는 매우 유용하다. 사용 함수는 동일하다.

 

쿠키와 다르게 expired 옵션이 없으므로, 만약 시간을 체크하려고 하는 경우 수기로 코드를 짜야 한다.
BUT 만료가 필요한 경우 cookie 를 사용하는 것을 추천.

var userData = {};
userData.created = new Date().toString();
userData.data = JSON.stringify({id: 'hailey0', name: 'Hailey', grade: 'gold', locale: 'ko'})
sessionStorage.setItem('userJson', JSON.stringify(userData));

 

var userJson = sessionStorage.getItem('userJson');
userJson = userJson? JSON.parse(userJson) : {};

if(userJson.created != null){
  var created = new Date(userJson.created);
  if( (new Date().getTime() - created.getTime())/1000/60 > 10 ){ // 10분 주기
    updateUserInfo();
  }
}