HTML5 로컬 스토리지

1 개요

HTML5 Local Storage, HTML Local Storage Objects
HTML5 로컬 스토리지, 로컬 저장소

사용자 웹브라우저 측에 있는 저장소
쿠키와 달리 용량이 상당히 큼
쿠키와 달리 매번 서버로 보내지지 않아 경제적
도메인마다 저장소 격리됨

한 도메인 내에서는^[1] 같은 데이터 접근 가능

2 종류

스토리지	설명
localStorage	만료되지 않음
sessionStorage	하나의 세션에 대한 자료 저장. 탭을 닫으면 데이터 사라짐

3 저장

JavaScript

Copy

localStorage.setItem("lastname", "Smith");

JavaScript

Copy

localStorage.lastname = "Smith";

4 인출

JavaScript

Copy

console.log( localStorage.getItem("lastname") );

JavaScript

Copy

console.log( localStorage.lastname );

없는 경우

JavaScript

Copy

console.log( localStorage.getItem("not_exist") );
// null
console.log( localStorage.not_exist);
// undefined

카운트 예시

JavaScript

Copy

if ( localStorage.mycount == undefined ) localStorage.mycount = 0;
localStorage.mycount++;
console.log( localStorage.mycount );
// 1 (새로고침할 때마다 1씩 증가)

5 삭제

JavaScript

Copy

localStorage.removeItem("lastname");

6 같이 보기

7 주석

↑ 다른 페이지이더라도

8 참고

[1] 다른 페이지이더라도

[1]