localStorage vs. sesseionStorage

Vanilla JS 로 클론 코딩을 하면서,
localStorage 라는 개념에 마주하게 되었다.

localStroage 라는 개념과,
sessionStorage 라는 개념을 비교하면서 정리해보고자 한다.

그에 앞서,
web storage 개념을 알아야 한다.

✔️ web storage

웹 스토리지 (web storage) 는
서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는
HTML5 의 기능이다.

기본적으로 키 (key) 와 값 (value) 으로 이루어진 데이터를 저장할 수 있다.

// 키에 데이터 쓰기
localStorage.setItem("key", value);

// 키로 부터 데이터 읽기
localStorage.getItem("key");

// 키의 데이터 삭제
localStorage.removeItem("key");

// 모든 키의 데이터 삭제
localStorage.clear();

// 저장된 키/값 쌍의 개수
localStorage.length;

⚠️ Data Type

웹 스토리지는
오직 문자형 (string) 데이터 타입만 지원한다.
그와 관련하여 발생할 수 있는 문제들은,
JSON 형태로 데이터를 읽고 쓰면 해결할 수 있다.

const TODOS_LS = 'toDos';
let toDos = [];

localStorage.setItem(TODOS_LS, JSON.stringify(toDos));

const parsedToDos = JSON.parse(loadedToDos);

localStorage 에 쓸 데이터를
JSON 형태로 직렬화 (serialization) 하고,
읽은 데이터를 JSON 형태로 역직렬화 (deserialization ) 하면
원본의 데이터를 그대로 얻을 수 있다.

cf.

🍎 Cookie

웹 서버가 웹 브라우저에게 전달하여 저장했다가,
서버의 부가적인 요청이 있을 때 다시 서버로 보내주는 문자열 정보

웹 페이지를 방문했을 때의 방문 기록 등 브라우저에서의 정보들이
저장된 텍스트 파일을 말한다.

➡️ 서버를 대신해 웹 브라우저에 저장
➡️ 요청된 정보를 서버에 보내 사용자를 식별할 수 있도록 한다.

웹 스토리지와 쿠기의 기능 자체는 유사하다.
하지만, 쿠키는 약 4KB 까지 저장 공간을 이용할 수 있고,
웹 스토리지는 약 5KB 까지 저장 공간을 이용할 수 있다는 차이점이 있다.

cf.
🍎 web storage latest specs

웹 스토리지에는
localStorage 와 sessionStorage 가 있다.

이 두 매커니즘의 차이는 데이터가 어떤 범위 내에서 얼마나 보존되느냐에 있다.

✅ Session Storage

sesseionStorage 는
각 세션마다 데이터가 개별적으로 저장된다.

세션을 종료하면 데이터가 자동으로 제거되며,
같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없다.

✅ Local Storage

localStorage 는
브라우저에 반영구적으로 데이터를 저장하며,
브라우저를 종료해도 데이터가 유지된다.

브라우저 자체에 반영구적으로 데이터가 유지되지만,
도메인 (domain) 이 다른 경우에는 localStorage 에 접근이 불가하다.

cf.

⚠️ persistence

local storage 는
어디까지나 동일한 컴퓨터에서 동일한 브라우저를 사용할 때만 해당된다.
↪️ 같은 컴퓨터에서 다른 브라우저글 사용 or 다른 컴퓨터에서 같은 브라우저를 사용

다른 기기나 브라우저 간에 데이터가 공유고 영속되어야한다면,
클라우드 (Cloud) 플랫폼이나 데이터베이스(DB) 서버를 사용해야 한다.

📚 Reference
web storage
cookie
local storage vs. session storage