[Javascript] 자바스크립트로 브라우저 저장소 이용하기 (LocalStorage, Cookies, indexedDB)

보통 데이터를 저장할 때, 서버..즉 데이터베이스에 저장하는 경우가 대부분이다.

하지만, 브라우저에도 저장소가 마련되어있고,

상황에 따라서는 브라우저 저장소에 저장하는 것이 더 나은 상황도 존재한다.

• 서버에는 보통 중요한 데이터를 저장한다.
  • 지속되어야하는 데이터로, 사용자에게서 분리하여 안전하게 저장한다
• 브라우저에는 여러 간단한 데이터를 저장할 수 있다.
  • 웹사이트를 방문하였을 때 자바스크립트 코드에 의해 브라우저 저장소와 의사소통하여 사용할 수 있다
  • 또는, 사용자가 브라우저에서 조작할 수 있지만, 다른 사용자와 공유는 할 수 없다

 

이 글에서 알아볼 것

• LocalStorage, SessionStorage
• Cookies
• IndexedDB

 

1. LocalStorage, SessionStorage

• 특징
  • 단순한 키-값 저장소이다.
  • 보통 사용자 설정이나 기본 사용자 데이터를 관리한다
  • 사용하기 쉽고, 다용도로 사용할수있지만, 복잡한 데이터를 다루는것은 힘들다

LocalStorage 와 SessionStorage는 거의 유사하므로, 

더 많이 이용되는 LocalStorage를 살펴보겠다.

 

const userId = "messi";

storeBtn.addEventListener("click", () => {
  localStorage.setItem("uid", userId);
});
retrieveBtn.addEventListener("click", () => {
  const extractedId = localStorage.getItem("uid");
  if (extractedId) {
    console.log("아이디: " + extractedId);
  } else {
    console.log("아이디를 찾을 수 없습니다");
  }
});

