[WEB] LocalStorage, SessionStorage

개요

현재 이력을 테이블 형태로 제공하고 있는데 칼럼을 추가하되 디폴트로는 숨김 처리하고 원할 때만 노출시키는 기능을 구현해달라는 요청사항이 들어왔습니다.

그래서 저는 model로 뿌려줄 때 숨김 칼럼 내용까지 다 뿌려주고 아래 그림처럼 팝업을 만들어 클라이언트가 노출시킬 칼럼과 숨김 처리할 칼럼을 지정하도록 설계를 했습니다.

 

 

클라이언트마다 노출시키고 싶은 칼럼이 다를 것이므로 처음에는 쿠키를 사용하여 각 클라이언트마다 노출시키고 싶은 칼럼들, 숨기고 싶은 칼럼들을 JsonArray 형태로 저장하려고 했습니다.

하지만, 생각해보니 굳이 이 내용을 HTTP Header에 넣어 서버까지 보낼 필요가 없을 것 같아 브라우저 내에서만 저장하는 값을 찾는 도중 LocalStorage와 SessionStorage에 대해 알게 됐습니다.

따라서, 이번 게시글에서는 LocalStorage와 SessionStorage 그리고 쿠키와의 차이점에 대해 알아보겠습니다.

 

Web Storage

HTML5에는 웹의 데이터를 클라이언트 즉, 브라우저 내 저장할 수 있는 자료구조인 Web Storage 스펙이 포함되어 있습니다.

Web Storage는 단순한 Key-Value 저장소이며 value는 항상 문자열 형태여야 합니다. 따라서, 배열과 같이 객체 값을 저장하기 위해서는 JSON.stringify 메서드를 통해 문자열 형태로 저장하고 꺼낼 때는 JSON.parse 메서드를 통해 문자열을 다시 객체로 변환해줘야 합니다.

Web Storage는 영구 저장소의 성격을 지닌 LocalStorage와 임시 저장소의 성격을 지닌 SessionStorage를 별도로 두어 데이터의 지속성을 구분하고 있습니다.

 

Web Storage vs Cookie

간단히 Web Storage와 쿠키의 차이점을 정리해보겠습니다.

• 쿠키는 HTTP Header 내 저장되며 매번 서버로 전송이 됩니다.
  • 서버로 굳이 보낼 필요가 없는 데이터를 쿠키에 저장할 경우 불필요한 네트워크 트래픽 비용을 늘릴 수 있습니다.
  • 반면, Web Storage의 경우 HTML5과 javascript를 통해서만 접근할 수 있고 해당 데이터는 서버로 보내지지 않습니다.
  • 대신, 개발자 도구에서 Web Storage의 내용을 조회 및 수정할 수 있으므로 보안이 필요한 데이터들은 저장하면 안 됩니다. 
• 쿠키와 달리 Web Storage는 용량의 제한이 없습니다,
  • 쿠키는 개수와 용량에 있어 제한이 있습니다. (한 사이트 내 최대 20개 그리고 쿠키의 최대 크기는 4KB)
  • Web Storage의 경우 이러한 제한이 없습니다.
• 쿠키와 달리 Web Storage의 경우 만료일자 설정을 별도로 하지 않습니다.
  • 쿠키의 경우 만료일자를 지정할 수 있습니다. (-1의 경우 브라우저가 닫힐 때까지, 0인 경우 삭제, 양의 정수는 지속 시간)
  • LocalStorage의 경우 명시적으로 개발자 도구에서 지우지 않는 이상 영구적으로 보관이 됩니다. 즉, 브라우저를 닫고 다시 켜도 데이터는 유지가 됩니다.
  • 반면, SessionStorage의 경우 해당 탭 내에서만 데이터가 유지됩니다. 따라서, 다른 탭에서는 해당 데이터가 유지되지 않고 탭을 끄거나 브라우저를 닫을 경우 데이터가 제거됩니다.

 

* 쿠키에 대해서는 기존 게시글(https://jaimemin.tistory.com/1885)을 참고해주세요.

 

SessionStorage 적용

개요에 서술했던 요청사항은 결국 SessionStorage로 해결을 했고 이유는 아래와 같습니다.

• 숨김 처리한 칼럼들은 결국 임시로 조회할 칼럼들입니다.
• 따라서, 클라이언트가 브라우저를 닫고 다시 이력 페이지를 접근했을 때 해당 칼럼 내용을 보고 싶어 할 확률은 낮습니다.
• 그래서 브라우저를 닫았다가 다시 열어도 데이터가 지속되는 LocalStorage보다는 해당 탭에서만 유지되는 SessionStorage가 더 낫다고 판단했습니다.

 

간단한 구현 코드 예시

 

이력 페이지 js 코드

 

팝업 js 코드

 

참고

https://velog.io/@ejchaid/localstorage-sessionstorage-cookie%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

[web] LocalStorage, SessionStorage, Cookie의 차이점

https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

Web Storage API 사용하기 - Web API | MDN