[JavaScript] 로컬스토리지와 세션 스토리지와 IndexDB

Zinny·2023년 5월 5일

JavaScript frontend 로컬스토리지 세션스토리지 제로베이스 프론트엔드

JavaScript

목록 보기

3/3

💡 로컬 스토리지, 세션 스토리지, IndexDB

로컬 스토리지(local storage)와 세션 스토리지(session storage)는 영어의 뜻 그대로 저장소이다. HTML5부터 도입된 웹 스토리지(web storage)으로 이전에는 쿠키를 저장소의 역할로 사용했다. 스토리지에는 key와 value를 저장하게 된다.
로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성에 있다. 로컬 스토리지는 사용자가 정보를 지우지 않는 이상 정보가 계속 남아있다. 하지만 세션 스토리지는 브라우저의 탭이나 윈도우가 닫히면 스토리지가 초기화된다.

특징

서버에 불필요하게 데이터를 저장하지 않아도 된다.
👉 서버에 자동 전송 되지 않음

데이터 저장 용량이 큰 편이다.
👉 모바일은 2.5Mb, 데스크탑은 5Mb~10Mb / IndexedDB를 사용하면 더 많은 용량 저장 가능

브라우저에서만 사용 가능하며 서버에서 접근이 불가능하다.
👉 HTML5를 지원하는 브라우저에서만 사용 가능
문자열 외에도 자바스크립트의 모든 원시형 데이터와 객체 저장 가능

또 다른 저장 방식으로는 IndexedDB가 있다. index를 가지고 빠르게 검색이 가능한 방식이며, 보다 더 큰 용량을 저장할 수 있다.
또 단순한 key-value 형식의 데이터보다 복잡한 객체 형태의 데이터를 저장할 수 있다는 특징이 있다. 또, 비동기식으로 데이터를 처리해서 더 나은 성능을 보여준다.

➡️ 로컬스토리지 사용 방법

로컬스토리지는 Window.localStorage에 위치한다. 위에서 언급한 것처럼 사용자가 수동으로 지우기 전까지 브라우저에 기억되며, 자동 로그인 등에 사용된다.

저장소를 사용하려면 먼저 저장을 해야하고, 그 저장된 값을 불러야하고 제거할 필요도 있을 것이다.

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

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

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

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

여기서, value에 객체가 들어갈 경우도 있는데, 객체가 문자열 형태로 저장되게 된다. 그래서 객체를 그대로 가져오려면 Json을 이용하는 것이 좋다.

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

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

➡️ 세션스토리지 사용방법

세션 스토리지는 로컬 스토리지와 매우 유사한 메서드를 제공한다. 메서드들은 Window.sessionStorage에 저장되어있다. 세션스토리지는 페이지 세션이 끝날 때 초기화되는 특징이 있다. 쇼핑몰의 장바구니 등에 사용된다. 로컬 스토리지와 마찬가지로 key와 value 로 데이터를 저장한다. 사용법은 로컬 스토리지와 같아서 생략하겠다.

➡️ IndexedDB 사용방법

IndexedDB는 비동기식 데이터베이스 API로, 로컬스토리지처럼 영속적으로 데이터가 유지되면서 큰 용량을 저장할 수 있다.(특정 상황에서 삭제될 수 있음) 또, index를 사용해 빠르게 데이터를 검색할 수 있으며 key와 value로 구성되어 있지만, 보다 복잡한 구조의 데이터도 저장할 수 있다. 또 사용법도 로컬, 세션 스토리지보다 복잡하다.

데이터 베이스 연결

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 핸들러에서 원하는 함수를 작성할 수 있다.

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

출처

IndexedDB1
IndexedDB2

Zinny

Studying for Frontend