Web Storage

😎 두 개의 메커니즘의 차이점

데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐에 있다.

😎 두 개의 메커니즘의 공통점

두 기술 모두 데이터를 브라우저 상에 저장한다는 것이며,JS API가 완전히 동일한 형태이다.

local

• 스토리지에 저장된 값을 삭제하기 전까지는 브라우저에 계속 남아있다.
• 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아있다.
• 하지만 이러한 로컬 스토리지의 데이터 영속성(Persistence) 어디까지나 계속해서 동일한 컴퓨터에서 동일한 브라우저를 사용할 떄만 해당한다.
• 즉, 같은 컴퓨터에서 다른 브라우저를 사용하거나, 또는 다른 컴퓨터에서 같은 브라우저를 사용하는 경우에는 엄연히 다른 브라우저이므로 서로 다른 두 개의 로컬 스토리지에 데이터가 저장될 것이다.

session

• 세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워진다.
• 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸한다.

👌 다른 기기나 브라우저 간에 데이터가 공유되고 영속되야 한다면 당연히 클라우드 플랫폼이나 데이터베이스 서버를 사용해야 한다.

기본 API

• 웹 스토리지는 기본적으로 키와 값으로 이루어진 데이터를 저장할 수 있다. 개념적으로 해시 테이블 자료 구조를 생각하면 이해가 쉽다.
• 자바스크립트 API의 기본적인 사용 방법은 다음과 같다.
• 세션 스토리지를 사용할 때는 예제 코드의 localStorage 부분을 sessionStorage로 대체하기만 하면 된다.

// 키에 데이터 쓰기 + 현재 도메인의 로컬 Storage 객체에 접근한 후, 항목 하나를 추가
localStorage.setItem("key".value);
// 키로부터 데이터 읽기 
localStorage.getItem("key");
// 키의 데이터 삭제
localStorage.removeItem("key");
// 모든 키의 데이터 삭제 + localStorage 항목의 전체 제거 구문
localStorage.clear();
// 저장된 키/값 쌍의 개수 
localStorage.length;

color-picker+localstorage

엄밀하게는 window.localStorage를 사용해야하지만, window 객체의 대부분의 속성이 그러하듯, 줄여서 localStorage로 로컬 스토리지 객체에 접근할 수 있다.
브라우저의 콘솔 창을 열고 다음과 같이 테스트를 해보시면 로컬 스토레지 사용 유무 확인이 가능하다.

MDN 문서 - window.localStorage

읽기 전용 속성을 사용하면 Document 출처의 Storage객체에 접근할 수 있다.
localStorag에 저장한 자료는 페이지 프로토콜별로 구분한다.
특히 HTTP로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS와는 다른 localStorage에 저장된다.

키와 값은 항상 각 문자에 2바이트를 할당하는 UTF-16 DOMString의 형태로 저장한다.

MDN문서

추가 읽어볼것