Window localStorage 속성

정의와 사용법

localStorage와 sessionStorage 속성은 웹 브라우저에서 키/값 쌍을 저장할 수 있습니다.

localStorage 객체는 만료 일자가 없는 데이터를 저장합니다. 브라우저를 닫으면 데이터가 지워지지 않으며, 다음날, 주 또는 1년 후에 사용할 수 있습니다.

localStorage 속성은 읽기 전용입니다.

안내:자세히 보기 sessionStorage 속성이 속성은 세션 데이터를 저장합니다(브라우저 탭을 닫으면 데이터가 손실됩니다)。

예제

예제 1

name="lastname"와 value="Smith"의 localStorage 이름/값 쌍을 생성하고, "lastname"의 값을 검색하여 id="result" 요소에 삽입합니다:

// 저장
localStorage.setItem("lastname", "Smith");
// 가져오기
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

직접 시험해 보세요

예제 2

다음 예제는 사용자가 버튼을 클릭한 횟수를 계산합니다:

if (localStorage.clickcount) {
  localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
  localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " 번 클릭됨.";

직접 시험해 보세요

문법

window.localStorage

localStorage에 데이터를 저장하는 문법:

localStorage.setItem("key", "value");

localStorage에서 데이터를 읽는 문법:

var lastname = localStorage.getItem("key");

localStorage에서 데이터를 제거하는 문법:

localStorage.removeItem("key");

기술 세부 사항

반환 값: Storage 객체

브라우저 지원

표에 나타난 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

속성 Chrome IE Firefox Safari Opera
localStorage 4.0 8.0 3.5 4.0 11.5