웹브라우저에서의 저장소에 대해 알아보기 (로컬스토리지, 세션 저장소, IndexedDB)

웹 브라우저에서 로그인했는지, 이전에 방문한 페이지가 어딘지, 현재 페이지의 상황 등,
클라이언트 측의 데이터를 저장해야할 필요가 있을 수 있다.

이때 웹의 저장소를 이용해서 다양한 방법으로 클라이언트의 데이터를 저장할 수 있다.

관련 글 : 쿠키, 세션, 캐시에 대해 알아보기

 

 

 

웹스토리지(web storage)

 

HTML5부터 도입된 개념으로, (** 도입 이전에는 쿠키를 저장소의 역할로 사용했다.)

 

데이터를 클라이언트 측에서 저장하고 서버와는 통신하지 않는다는 특징이 있다.

따라서 불필요하게 서버에 데이터를 저장하지 않아도 되고, 브라우저에서만 접근 가능하고 서버에서 접근은 불가능하다.

 

`key - value`형태로 데이터를 저장하고,

저장용량은 모바일은 2.5Mb, 데스크탑은 5Mb~10Mb 정도이다.

HTML5를 지원하는 브라우저에서만 사용 가능하다.

각각의 도메인마다 별도의 로컬스토리지가 구분되어있다.
다른 도메인의 로컬스토리지로는 접근할 수 없기 때문에 도메인간 데이터 공유가 어렵다.
(프로토콜, 호스트, 포트가 같으면 같은 스토리지를 공유한다. )

 

스토리지는 window 객체 안에 들어있고 Storage 객체를 상속받기 때문에 setItem이나 getItem과 같은 데이터 읽기 및 쓰기를 위한 간단한 동기식 API를 제공한다.

** 배열 및 객체와 같은 복잡한 데이터 유형을 지원하지 않고 오직 String 형태만 저장이 가능하다.

따라서 객체 데이터를 가져오고 보내기 위해서는 json을 이용해 보낸다. 

// 보낼 때는 JSON.stringify을 사용해서 보내고 받을 때는 JSON.parse

localStorage.setItem('object', JSON.stringify({ a: 'b' }));
JSON.parse(localStorage.getItem('object'));

 

로컬스토리지, 세션스토리지 두 종류가 있고 둘은 데이터의 영구성에 있어서 차이가 있다.

로컬 스토리지는 사용자가 정보를 지우지 않는 이상 정보가 계속 남아있다.
하지만 세션 스토리지는 브라우저의 탭이나 윈도우가 닫히면 스토리지가 초기화된다.

 

클라이언트 측에서 데이터를 직접 수정할 수 있고, XSS 공격 가능성이 있기 때문에 보안적으로는 취약하다고 할 수 있다.

 

 

 

 

 

1. 로컬 저장소 (localStorage)

`Window.localStorage` 에 위치하게된다.

로컬 스토리지에 저장된 데이터는 브라우저가 닫혀도 유지되므로, 
사용자가 다시 웹 사이트를 방문했을 때 이전 데이터를 불러와 사용할 수 있다.

따라서 사용자가 직접 지우거나 웹 브라우저 설정을 통해 삭제하기 전까지 브라우저에 기억되며, 자동 로그인 등에 사용된다.

 

//로컬스토리지에 데이터를 저장
localStorage.setItem('key', 'value'); 

// 저장한 값을 불러온다
const cat = localStorage.getItem('key');

// 저장된 값 삭제
localStorage.removeItem('key');

// 로컬 스토리지 전체 데이터 삭제
localStorage.clear();

 

 

 

2. 세션 저장소 (sessionStorage)

`Window.sessionStorage`에 위치하게된다.

세션스토리지는 페이지 세션이 끝날 때 자동으로 초기화되는 특징이 있다. 따라서 사용자의 세션이 유지되는 동안에만 데이터가 유지되므로, 사용자가 브라우저를 종료하거나 세션이 만료되면 데이터가 손실되게된다.

로그인 정보나 비회원의 쇼핑몰의 장바구니 등에 사용된다. 로컬 스토리지와 같은 방법으로 키-값쌍으로 데이터를 저장한다. 

 

 

IndexedDB

Indexed Database API 또는 IndexedDB (과거 이름: WebSimpleDB) 는
색인이 포함된 JSON 객체가 모여있는 트랜잭셔널 로컬 데이터베이스를 위해 W3C 가 권고한 웹 브라우저 표준 인터페이스의 하나이다

 

