자바스크립트 "Web Storage API"

Web Storage API는 개발자가 사용자의 웹 브라우저에 키-값 쌍을 저장할 수 있는 브라우저 API입니다. Web Storage API에는 localStorage 및 sessionStorage라는 두 가지 유형의 스토리지 메커니즘이 있습니다.

​

localStorage

localStorage는 오랜 기간 동안 클라이언트 시스템에 키-값 쌍을 저장하는 데 사용됩니다. localStorage에 저장된 데이터는 브라우저를 닫았다가 다시 연 후에도 유지됩니다.

​

사용법

`localStorage` 객체는 브라우저의 `window` 객체를 통해 액세스할 수 있습니다. `setItem()` 메서드를 호출하고 키-값 쌍을 전달하여 localStorage에 값을 저장할 수 있습니다. 예를 들면 다음과 같습니다.

​

localStorage.setItem("name", "John");

​

이렇게 하면 "name" 키와 함께 localStorage에 문자열 "John"이 저장됩니다. "name"의 값을 검색하려면 `getItem()` 메서드를 호출하고 키를 전달할 수 있습니다.

​

let name = localStorage.getItem("name");

console.log(name); // Output: "John"

​

`removeItem()` 메서드를 호출하고 키를 전달하여 localStorage에서 항목을 제거할 수도 있습니다.

​

localStorage.removeItem("name");

​

이렇게 하면 localStorage에서 "이름" 키-값 쌍이 제거됩니다.

​

예

사용자 이름과 이메일 주소를 localStorage에 저장하고 싶다고 가정해 보겠습니다. 각 키-값 쌍에 대해 한 번씩 `setItem()` 메서드를 두 번 호출하여 이를 수행할 수 있습니다.

​

localStorage.setItem("name", "John Doe");

localStorage.setItem("email", "john.doe@example.com");

​

이러한 값을 검색하려면 각 키에 대해 `getItem()` 메서드를 호출하면 됩니다.

​

let name = localStorage.getItem("name");

let email = localStorage.getItem("email");

console.log(name); // Output: "John Doe"

console.log(email); // Output: "john.doe@example.com"

​

sessionStorage

sessionStorage는 localStorage와 유사하지만 sessionStorage에 저장된 데이터는 사용자 세션 기간 동안만 유지됩니다. 사용자가 브라우저를 닫으면 sessionStorage에 저장된 데이터가 삭제됩니다.

​

사용법

sessionStorage의 사용법은 localStorage와 유사합니다. `setItem()` 메서드를 호출하고 키-값 쌍을 전달하여 sessionStorage에 값을 저장할 수 있습니다.

​

sessionStorage.setItem("name", "Jane");

​

"name"의 값을 검색하려면 `getItem()` 메서드를 호출하고 키를 전달할 수 있습니다.

​

let name = sessionStorage.getItem("name");

console.log(name); // Output: "Jane"

​

`removeItem()` 메서드를 호출하고 키를 전달하여 sessionStorage에서 항목을 제거할 수도 있습니다.

​

sessionStorage.removeItem("name");

​

이렇게 하면 sessionStorage에서 "이름" 키-값 쌍이 제거됩니다.

​

예

sessionStorage에 사용자의 장바구니를 저장하고 싶다고 가정해 보겠습니다. 장바구니 데이터를 객체에 저장하고 `JSON.stringify()` 메서드를 사용하여 이를 sessionStorage에 저장하기 전에 문자열로 변환하면 됩니다.

​

let cart = {

items: [

{

id: 1,

name: "Widget",

price: 10.99,

quantity: 2

},

{

id: 2,

name: "Gadget",

price: 14.99,

quantity: 1

}

]

};

​

sessionStorage.setItem("cart", JSON.stringify(cart));