Web Storage API

Web Storage API는 브라우저에서 데이터를 저장하고 검색하는 간단한 문법입니다. 사용하기 매우 쉽습니다：

인스턴스

localStorage.setItem("name", "Bill Gates");
localStorage.getItem("name");

직접 시도해보세요

모든 브라우저는 Web Storage API를 지원합니다：

크롬 IE 파이어폭스 사파리 오페라
크롬 IE/엣지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원

localStorage 객체

localStorage 객체는 특정 웹사이트의 로컬 스토리지에 대한 접근을 제공합니다. 이는 데이터를 저장, 읽기, 추가, 수정 및 제거할 수 있게 합니다。

저장된 데이터에는 만료 일자가 없으며, 브라우저가 닫히면 지워지지 않습니다。

이 데이터는 몇 일, 몇 주, 몇 년 동안 사용할 수 있습니다。

setItem() 메서드

localStorage.setItem() 메서드는 데이터 항목을 storage에 저장합니다。

이는 이름과 값을 매개변수로 받아들입니다：

인스턴스

localStorage.setItem("name", "Bill Gates");

getItem() 메서드

localStorage.getItem() 메서드는 저장소(스토리지)에서 데이터 항목을 검색합니다。

이는 이름을 매개변수로 받아들입니다：

인스턴스

localStorage.getItem("name");

sessionStorage 객체

sessionStorage 객체는 localStorage 객체와 동일합니다。

차이점은 sessionStorage 객체가 세션 데이터를 저장한다는 것입니다。

브라우저가 닫힐 때, 데이터가 지워집니다。

인스턴스

sessionStorage.getItem("name");

직접 시도해보세요

setItem() 메서드

sessionStorage.setItem() 메서드는 데이터 항목을 저장소(스토리지)에 저장합니다。

이는 이름과 값을 매개변수로 받아들입니다：

인스턴스

sessionStorage.setItem("name", "Bill Gates");

getItem() 메서드

sessionStorage.getItem() 메서드는 저장소(스토리지)에서 데이터 항목을 검색합니다。

이는 이름을 매개변수로 받아들입니다：

인스턴스

sessionStorage.getItem("name");

Storage 객체 속성 및 메서드

속성/메서드 설명
key(n) 저장소에서 n번째 키의 이름을 반환합니다。
length Storage 객체에 저장된 데이터 항목 수를 반환합니다.
getItem(keyname) 지정된 키이름의 값을 반환합니다.
setItem(keyname, value) 키를 저장소에 추가하거나, 키가 이미 존재하면 해당 키의 값을 업데이트합니다.
removeItem(keyname) 저장소에서 해당 키를 제거합니다.
clear() 모든 키를 비웁니다.

Web Storage API 관련 페이지

속성 설명
window.localStorage Web 브라우저에서 키/값 쌍을 저장할 수 있습니다. 만료일이 없는 데이터를 저장합니다.
window.sessionStorage Web 브라우저에서 키/값 쌍을 저장할 수 있습니다. 세션 데이터를 저장합니다.