📙 브라우저 저장소

✅ 브라우저 저장소

브라우저 저장소는 개발자 도구 > Application에서 확인이 가능하다.

❓ 브라우저 저장소란?

HTML5에 추가된 기능이며, 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 기능이다.

---

✅ 브라우저 저장소 종류

1. LocalStorage
2. SessionStorage
3. COOKIE
4. IndexedDB

---

1️⃣ LocalStorage 특징

• 브라우저에 반영구적으로 데이터를 저장하며, 브라우저를 종료해도 데이터가 유지된다.
• 도메인이 다를 경우 로컬 스토리지에 접근할 수 없다.
  예를 들어 구글에서 저장한 로컬스토리지를 네이버에서 접근할 수 없는 것과 같다.

2️⃣ SessionStorage 특징

• 각 세션마다 개별적으로 데이터를 저장한다. 즉, 여러개의 탭을 실행하면 탭 마다 개별적으로 데이터가 저장되는 것을 의미한다.
• 로컬 스토리지와 다르게 페이지를 닫게 되면 데이터가 자동으로 제거된다.
• 같은 도메인이더라도 세션이 다르면 데이터에 접근이 불가하다.

3️⃣ Cookie 특징

• 서버를 대신하여 웹 브라우저에 저장을 요청할 때, 정보를 서버에 보내 사용자를 식별할 수 있게 해준다.
• 웹 페이지 방문 시 방문 기록 등 브라우저에서의 정보들이 저장된 텍스트(문자열)파일이다.
• 웹에서 요청할 때 마다 연결과 해제를 반복하며 매 요청 시 새로운 사용자로 인식한다.

4️⃣ IndexedDB 특징

• 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 API이다.
• 브라우저 별 차이가 있지만, 보통 HDD의 50%정도 저장이 가능하다.
  • Chrome - 사용자 디스크 용량의 60%
  • Edge - Chrome과 동일 (크로미움 엔진 기반이기 때문)
  • Firefox - 빈 디스크 용량의 50%까지 저장
  • Safari - 1GB까지 저장 (용량을 다 쓰면 추가할건지 팝업이 뜸)
• 객체지향 데이터 베이스이다. (IndexDB는 자료형과 객체를 저장할 수 있다.)
• 비동기 API이다.

---

💡 각 저장소의 차이점

❓ 트랜잭션이란?
데이터베이스의 상태를 변경시키기 위해 수행하는 작업 단위

---

✅ [참고] 웹 스토리지(Web Storage)와 쿠키

웹 스토리지는 기존의 쿠키(Cookie)의 문제점을 극복하기 위해 나온 기술로, 데이터베이스 서버나 클라우드 플랫폼이 아닌 브라우저를 통해 데이터를 저장하는 기술을 의미한다.
웹 스토리지와 쿠키는 기능은 정말 비슷하다.
다른 점이 있다면, 쿠키는 약 4KB까지 저장할 수 있지만, 웹 스토리지는 약 5MB이상 저장할 수 있다.