브라우저 저장소 각각의 장점 - localStorage, SessionStorage, IndexedDB

eunseok·2023년 5월 2일

JavaScript frontend 제로베이스 프론트엔드 프론트엔드개발자 프론트엔드스쿨

제로베이스 프론트엔드 스쿨

목록 보기

14/19

브라우저 저장소(Web Stroage)란?

자바스크립트로 웹 개발을 하다보면 데이터를 어딘가에 저장하고 싶을 때가 있다. 보통 데이터를 저장한다고 생각하면 데이터베이스(DB) 서버나 클라우드(Cloud) 플랫폼에 데이터를 저장한다고 생각할텐데, 저장해야할 데이터가 크게 중요하지 않거나, 유실되도 무방한 데이터라면 서버 단에 데이터를 저장하는 것이 낭비일 수 있다. 그렇기 때문에 브라우저 상에 데이터를 저장할 수 있는 브라우저 저장소에 대해 알아보려고 한다.

브라우저 저장소는 HTML5부터 추가된 기능으로써 웹사이트의 데이터를 클라이언트에 저장할 수 있는 자료구조이다. 기존의 웹환경의 쿠키와 '비슷한' 기능이고, 브라우저 저장소는 KEY-VALUE의 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회한다.

왜 쿠키(cookie)를 사용하지 않고 브라우저 저장소를 사용할까?

쿠키를 사용하면 브라우저에 데이터를 저장할 수 있는데, 왜 또 다른 객체를 사용하여 데이터를 저장할까..? 라는 의문이 들 수 있다.

쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않습니다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있습니다. 대부분의 브라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있도록 해줍니다. 또한 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있습니다.
쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다는 것입니다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행됩니다.
웹 스토리지 객체는 도메인·프로토콜·포트로 정의되는 오리진(origin)에 묶여있습니다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없습니다.

https://ko.javascript.info/localstorage

localStorage와 sessionStorage

localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장하고 동일한 메서드와 프로퍼티를 제공한다.

setItem(key, value) – 키-값 쌍을 보관합니다.
getItem(key) – 키에 해당하는 값을 받아옵니다.
removeItem(key) – 키와 해당 값을 삭제합니다.
clear() – 모든 것을 삭제합니다.
key(index) – 인덱스(index)에 해당하는 키를 받아옵니다.
length – 저장된 항목의 개수를 얻습니다.

예시로
localStorage.setItem('localStorageTest', 1);
localStorage에 test라는 key로 1인 값을 보관하였다. 그 다음,
alert( localStorage.getItem('localStorageTest'));
alert로 localStorage에 test라는 key의 값을 알람해 주면,

아까 저장해 둔 1이 출력되는 것을 볼 수 있다.

로컬 스토리지는 일반 객체처럼도 사용이 가능하다.

// 키 설정하기
localStorage.test = 2;

// 키 얻기
alert( localStorage.test ); // 2

// 키 삭제하기
delete localStorage.test;

이런식으로 객체와 유사한 방법을 사용할 수 있지만, 아래의 이유로 추천하지 않는다

사용자는 length나 toString, localStorage의 내장 메서드를 키로 설정할 수 있다. 이렇게 되면 getItem, setItem은 정상적으로 작동해도, 일반 객체처럼 다룰 때 에러가 발생할 수 있다.
데이터를 수정하면 storage 이벤트가 발생하는데, 이 이벤트는 localStorage를 객체처럼 접근할 땐 일어나지 않는다.

localStorage와 sessionStorage의 차이점

로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않는다. 즉 로컬 스토리지에 데이터를 저장해둔다면 페이지를 새로고침하고 심지어 브라우저를 다시 실행해도 데이터가 사라지지 않고 남아있는다.

반면에 세션스토리지는 현재 떠 있는 탭 내에서만 유지되기 때문에 세션 스토리지는 페이지를 새로고침한다고 데이터가 사라지지 않지만, 브라우저를 다시 실행하게되면 데이터가 사라지게 된다.

localStorage.setItem('sessionStorageTest', 1);
localStorage에 test라는 key로 1인 값을 보관하고, 새로고침 한 뒤,
alert( localStorage.getItem('localStorageTest', 1));
데이터를 가져오면 위의 localStorage처럼 데이터를 잘 가져오지만,
브라우저를 아예 종료 후 다시 실행시킨 뒤 데이터를 불러오려고 한다면

null값을 가져오는 것을 볼 수 있다.

indexedDB

indexedDB란?

IndexedDB는 파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API입니다. (MDN Web Docs, IndexedDB)

우리가 데이터를 저장할 때, 클라이언트 스토리지(브라우저 제공 db)를 이용할 수 있다.
클라이언트 스토리지에는 localStorage, cookies, indexedDB가 존재한다.

localStorage와의 차이

localStoage

적은 양의 데이터를 저장할 때 유용하다.
동기적으로 작동하며, 오직 문자열 타입의 키&값만을 사용할 수 있다.
그렇기 때문에 JSON.stringify, JSON.parse와 같은 함수가 꼭 필요하다.

indexedDB

indexedDB는 많은 양의 구조화된 데이터를 저장할 때 유용하다.
localStoage와 달리, JS가 인식할 수 있는 자료형과 객체를 저장할 수 있다.
키, 값 형태로 데이터가 저장되며 문자열 타입이 아니어도 된다.
특이한 점은 비동기적으로 작동한다는 점이다.

indexedDB 사용법

일단 open함수로 dataBase를 연다.

const indexedDB = window.indexedDB;

let testDB;
const request = indexedDB.open('SampleDB'); 
request.onerror =(e)=> alert('failed');
request.onsuccess =(e)=> testDB = request.result;

코드를 실행하면

웹의 애플리케이션 부분의 indexedDB가 새로 생성된 것을 볼 수 있다.

그 후 ObjectStore를 추가한다.
ObjectStore는 데이터를 담는 공간이라고 생각하면 된다. 키(key)-값(value)로 이루어져 있다.

request.onupgradeneeded = (e) => {
    db = e.target.result;
    db.createObjectStore("name", { keyPath: "id" });
}

코드를 실행 후

name이라는 ObjectStore를 추가 해 주었다.

그 후 트랜잭션을 사용하여 객체 저장소에 접근 후, 데이터를 저장 후 불러 올 수 있다.

function savedIdxedDB(names) {
  const request = window.indexedDB.open("SampleDB");
  request.onerror = (e) => {
    alert("DataBase error", e.target.errorCode);
  };
  request.onsuccess = () => {
    const db = request.result;
    const transaction = db.transaction(["name"], "readwrite"); 

    const objStore = transaction.objectStore("name");
    for (const name of names) {
      const request = objStore.add(name); // 저장!
      request.onsuccess = (e) => console.log(e.target.result);
    }
  };
}

const names = [
  { id: 1, name: "choi" },
  { id: 2, name: "eun" },
  { id: 3, name: "seok" },
];

savedIdxedDB(names);