001_브라우저의 저장소에 대해 알아보자 🌎

Web Storage

Web Storage란 HTML5부터 제공하는 기능으로, 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능이다.

Web Storage는 키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 저장한다. 영구 저장소(LocalStorage)와 임시 저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분해 사용할 수 있다.

Web Storage는 사이트의 도메인 단위로 접근이 제한된다. 예를 들어 A도메인에서 저장한 데이터는 B도메인에서 조회할 수 없다.

HTML5부터 새롭게 지원하는 저장소이기 때문에 HTML5를 지원하지 않는 브라우저에서는 사용할 수 없다.

Web Storage vs Cookie

웹 스토리지	쿠키
클라이언트에만 존재할 뿐 서버로 전송되지 않는다.	웹사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키 정보를 포함해 서버로 전송된다.
문자열을 넘어 구조화된 객체를 저장할 수 있다.	문자열만 가능하다.
개수 제한은 없으며, 용량은 약 10MB 제한이 있다.	개수와 용량 제한이 있다. 최대 300개, 하나의 사이트에서 최대 20개, 크기는 4KB로 제한되어 있다.
만료기간의 설정이 없다.	만료일자를 지정하게 되어 있어 언젠가 제거된다.

LocalStorage

- 저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다.
- 도메인마다 별도로 LocalStorage가 생성된다. => 도메인만 같으면 전역적으로 공유가 가능하다.
- Window 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.

// 키/밸류 형식으로 로컬스토리지에 저장
localStorage.setItem('name', 'seop'); 

// 스토리지 데이터 불러오기
localStorage.getItem('name');   // seop

// 스토리지 값 삭제
localStorage.removeItem('name');
localStorage.getItem('name');  // null (삭제됨)

// 전체 삭제
localStorage.clear();

SessionStorage

- window.sessionStorage 객체
- 세션 쿠키와 달리 탭/윈도우 단위로 세션 스토리지 생성.
- 즉 window 객체와 동일한 유효 범위 및 생존 기간을 가지며 탭/윈도우를 닫을 시 데이터가 삭제된다.
- 도메인마다 별도로 SessionStorage가 생성된다.
- 사용 방법은 LocalStorage와 동일하다.

IndexedDB

- IndexedDB는 파일이나 Blob 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우레벨 API다.
- LocalStorage의 용량이 약 10MB인 것에 비에 보통 HDD 용량의 50% 정도를 사용할 수 있다.
- IndexedDB는 SQL을 사용하는 관계형 데이터베이스(RDBMS)와 같이 트랜잭션을 사용하는 데이터베이스 시스템이다.
    *트랜잭션 ? 
       데이터베이스의 상태를 변화시키는 하나의 논리적 기능을 수행하기 위한 작업의 단위
- 객체지향 데이터베이스이며 JavaScript가 인식할 수 있는 자료형과 객체를 저장할 수 있다.

// 데이터베이스 열기
const request = indexedDB.open("notes", 2);
// IndexedDB.open(Name, Version)

// Name 또는 Version과 일치하는 데이터베이스가 없는 경우 호출
request.onupgradeneeded = e => {
	alert("upgrade is called");}

// Name과 Version 모두 일치하는 데이터베이스가 있는 경우 호출
request.onsuccess = e => {
	alert("success is called");}

// Name이 일치하지만 존재하는 DB의 Version 보다 낮은 Version을 호출하면 error가 발생
request.error = e => {
	alert("error is called");}

// Object Store(테이블) 생성
request.onupgradeneeded = e => {                
	db = e.target.result;

	const objectStore = db.createObjectStore("memo", { keyPath: "id" });
}

// 데이터 추가
const memos = [
	{ id: 1, name: "Lee", age: 12, text:"I don't want to go to school."},
	{ id: 2, name: "Kim", age: 25, text:"I don't want to go to work." }
];

let memoObjectStore = db.transaction("memo", "readwrite").objectStore("memo");
memos.forEach(function(memo) {
	memoObjectStore.add(memo);
});

// 데이터 읽기
const request = memoObjectStore.get("1");

request.onerror = e => {
	alert("Error is called");
};

request.onsuccess = e => {
	alert(`Name: ${request.result.name}, Text: ${request.result.text}`);
}