자바스크립트 "Storage API"

Storage API는 웹 개발자가 사용자의 웹 브라우저에 키-값 쌍을 저장할 수 있도록 하는 JavaScript API입니다. 이 데이터는 사용자 컴퓨터에 로컬로 저장되며 이후 방문 시 웹 애플리케이션에서 액세스할 수 있습니다. Storage API는 개발자가 데이터를 저장하는 데 사용할 수 있는 localStorage 및 sessionStorage라는 두 개체를 제공합니다.

​

localStorage: 이 개체는 만료 날짜 없이 데이터를 저장하는 데 사용됩니다. localStorage에 저장된 데이터는 사용자가 웹 브라우저를 닫은 후에도 지속됩니다.

​

sessionStorage: 이 개체는 현재 세션에 대한 데이터만 저장하는 데 사용됩니다. sessionStorage에 저장된 데이터는 사용자가 웹 브라우저를 닫으면 삭제됩니다.

​

다음은 Storage API를 사용하는 방법에 대한 몇 가지 예입니다.

​

1. localStorage에 데이터 저장:

​

localStorage.setItem('username', 'John');

​

이 예제에서는 localStorage 개체에 "username" 키와 함께 "John" 값을 저장합니다.

​

2. localStorage에서 데이터 검색:

​

const username = localStorage.getItem('username');

console.log(username); // Output: John

​

이 예제에서는 localStorage에서 "username" 키와 연결된 값을 검색하고 "username" 변수에 저장합니다.

​

3. localStorage에서 데이터 제거:

​

localStorage.removeItem('username');

​

이 예에서는 localStorage에서 "username" 키와 연결된 값을 제거합니다.

​

4. sessionStorage에 데이터 저장:

​

sessionStorage.setItem('theme', 'dark');

​

이 예제에서는 sessionStorage 객체에 "theme" 키와 함께 "dark" 값을 저장하고 있습니다.

​

5. sessionStorage에서 데이터 검색:

​

const theme = sessionStorage.getItem('theme');

console.log(theme); // Output: dark

​

이 예제에서는 sessionStorage에서 "theme" 키와 관련된 값을 검색하고 변수 "theme"에 저장합니다.

​

6. sessionStorage에서 데이터 제거:

​

sessionStorage.removeItem('theme');

​

이 예에서는 sessionStorage에서 "theme" 키와 연결된 값을 제거합니다.

​

Storage API는 데이터를 문자열로 저장하는 것만 지원한다는 점은 주목할 가치가 있습니다. 객체를 저장하려면 저장하기 전에 JSON.stringify()를 사용하여 문자열로 변환한 다음 검색할 때 JSON.parse()를 사용하여 다시 객체로 변환해야 합니다. 예를 들어:

​

const user = {

name: 'John',

age: 30,

};

​

localStorage.setItem('user', JSON.stringify(user));

​

const storedUser = JSON.parse(localStorage.getItem('user'));

​

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