브라우저 저장소 비교하기

📌 서론

최근 토이 프로젝트를 진행하며, 게임의 점수를 저장하고 쇼핑몰 물품을 장바구니에 저장하는 작업을 localStorage를 통해 진행했다. 여태까지 스토리지, 쿠키등 저장소에 대하여 많이 들어봤지만, 정확한 개념은 모르고 사용했다. 이번에 정리를 하며 브라우저 저장소에 대한 개념을 정리해보자

📌 쿠키란 ?

서버가 사용자의 웹 브라우저에 전송하는 작은 크기의 조각, 브라우저는 그 데이터 조각들을 저장해 놓았다가 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송한다. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용

• 과거에는 클라이언트 측에 정보를 저장할 때 쿠키를 주로 사용하곤 했지만, 모든 요청마다 쿠키가 함께 전송되기 때문에 성능이 떨어지는 원인이 될 수 있다. 정보를 클라이언트 측에 저장하려면 Modern APIs의 종류인 웹 스토리지 API(localStorage,sessionStorage) 와 IndexedDB 를 사용

📌 웹 스토리지 (Web Storage)

기존 쿠키의 문제점을 극복하기 위해 웹 브라우저가 직접 데이터를 저장할 수 있게 해준다. HTML5 이전에는 응용 프로그래이 데이터를 요청할 때마다 매번 쿠키에 그 정보를 저장했지만, 웹 스토리지는 사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장할 수 있도록 한다.

즉 , 웹 스토리지는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능, 쿠키의 기능 자체는 유사하지만, 쿠키는 약 4KB까지 밖에 저장 공간을 이용하지 못하는 반면에 웹 스토리지는 약 5MB까지 저장 공간을 이용할 수 있다.

스토리지의 특징

• Key : Value 쌍으로 데이터를 생성, Key를 기준으로 데이터를 조회, 변경, 삭제한다.

• 클라이언트에 대한 정보 및 데이터를 서버에 불필요하게 저장하지 않으며, 로컬에만 정보를 저장

• Domain별로 (local/session) Storage가 생성된다.

📌 웹 스토리지의 종류

1. 로컬 스토리지 (localStorage)

브라우저 종료시에도 유지되는 데이터를 저장할 수 있는 객체

로컬 스토리지는 브라우저에 반영구적으로 데이터를 저장하며, 브라우저를 종료해도 데이터가 유지된다. 브라우저 자체에 반영구적으로 데이터가 유지되지만, 도메인이 다른 경우에는 로컬 스토리지에 접근할 수 없다.

// 로컬 스토리지 쓰기
localStorage.setItem("key",value);
localStorage.key = value;

// 로컬 스토리지 접근
localStorage.getItem('key');
localStorage.key;

// 로컬 스토리지 삭제
localStorage.removeItem('key');
localStorage.clear();

2. 세션 스토리지 (sessionStorage)

하나의 세션만을 위한(새로고침해도 유지되는) 데이터를 저장하는 객체

세션 스토리지는 각 세션마다 데이터가 개별적으로 저장된다. 세션 스토리지는 로컬 스토리지와 다르게 세션을 종료하면 데이터가 자동으로 제거된다. 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없다.

// 세션 스토리지 쓰기
sessionStorage.setItem("key",value);
sessionStorage.key = value;

// 세션 스토리지 접근
sessionStorage.getItem('key');
sessionStorage.key;

// 세션 스토리지 삭제
sessionStorage.removeItem('key');
sessionStorage.clear();

로컬 스토리지 VS 세션 스토리지

로컬	세션
만료 기한 없이 저장	종료, 새 탭을 열 경우 데이터가 삭제
지속적으로 필요한 정보를 저장하기에 좋음	잠시동안 필요한 정보를 저장하기에 좋음

📌 IndexedDB

IndexedDB는 색인이 포함된 JSON객체가 모여있는 트랜잭셔널 로컬 데이터베이스를 위해 W3C가 권고한 웹 브라우저 표준 인터페이스의 하나이다.

• Key-value로 데이터를 관리하며 B-Tree 데이터 구조를 가진다.

• Index를 이용해 빠르게 검색이 가능하다.

• IndexedDB 데이터는 영속적으로 유지되지만, 특정 상황에 따라 삭제될 수 있다.

• IndexedDB 는 Transaction Model 을 따르며, 모든 변경은 Transaction 안에서 일어난다.

• 만약 Transaction 내에서 문제가 생긴다면, 모든 변경사항을 폐기되고 이전 상태로 돌아간다.

IndexedDB 와 localStorage의 차이점

localStorage	IndexedDB
적은 양의 데이터를 저장할 때 유용	많은 양의 구조화된 데이터를 저장할 때 유용
동기적으로 작동하며, 오직 문자열 타입의 키&값만을 사용	JS가 인식할 수 있는 자료형과 객체 사용가능
JSON.stringify / JSON.parse와 같은 함수가 필요	키,값 형태로 데이터가 저장되며 문자열 타입이 아니어도 상관없다
	비동기적으로 작동

📌 참고

https://pks2974.medium.com/indexeddb-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-ca9be4add614
https://doinge-coding.tistory.com/entry/%EC%9B%B9%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-IndexedDB-Cache-API
https://mong-blog.tistory.com/entry/indexedDB%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90