HTML5 로컬 스토리지

1 개요

HTML5 Local Storage, HTML Local Storage Objects

HTML5 로컬 스토리지, 로컬 저장소

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

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

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 같이 보기

• HTML5 로컬스토리지 딕셔너리 저장
• HTTP 쿠키
• 세션

8 참고

• http://www.w3schools.com/html/html5_webstorage.asp
• https://en.wikipedia.org/wiki/Web_storage#Local_and_session_storage