웹 저장소 API - LocalStorage 및 SessionStorage

웹 저장소 API

다음 몇 개의 기사에 걸쳐 제어하는 ​​데이터베이스가 아니라 사용자 브라우저 내부에 애플리케이션 데이터를 저장할 수 있는 Web Storage API에 대해 작성하겠습니다. 주요 세 가지 옵션은 다음과 같습니다.

LocalStorage/SessionStorage

IndexedDB

Web SQL

LocalStorage 및 SessionStorage

동기식 키/값 저장소입니다. Web Storage API를 사용하면 원하는 키 아래에 문자열을 저장할 수 있습니다. LocalStorage에 영구적으로 저장하거나 사용자가 SessionStorage로 브라우저를 닫을 때까지 저장할 수 있습니다.

일반적인 패턴 중 하나는 JSON 문자열을 저장하여 하나의 키 아래에 많은 데이터를 저장하는 것입니다. 아래 예에서는 일부 기본 사이트 설정을 localStorage에 저장합니다.

// object that represents site settings
const settings = {
  mode: "dark",
  primaryColor: "black",
  secondaryColor: "white"
}

// turn the object into a JSON string
const settingsAsJSON = JSON.stringify(settings)

// save the string into localStorage
window.localStorage.setItem("settings", settingsAsJSON)

페이지가 로드될 때 이러한 설정이 존재하는 경우 로드하려면 다음과 같이 할 수 있습니다.

// default settings
let settings = {
  mode: "light",
  primaryColor: "white",
  secondaryColor: "black"
}

// retrieve the string from localStorage
const loadedJSONSettings = window.localStorage.getItem("settings)

// check if there actually was any data, if so, parse the json
if (loadedJSONSettings){
  // since there is data, parse the JSON
  settings = JSON.parse(loadedJSONSettings)
  // below any code to update the dom based on these settings
  // ...
}

나중에 데이터를 지우려면 다음과 같이 간단합니다.

window.localStorage.removeItem("settings")

사용자가 브라우저를 닫을 때까지만 데이터를 저장하려면 localStorage를 sessionStorage로 바꾸면 됩니다. 명심해야 할 몇 가지 사항.

브라우저에서 개발 도구의 application 섹션으로 이동하여 미립자 페이지에 대해 저장된 내용을 볼 수 있습니다.

웹 저장소는 동기식이므로 대용량 데이터 및 작업에 웹 저장소를 사용하면 기본 스레드가 차단될 수 있습니다(코드가 느려짐).

다음번

다음 시간에는 브라우저에서 비동기 문서 저장소를 제공하는 IndexedDB를 살펴보겠습니다.