자바스크립트 브라우저 저장소 (LocalStorage, SessionStorage, IndexDB, Cookies)

Web Storage ?

도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능 (HTML5부터 제공) 키와 값 쌍으로 데이터를 저장하며 키를 기반으로 데이터를 조회할 수 있으며 영구 저장소(LocalStorage)와 임시 저장소(SessionStorage)로 나누어 데이터 지속성을 구분해 각 환경에 맞는 선택을 할 수 있다. 하지만 사이트의 도메인 단위로 접근을 제한한다. A에서 저장한 데이터는 B에서 조회할 수 없다.

Cookie ? 

쿠키는 웹 서버가 클라이언트의 정보를 저장하기 위한 데이터 조각으로 사이트에서 어떤 사용자가 어떤 상품을 장바구니에 담았는지, 로그인을 유지하는지 등을 서버에 요청할 때 마다 서버로 전송된다. 쿠키는 브라우저마다 저장되며 다른 브라우저를 사용하거나 쿠키를 삭제하면 쿠키 데이터도 제거된다. 하지만 작은 4KB의 제한된 크기와 HTTP Request 스파이웨어를 통한 추적 및 탈취에 대한 보안 문제가 존재한다.

 

이 둘의 차이를 비교하자면

1. 쿠키는 매번 서버로 전송된다. 웹 쵸성시 쿠키 정보를 포함해 서버로 요청하지만
   Web Stroage는 데이터가 클라이언트에 존재할 뿐 서버에는 존재하지 않으므로 네트워크 트래픽 비용이 줄어든다.
2. Web Storage는 문자열 기반 데이터 외에 체계적으로 구조화된 객체를 저장할 수 있다.
3. Web Storage는 용량의 제한이 없다. 쿠키는 개수와 용량에 제한이 있지만 Web Storage는 제한이 없다.
4. Web Storage는 영구 데이터 저장이 가능하다. 쿠키는 만료일자를 저장하기에 시간이 흘러 제거된다.
   
   Session Cookie : 활성 웹 브라우저 세션이 있는 기간동안 저장된다. 웹 브라우저를 닫으면 삭제된다.
   Persistent Cookie : 각 쿠키에 지정된 기간동안 또는 장치에서 수동으로 쿠키를 제거할 때 까지 장치에 남아있는다.

LocalStorage

• 브라우저를 닫았다가 다시 열어도 계속 유지된다. (명시적으로 지우지 않는 이상 영구적으로 데이터를 보관할 수 있다)
• 도메인마다 별도로 LocalStorage가 생성되므로 도메인이 같다면 전역적으로 공유가 가능하다.
• Winodws의 전역 객체의 LocalStorage를 통해 저장과 조회를 할 수 있다.

// 구문
myStorage = window.localStorage;

// 예제
localStorage.setItem("myCat", "Tom");

// 조회
const cat = localStorage.getItem("myCat");

// 제거
localStorage.removeItem("myCat");

// 전체 항목 제거
localStorage.clear();

SessionStorage

• 브라우저가 열려있는 동안 페이지를 Reload 해도 계속 유지되지만 브라우저를 닫으면 삭제된다.
• 도메인별로 별도로 생성되어 같은 사이트의 같은 도메인이라도 브라우저가 다르면 서로 다른 영역이 된다.
• Winodws의 전역 객체의 SessionStorage를 통해 저장과 조회를 할 수 있다.

// 구문
myStorage = window.sessionStorage;

// 에제
sessionStorage.setItem("myCat", "Tom");

// 추적할 텍스트 입력 칸 가져오기
let field = document.getElementById("field");

// 자동저장 값이 존재하는지 판별
// (의도치 않게 페이지를 새로 불러올 경우에만 발생)
if (sessionStorage.getItem("autosave")) {
  // 입력 칸의 콘텐츠 복구
  field.value = sessionStorage.getItem("autosave");
}

// 텍스트 입력 칸의 변화 수신
field.addEventListener("change", function () {
  // 결과를 세션에 저장
  sessionStorage.setItem("autosave", field.value);
});

IndexDB

파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API.

Web Storage는 적은 양의 데이터를 저장하는데 유용하지만 많은 양의 구조화된 데이터에는 적합하지 않을 때 IndexDB를 사용한다.

• IndexDB는 SQL을 사용하는 관계형 데이터베이스(RDBMS)와 같이 트랜잭션을 사용하는 데이터베이스 시스템이다.
• 그러나 RDBMS의 고정 컬럼 테이블 대신 자바스크립트 기반의 객체지향 데이터베이스이다.
• 비동기 API 이다.

// 데이터 베이스 열기
const request = window.indexedDB.open("MyTestDatabase", 3);

// 핸들러 생성
request.onerror = (event) => {
  // Do something with request.errorCode!
};
request.onsuccess = (event) => {
  // Do something with request.result!
};

// 핸들러 이벤트 
let db;
const request = indexedDB.open("MyTestDatabase");
request.onerror = (event) => {
  console.error("Why didn't you allow my web app to use IndexedDB?!");
};
request.onsuccess = (event) => {
  db = event.target.result;
};

// 오류 처리
db.onerror = (event) => {
  // Generic error handler for all errors targeted at this database's
  // requests!
  console.error(`Database error: ${event.target.errorCode}`);
};

// 새버전 생성 또는 업데이트
request.onupgradeneeded = (event) => {
  // Save the IDBDatabase interface
  const db = event.target.result;

  // Create an objectStore for this database
  const objectStore = db.createObjectStore("name", { keyPath: "myKey" });
};