Web Storage(localStorage, sessionStorage) 예제

Back-end와 front-end의 분리, MSA 설계 등에서 많이 필요로 하는 기능입니다. 

Log in 한 후에 세션 정보를 브라우저에서 갖고 있을 때 web storage에 보관하고 꺼내 쓸 때 유용합니다.  

아래는 조사하면서 필요한 정보를 정리한 것입니다. 

Web Storage란 무엇인가?

웹 스토리지를 사용하면 웹 애플리케이션이 사용자의 브라우저 내에 로컬로 데이터를 저장할 수 있습니다.

HTML5 이전에는 애플리케이션 데이터를 모든 서버 요청에 포함 된 쿠키에 저장해야했습니다. 웹 저장소는 더 안전하며 웹 사이트 성능에 영향을주지 않고 많은 양의 데이터를 로컬에 저장할 수 있습니다.

쿠키와 달리 저장 한도는 훨씬 더 크고 (최소 5MB) 정보가 서버로 전송되지 않습니다.

웹 스토리지는 오리진 (도메인 및 프로토콜)에 따라 다릅니다. 한 오리진의 모든 페이지는 동일한 데이터를 저장하고 액세스 할 수 있습니다.

Browser Support

브라우저	크롬	IE	Fire Fox	Safari	Opera
버전	4.0	8.0	3.5	4.0	11.5

 

local storage : 로컬 저장소는 localStorage 개체를 사용하여 전체 웹 사이트에 대한 데이터를 영구적으로 저장합니다. 즉, 저장된 로컬 데이터는 제거하지 않는 한 다음 날, 다음 주 또는 다음 해에 사용할 수 있습니다.

session storeage : 세션 저장소는 sessionStorage 개체를 사용하여 단일 브라우저 창 또는 탭에 대한 데이터를 임시로 저장합니다. 세션이 종료되면 즉 사용자가 해당 브라우저 창이나 탭을 닫으면 데이터가 사라집니다.

 

The localStorage Object

<script>
// Check if the localStorage object exists
if(localStorage) {
    // Store data
    localStorage.setItem("first_name", "Peter");
    
    // Retrieve data
    alert("Hi, " + localStorage.getItem("first_name"));
} else {
    alert("Sorry, your browser do not support local storage.");
}
</script>

The sessionStorage Object 

Syntax

myStorage = window.sessionStorage;

<script>
// Check if the sessionStorage object exists
if(sessionStorage) {
    // Store data
    sessionStorage.setItem("last_name", "Parker");
    
    // Retrieve data
    alert("Hi, " + localStorage.getItem("first_name") + " " + sessionStorage.getItem("last_name"));
} else {
    alert("Sorry, your browser do not support session storage.");
}
</script>

Web Storage API 

Method	Description
setItem(key, value)	해당 키값으로 데이터 저장
getItem(key)	해당 키값의 결과 데이터 반환
removeItem(key)	해당 키값 삭제
clear()	전체 삭제

 

출처 :

www.tutorialrepublic.com/html-tutorial/html5-web-storage.php

How to Use HTML5 localStorage and sessionStorage - Tutorial Republic

www.w3schools.com/html/html5_webstorage.asp

HTML Web Storage API

developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Window.sessionStorage

 

그외 ...

라이프 사이클 이슈 

sessionStorage는 서버단의 세션과 유사하나 탭 단위이기 때문에 다른 탭에서 열면 sessionStorage의 값을 이용할 수 없습니다. 

localStorage는 영구적인 저장소라 모든 창과 탭을 닫고 다시 열어도 값이 살아있는걸 확인 할 수 있습니다. 

sessionStorage를 이용해서 구현 했을 때 다른 탭에서는 값이 존재하지 않는 경우 사용자에게 "원래 그래요" 라는 말이 통하지 않습니다. 아쉽지만 localStorage를 이용하고 적절하게 서버단 세션 체크를 해서 라이프 사이클을 관리하는게 좋습니다. 

 

보안 이슈 

web storage는 장점이 많지만 또 한편으로 보안에 취약합니다. 보안을 고려한다면 기본적으로 이슈가 될만한 값은 이용하지 않는 게 좋으며 암/복호화를 기본적으로 해서 사용하는게 좋습니다. 

 

쿠키와 웹 스토리지 비교 

저장공간 : 쿠키는 저장 공간이 4kb라는 제한이 있습니다. 웹 스토리지는 5mb로 충분한 공간을 제공합니다. 

보안 : 쿠키는 서버단에 요청을 보낼때 해당 값을 함께 보냅니다.(XSS에 취약). 반면 서버단에서 값을 처리하기 용이합니다. 웹 스토리지의 값은 서버 쪽에서 전송하지 않기에 처리할 수 없습니다.   

라이프 사이클 : 쿠키는 라이프 사이클을 지정할 수 있습니다. 세션 스토리지는 해당 탭에만 유효하며 로컬 스토리지는 영구 저장만 됩니다.