[Javascript] localStorage

[WebStorage API : LocalStorage]

- 사용자 로컬에 데이터를 보존

- javascript로 조작 가능

- 모바일에서도 사용 가능

 

[Cookie와의 차이점]

- 영구적 이용 가능

- 5MB까지 사용 가능

- 언제든지 사용 가능 (쿠키는 서버 접속시 사용가능)

 

[기본 구성]

- key+value

- 도메인과 브라우저 별로 저장

- 값은 문자열로 저장

 

[data 추가 방법 3가지]

//localStorage 데이터 추가 방법 3가지
localStorage.Test = "Sample";
localStorage["Test"] = "Sample";
localStorage.setItem("Test", "Sample");

[data 가져오는 방법 3가지]

//LocalStorage 데이터 취득 방법 3가지
var val = localStorage.Test;
var val = localStorage["Test"];
var val = localStorage.getItem("Test");

//취득 데이터 출력
document.querySelector('#result').innerHTML = val;

 

[특정 데이터 삭제 방법]

localStorage.removeItem("Test");

 

[데이터 전체 삭제]

localStorage.clear();

 

[localStorage vs sessionStorage]

localStrorage: 세션이 끊겨도 사용 가능

sessionStorage: 같은 세션만 사용 가능

[SessionStorage]
- sessionStorage.setItem("key", value); : 세션 저장
- sessionStorage.getItem("key"); : 특정 세션 값 불러오기
- sessionStorage.removeItem("key"); : 특정 세션 삭제
- sessionStorage.clear(); : 세션 전체 삭제