[JS] LocalStorage & SessionStorage

 

 

목표

SessionStorage, LocalStorage에 대해 알고

상황에 따라 알맞을 storage를 고르는 능력 키우기

 

 

예상 소요시간

10분

 

 

 

 

프론트엔드 단에서 데이터를 저장하는 방법은 크게 3가지로 나뉩니다. 아주 전통적인 Cookie부터, 최근에 많이 사용되고 있는 LocalStorage와 SessionStorage가 있죠. 오늘은 세 가지 방법 중 LocalStorage와 SessionStorage, 두 저장방법에 대해 알아보고 비교하는 시간을 가져보도록 하겠습니다.

 

 

 

 

 

 

 

Cookie : LocalStorage와 SessionStorage 이전의 방법 

 

LocalStorage와 SessionStorage가 있기 이전에, 프론트엔드 측에선 데이터를 저장하기 위해 Cookie라는 방법을 사용했습니다. 쿠키는 브라우저에 저장되는 작은 문자열로, 주로 세션 관리, 개인화, 트래킹의 목적으로 사용되었습니다. 이렇게 쿠키는 사용자에게 편리한 사용자 경험을 제공할 수 있고, 데이터를 다시 서버에 요청할 필요가 없어 속도가 빠르다는 장점이 있었지만, 저장할 수 있는 쿠기의 크기, 개수가 제한되어있고 보안에 취약하다는 단점을 가지고 있었습니다.

 

 

 

 

Web Storage

 

위와같은 쿠키의 문제점을 해결할 수 있는 수단으로 나온 방법이 바로 Web storage입니다. Web Storage는 기존 쿠키가 가지고 있던 문제점들을 해결할 수 있는 장점을 지니고 있습니다. 가장 먼저 웹 스토리지는 쿠키에 비해 큰 저장용량을 가지고 있습니다. 쿠키는 약 4KB까지 저장할 수 있는데에 비해 웹 스토리지에서는 최대 약 5MB까지 저장이 가능합니다. 또다른 장점으로 웹스토리지는 저장기간이 별도로 정해져 있기 않기 때문에 시간에 제약없이 사용할 수 있습니다.

이러한 웹스토리지는 크게 LocalStorage와 SessionStorage 두 가지로 나뉩니다. 두 스토리지에 대해 각각 알아보며 스토리지 간의 차이점에 대해 알아보도록 하겠습니다.

 

 

LocalStorage

 

LocalStorage는 브라우저 전체에 저장되는 스토리지로, Key : Value 형태로 저장됩니다. LocalStorage의 가장 큰 특징은 브라우저가 꺼져도 해당 데이터는 지워지지 않는다는 것입니다. 즉 사용자가 브라우저를 껐다 다시 접속해도 LocalStorage에 저장한 데이터는 여전히 남아있습니다. 이러한 특징을 바탕으로 LocalStorage를 사용하면 세션(탭) 단위를 넘어 브라우저 전체에서 공통된 데이터를 저장할 수 있다는 장점이 있습니다.

 

 

 

브라우저에 저장된 LocalStorage 데이터는 개발자 도구 > Application > LocalStorage을 통해 확인할 수 있습니다.

정보가 Key : Value 한 쌍 형태로 저장되어 있습니다

 

 

 

JS에서 LocalStorage를 다루는 방법은 아래와 같습니다.

 

// 데이터 저장하기
localStorage.setItem("KEY", "value");

// 데이터 가져오기
localStorage.getItem("KEY");

// 데이터 제거하기
localStorage.removeItem("KEY");

// 로컬스토리지를 통째로 비우기
localStorage.clear();

 

 

 

이 때 주의해야 할 점은 localStorage의 value는 어떤 타입이 value로 들어가도 string으로 변환되어 저장된다는 것입니다. 따라서 객체, boolean 등 string 타입이 아닌 다른 타입을 localstorage에 저장하고 가져오려면 반드시 JSON.parse, JSON.stringify를 통해 값을 변환해주는 과정을 거쳐야 합니다.

 

// string타입이 아닌 값을 저장할 때는 stringify 과정이 필요합니다.
const value = { data: "객체 타입의 데이터입니다." };
const stringifiedValue = JSON.stringify(value);

localStorage.setItem("data", stringifiedValue);

// string타입이 아닌 값을 가져올 땐 parse 과정이 필요합니다.
const data = localStorage.getItem("data");
const parsedData = JSON.parse(data); // {data : "객체타입의 데이터 입니다."}

 

 

 

 

SessionStorage

 

SessionStorage은 웹 스토리지의 또다른 방식으로, LocalStorage와 달리 세션마다 저장되며, 해당 세션이 만료되면 바로 소멸한다는 차이점이 있습니다. 즉 같은 브라우저라 하더라도 Session 간의 Storage공유는 불가능하며, 탭이 닫힌다면 해당 탭의 SessionStorage에 담긴 정보는 모두 소멸된다는 특징이 있습니다. 이러한 일회성으로 인해 LocalStorage보다 장기적인 기억을 하기에는 어렵지만 LocalStorage보다 보안성이 높다는 장점이 있습니다.

 

 

 

브라우저의 SessionStorage에 저장된 데이터는 개발자 도구 > Application > SessionStorage에서 확인 가능합니다.

 

 

 

SesisonStorage은 JS에서 LocalStorage와 비슷한 방법으로 사용할 수 있습니다.

// 데이터 저장하기
sessionStorage.setItem("KEY", "value");
// 데이터 가져오기
sessionStorage.getItem("KEY");
// 데이터 제거하기
sessionStorage.removeItem("KEY");
// sessionStorage 통째로 비우기
sessionStorage.clear();

 

 

 

또한 SessionStorage도 LocalStorage와 마찬가지로 모든 value는 string 형태로 저장이 되기 때문에, string 타입이 아닌 다른 값을 저장, 불러오기 위해서는 반드시 stringfy와 parse 과정이 필요합니다.

const value = { data: "객체 타입의 데이터입니다." };
const stringifiedValue = JSON.stringify(value);

sessionStorage.setItem("data", stringifiedValue);

const data = sessionStorage.getItem("data");
const parsedData = JSON.parse(data);

 

 

 

 

 

정리

 

• Web Storage는 브라우저에 key : value 쌍 형태로 데이터를 저장하는 방식으로,
• Cookie에 비해 저장용량이 많고 더 좋은 보안성을 가지고 있다.
• Web Storage는 LocalStorage와 SessionStorage 두 종류가 있다.

 

• LocalStorage는 브라우저 전역에 걸쳐 공유되며, 브라우저가 종료되어도 데이터가 소멸되지 않는다.
• SessionStorage는 세션마다 따로 저장이 되며, 해당 세션(탭)이 닫힐때 마다 데이터도 함께 소멸된다.
• LocalStorage와 SessionStorage 모두 value가 string 타입으로만 저장되기 때문에, 다양한 타입을 저장하고 사용하기 위해선 반드시 stringify와 parse 과정을 거쳐 주어야 한다.

 

 

 

 

오늘은 이렇게 WebStorage의 종류인 LocalStorage와 SessionStorage에 대해 알아보고 둘에 차이점을 비교해 보는 시간을 가졌습니다. 제 글이 여러분들에게 도움이 되셨기를 바라며 이번 글은 여기서 마치도록 하겠습니다. 감사합니다 : )

 

 

 

---

참고 문헌

 

HTTP 쿠키 _ MDN

쿠키와 document.cookie _ Javascript.info

Web Storage API 사용하기 _ MDN

Window.localStorage _ MDN

Window.sessionStorage _ MDN

https://ko.javascript.info/localstorage