티스토리 뷰

UI(Front-End)

Web Storage(localStorage, sessionStorage) 예제

까오기 까오기 2020. 11. 16. 10:05

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

HTML5 Web Storage In this tutorial you will learn how to use HTML5 web storage feature to store data on user's browser. What is Web Storage? The HTML5's web storage feature lets you store some information locally on the user's computer, similar to cookies,

www.tutorialrepublic.com

www.w3schools.com/html/html5_webstorage.asp

 

HTML Web Storage API

HTML Web Storage API HTML web storage; better than cookies. What is HTML Web Storage? With web storage, web applications can store data locally within the user's browser. Before HTML5, application data had to be stored in cookies, included in every server

www.w3schools.com

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

 

Window.sessionStorage

The read-only sessionStorage property accesses a session Storage object for the current origin. sessionStorage is similar to localStorage; the difference is that while data in localStorage doesn't expire, data in sessionStorage is cleared when the page ses

developer.mozilla.org

 

그외 ...

라이프 사이클 이슈 

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

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

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

 

보안 이슈 

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

 

쿠키와 웹 스토리지 비교 

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

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

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

 

댓글
댓글쓰기 폼