비동기식 데이터베이스 API로 , 기존의 웹 스토리지에 비해 더 큰 용량을 저장할 수 있으며 index를 가져, 빠르게 검색이 가능한 방식이다.

웹 스토리지와 달리 javascript 가 이해하는 어떠한 값이라도 모두 저장할 수 있다.

IndexedDB 는 용량 제한은 특별히 없으나, 컴퓨터 하드웨어의 용량이나 브라우저 설정 등에 따라 달라질 수 있다.
(대체로 대부분의 브라우저에서는 50MB ~ 500MB의 저장 용량을 제공한다.)

비교적 최근 웹 브라우저에서만 지원되고, 데이터를 넣고 조회하는 작업이 모두 비동기라는 점을 주의해야한다.

로컬스토리지와 동일하게 데이터가 영구적으로 유지되고, key와 value로 구성되어 있지만, 보다 복잡한 구조의 데이터도 저장할 수 있다. 또 사용법도 로컬, 세션 스토리지보다 복잡하다.

비동기적으로 데이터베이스작업을 처리하므로, 일반적으로 시간이 오래걸리는 데이터베이스 작업을 하는 동안, 사용자가 버벅거리거나 하는 불편한 현상을 줄이고 다른 동작을 실행할 수 있게된다. (동기적으로 처리한다면 DB작업동안 사용자가 기다려야할 수 있다.)

로컬스토리지, 세션스토리지와 달리 도메인 제한이 없으므로 도메인과 상관없이 모든 웹 사이트에서 IndexedDB에 접근할 수 있다.

트랜잭션도 지원한다. 트랜잭션은 데이터베이스에서 여러 개의 연속된 작업을 하나의 논리적 단위로 묶어서 실행하는 것을 말한다.

로컬 저장소나 세션 저장소보다 구현이 더 복잡하고, 데이터베이스 관리와 버전 관리를 수동으로 처리해야 한다.

 

 

데이터 베이스 연결

open() 메서드를 사용해서 데이터 베이스를 열 수 있다. 인수로는 데이터 베이스의 이름과 버전을 받는다. 버전은 데이터 베이스를 업그레이드(변경)하고 추적하는데 사용된다. 데이터 베이스 수정시, 버전도 바꿔줘야한다.

const request = indexedDB.open('myDatabase', 1);

objectStore 생성

objectStore는 데이터를 담는 공간으로 고유한 이름을 가져야한다.

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
};

myDatebase가 새로 열리거나 수정될 때(버전이 변경될 때), onupgradeneeded 이벤트가 트리거된다. 이 이벤트의 핸들러에서objectStore을 생성할 수 있다.

데이터 추가

데이터베이스 연결에 성공하면 onsuccess 이벤트가 트리거되고 이벤트 핸들러를 통해서 데이터를 추가, 조회 할 수 있다.

request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['myObjectStore'], 'readwrite');
  const objectStore = transaction.objectStore('myObjectStore');
  const data = { id: 1, name: 'John', age: 30 };
  const addRequest = objectStore.add(data);
  addRequest.onsuccess = function(event) {
    // 데이터 추가가 성공적으로 이뤄졌을 때 실행할 함수 입력;
  };
};

event.target.result를 사용하여 데이터베이스를 가져온다. 그 다음, transaction() 메서드를 사용하여 트랜잭션을 생성한다. 트랜잭션은 데이터베이스 작업을 묶어서 실행하는데 사용된다. 이때, objectStore() 메서드를 사용하여 myObjectStore라는 이름의 Object Store를 가져온다.
그리고, 추가하고자 하는 데이터를 객체 형태로 생성하고 add() 메서드를 사용하여 데이터를 myObjectStore에 추가한다. add() 메서드는 객체를 저장소에 추가하는 메서드이다. 데이터 추가가 성공적으로 이루어지면, addRequest.onsuccess 핸들러에서 원하는 함수를 작성할 수 있다.

* 트렌잭션: 데이터베이스의 상태를 변화시키기 해서 수행하는 작업의 단위

 

** 참고. 시크릿 모드에서 IndexedDB, Storage 를 사용하면, 값은 저장되지 않고 브라우저 종료시 사라진다.

 

 

 

참고

https://tristan91.tistory.com/521

https://velog.io/@kjewt/posts

 https://chaeyoung2.tistory.com/112