Storage(localStorage, sessionStorage, cookie)

tapata·2022년 2월 24일
0

JavaScript - Web APIs

목록 보기
4/5

브라우저의 Storage

  • key-value 쌍으로 데이터를 저장
  • Local Storage : 도메인마다 존재, 브라우저 종료후에도 남아있음
  • Session Storage : 브라우저 종료시 사라짐

localStorage

  • window.localStroage
  • 객체를 저장하는 경우 문자열로 변환해서 저장
// 입력
localStorage.setItem("key", value)

// 조회
localStorage.getItem("key")

// 삭제
localStorage.removeItem("key")

// 전부 삭제
localStorage.clear()

// 저장된 키/값 쌍의 개수
localStorage.length

// 객체 저장
localStorage.setItem("key", JSON.stringify(obj))

// 객체 불러오기
const obj_from = JSON.parse(localStorage.getItem("key"))

sessionStore

  • localStore 와 메서드는 동일, 브라우저 종료시 사라짐
// Set a value in session storage
sessionStorage.setItem("key", "value");

// Retrieve a value from session storage
let value = sessionStorage.getItem("key");

// Remove a value from session storage
sessionStorage.removeItem("key");
  • 서버가 Set-Cookie 응답헤더에 "키=값"의 내용을 전달하면 브라우저에 저장
  • session cookie : expires나 max-age 옵션이 없는 쿠키, 브라우저 종료시 사라짐
  • persistence cookie : expires나 max-age 옵션이 존재하는 쿠키, 유효 일자 까지는 쿠키를 유지

// Retrieve all cookies
let cookies = document.cookie;

// key1=val1; key2=val2;
document.cookie

// key1=val3; key2=val3; ,  key가 일치하는 값만 수정
document.cookie="key1=val3"

// Set a cookie
document.cookie = "name=value; expires=date; path=path";

// Remove a cookie
document.cookie = "name=; expires=date; path=path";

indexedDB

// Open a database
let request = indexedDB.open("databaseName", version);

// Handle the database opening event
request.onsuccess = function(event) {
  let db = event.target.result;
  
  // Add data to the database
  let transaction = db.transaction("objectStoreName", "readwrite");
  let objectStore = transaction.objectStore("objectStoreName");
  objectStore.add({key: "value"});

  // Retrieve data from the database
  let getRequest = objectStore.get("key");
  getRequest.onsuccess = function(event) {
    let value = event.target.result;
    console.log(value);
  }

  // Remove data from the database
  let deleteRequest = objectStore.delete("key");
  deleteRequest.onsuccess = function(event) {
    console.log("Data deleted.");
  }
}
profile
hello

0개의 댓글