LocalStorage / SessionStorage
HTML5에서는 웹의 데이터를 브라우저 내에 키-값 쌍을 저장할 수 있게 해주는 LocalStorage와 SessionStorage를 제공한다.
localStorage
- 로컬에 도메인 별로 지속되는 storage
- localStorage는 시간제한이 없고 브라우저가 꺼져도 죽지 않는다.
- 도메인마다 별도로 로컬 스토로지가 생성된다.
- 값을 지우려면 직접 지워줘야한다.
sessionStorage
- localStorage와 사용 방법은 비슷하다
- session이 종료되면 값이 지워지는 차이가있다. (session은 tap단위)
web storage와 cookie의 차이
| webStorage | cookie | |
|---|---|---|
| 데이터 타입 | 자바스크립트 객체 | 문자열 |
| 제한 | 용량제한 | 용량제한, 시간제한, 갯수제한 존재 |
| 전송 | x(클라이언트 측에 저장) | 서버로 전송 |
- WebStorage와 쿠키의 차이점에 큰 차이가 없지만, 클라이언트에 데이터를 저장한다는 특징은 꽤나 유용하다.
사용방법
setItem(key, value) – 키-값 쌍을 보관합니다.
getItem(key) – 키에 해당하는 값을 받아옵니다.
removeItem(key) – 키와 해당 값을 삭제합니다.
clear() – 모든 것을 삭제합니다.
key(index) – 인덱스(index)에 해당하는 키를 받아옵니다.
length – 저장된 항목의 개수를 얻습니다.
// key,value 저장
localStorage.data = '123'; // 리터럴 방식
localStorage.setItem('data', 123); // 메소드 방식, 숫자를 넣어도 문자열로 인식
// value 불러오기
localStorage.data; // '123'
localStorage.getItem('data') // '123'
localStorage.length // 항목 갯수 반환
localStorage.getItem(); // 인자를 안주면, 전체 값 넘기기
localStorage.key(0); // 인덱스에 해당하는 key의 value값을 받음
// 삭제
localStorage.removeItem('data'); // localStorage 객체에서 원하는 값을 삭제
localStorage.clear(); // 저장된 모든 값을 삭제배열과 객체를 넘기는 방법
JSON.stringify, JSON.parse를 이용
localStorage.x = JSON.stringify({xx: "x"});
let x = JSON.parse( localStorage.x );
console.log(x); // { xx: 'x' }배열처럼 사용하기
web storage는 iterable 객체가 아니라 순회 불가능
for(let i=0; i<localStorage.length; i++) {
let key = localStorage.key(i);
console.log(`${key}: ${localStorage.getItem(key)}`);
}