• localStorage.setItem(”식별자", 값);
  • setItem을 통해 로컬스토리지에 저장한다
  • 식별자(무조건 문자열이여야함)를 통해 로컬스토리지에 값을 컨트롤할수있다
• localStorage.getItem("식별자");
  • getItem을 통해 로컬스토리지에 값을 꺼낼수있다

위의 코드는 단순한 문자열을 저장하는 예시인데,

만약 저것보다 조금 더 복잡한 데이터를 저장하고 싶다면 어떻게 할까? (ex, 객체)

 

JSON을 이용하면 된다.

const user = {
  name: "messi",
  age: 36,
  team: ["barcelona", "psg"],
};
storeBtn.addEventListener("click", () => {
  localStorage.setItem("user", JSON.stringify(user));
});
retrieveBtn.addEventListener("click", () => {
  const extractedUser = JSON.parse(localStorage.getItem("user"));
  console.log(extractedUser);
});

• JSON.stringify(user)
  • 객체를 json 형태로 변환하여 로컬스토리지에 저장
• JSON.parse(localStorage.getItem("user")
  • json 형태로 저장되어있는 데이터를 꺼내와 다시 자바스크립트 코드로 바꿔준다.

 

세션스토리지는 로컬스토리지와 매우 비슷하지만,

결정적인 차이점이 존재한다.

 

• 세션스토리지는 페이지가 열려있는 동안만 데이터가 유지된다
  • 새로고침하여도 페이지가 닫힌것이 아니라면 유지된다, 하지만 페이지를 닫고 똑같은 url을 다른 페이지에서 접속하면 데이터가 사라진다

 

2. Cookies

 

• 특징
  • 단순한 키-값 저장소이다
    • 하지만, 다양한 방법으로 구성할 수 있다
  • 보통 기본 설정 , 세션 ID등을 관리한다
  • 저장 만료 기간을 지정할 수 있다.
  • 웹페이지가 실제 서버로 제공되는 경우에만 사용 가능하다.
  • 사용하기 까다롭다, 다만 활용도가 높고, HttpRequest가 헤더에 포함되어있어 서버에서도 읽을 수 있다,
  • 로컬스토리지와 마찬가지로 복잡한 데이터를 다루는 것은 힘들다

 

storeBtn.addEventListener("click", () => {
  const userId = "messi"
  const user = {
    name: "messi",
    age: 36,
    team: ["barcelona", "psg"],
  };
  document.cookie = `uid=${userId}; max-age=5`
  document.cookie = `user=${JSON.stringify(user)}`
});
retrieveBtn.addEventListener("click", () => {
  console.log(document.cookie);
  const cookieData = document.cookie.split(";");
  const data = cookieData.map((cookie) => {
    return cookie.trim();
  })
  console.log(data);
  
  console.log(data.includes("name").split("=")[1]);
 
});

• document.cookie = `uid=${userId}; max-age=5`
  • uid -> 키 / ${userId} -> 값 / max-age -> 쿠키 만료기간 설정 (max-age: 초 / expires: 날짜)
• console.log(document.cookie);
  • 저장된 모든 쿠키 데이터에 엑세스 한다
• document.cookie.split(";");
  • 쿠기는 로컬스토리지처럼 단일 저장값을 얻는 메서드가 없는 대신, 모든 문자열 메서드를 활용할수있다
• console.log(data.includes("name").split("=")[1]);
  • 쿠키는 만료 기간이 존재하고, 만료 기간이 지나면 삭제되기때문에 인덱스로 접근하기보다는 키값으로 접근하는 것이 바람직하다

 

3. indexedDB

 

• 특징
  • 클라이언트 데이터베이스이다. 쿼리 언어를 사용할 수 있다.
  • 보통 위의 두개에서 다루기 까다로운 복잡한 데이터를 관리한다
  • 사용하기 까다롭다, 다만 쿼리 언어를 지원하는만큼 복잡한 데이터를 다루는데 사용할수있다

 

let db;
const dbReq = indexedDB.open("Dummy", 1);

dbReq.onsuccess = (event) => {
  db = event.target.result;
};

dbReq.onupgradeneeded((event) => {
  db = event.target.result;
  const objStore = db.createObjectStore("products", { ketPath: "id" });
  objStore.transaction.oncomplete = (event) => {
    const productsStore = db.transaction("products", "readwrite").objectStore("products");
    productsStore.add({ id: "p1", title: "messi" });
  };
});
dbReq.onerror((event) => {
  return console.log("Error!");
});

storeBtn.addEventListener("click", () => {
  if (!db) {
    return;
  }
  const productsStore = db.transaction("products", "readwrite").objectStore("products");
  productsStore.add({ id: "p1", title: "messi" });
});
retrieveBtn.addEventListener("click", () => {
  const productsStore = db.transaction("products", "readwrite").objectStore("products");
  const req = productsStore.get("p2")
  req.onsuccess = () => {
    console.log(req.result);
  }
});

• const dbReq = indexedDB.open("Dummy", 1);
  • indexedDB를 사용하기 위해서는 DB를 만들거나, 기존의 DB에 연결해야한다
  • open()은 DB 생성 메서드이다.
    • open("DB이름", DB버전)
• dbReq.onupgradeneeded((event) => { db = event.target.result;
  • 만들어진 db에 접근한다
• const objStore = db.createObjectStore("products", { ketPath: "id" });
  • db에 객체 저장소를 생성할 수 있다
  • createObjectStore()는 객체 저장소 생성 메서드이다
    • createObjectStore("객체 저장소 이름", {ketPath: "식별자"})
• const productsStore = db.transaction("products", "readwrite").objectStore("products");
  • 객체 저장소 생성이 확인되면 데이터를 저장할 수 있게된다
  • transaction("객체 저장소 이름", "모드").objectStore("저장소 이름");

이렇게 복잡한 indexedDB 저장소를 쉽게 처리할수있게 도와주는 라이브러리가 존재한다 => idb.js