예전에 사용했던 저장 버튼의 유래 플로피디스켓
웹 스토리지(Web Storage)
웹 스토리지란, 브라우저에서 키/값 쌍을 저장할 수 있는 방법이다.
- 세션 스토리지(Session Storage)
- 세션이 유지되는 동안(브라우저가 열려있는 동안) 제공
- 저장 공간이 쿠키보다 큼(최대 5 MB)
- 로컬 스토리지(Local Storage)
- 브라우저를 닫았다 열어도 데이터 유지
- 유효기간 없이 데이터 저장(자바스크립트 사용 또는 브라우저 캐시/로컬 저장 데이터를 지워야만 삭제)
- 페이지 프로토콜별로 구분(http://wablog.vercel.app, https://wablog.vercel.app 각자 다른 저장소에 저장)
- 저장 공간이 세션 스토리지, 쿠키보다 큼
💡 시크릿 모드에서는 대부분의 브라우저에서, 브라우저를 닫으면 저장한 데이터를 제거
(사파리의 경우, 아예 저장할 수 없도록 최대용량을 0 Byte 할당)
IndexedDB
IndexedDB는 브라우저 내에 대용량 데이터 구조를 저장하고 고성능 검색을 위해 인덱싱하기 위한 웹 API이다. 트랜잭션 데이터베이스 시스템이나, 고정 열 테이블이 아닌 자바스크립트 객체를 사용하여 데이터를 저장한다.
웹 스토리지는 적은 양의 데이터를 저장하는데 유용하지만 많은 양의 구조화된 데이터에는 적합하지 않아, 이런 상황에서 IndexedDB를 사용한다. 또한, 이 기능은 웹 워커(Web Worker)에서도 사용이 가능하다.
저장한 데이터는 같은 도메인에서만 접근할 수 있으며, 애플리케이션 블록을 방지하기 위해 모든 작업은 비동기로 이루어진다.
트랜잭션이란?
인가 받지 않은 사용자로부터 데이터를 보장하기 위해 DBMS(Database Management system)가 가져야 하는 특성이자, 데이터베이스 시스템에서 하나의 논리적 기능을 수행하기 위한 작업의 기본 단위
- 원자성(Atimicity)
- 분해가 불가능한 작업의 최소 단위
- 연산 전체가 성공 또는 실패
- 하나라도 실패할 경우 전체가 취소되어야 함
- 커밋/롤백
- 일관성(Consistency)
- 트랜잭션이 실행 성공 후 항상 일관된 데이터베이스 상태를 보존해야 함
- 격리성(Isolation)
- 트랜잭션 실행 중 생성하는 연산의 중간 결과를 다른 트랜잭션이 접근 불가
- 영속성(Durability)
- 성공이 완료된 트랜잭션의 결과는 영속적으로 데이터베이스에 저장
쿠키(Cookie)
서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각으로, 브라우저는 이를 저장해 두었다가 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송한다. 쿠키는 주로 세션 관리(서버 저장을 위한 로그인, 장바구니 등의 정보 관리), 개인화(테마 세팅), 트래킹(사용자 행동 기록/분석)을 위해 사용된다.
세션 쿠키는 현재 세션이 끝날 때 삭제되고, 영속적인 쿠키는 Expires 속성에 명시된 날짜에 삭제되거나, Max-Age 속성에 명시된 기간 이후에 삭제된다. 두 속성 모두 설정하지 않으면 세션 쿠키가 된다.
모든 요청마다 쿠키가 함께 전송되기 때문에, 성능 저하 원인이 될 수 있어 Modern APIs(웹 스토리지 API, IndexedDB)의 사용을 권장
참고자료
- [HTTP 쿠키](https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies)
- [Web Storage API](https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API)
- [Window.localStorage](https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage)
- [IndexedDB API](https://developer.mozilla.org/ko/docs/Web/API/IndexedDB_API)
- [수제비 정보처리기사 필기, 2020](https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=305162168)