---

WebStorage

WebStorage

로컬 스토리지, 세션 스토리지

1. 로컬 스토리지 : 브라우저 창이 닫힌 후에도 유지되는 만료 날짜가 없는 데이터
2. 세션 스토리지 : 브라우저 창이 닫힌 후 지워지는 데이터

• 사용자 기본 성정이나 장바구니 담기, 로그인 사용자 기억 등과 같은 데이터를 저장할 때 사용
• 해당 유형의 임시 데이터를 기억하기 위한 유일한 방법은 쿠키이다.

localStorage

// 키에 데이터 쓰기
localStorage.setItem("key", value);

// 키로 부터 데이터 읽기
localStorage.getItem("key");

// 키의 데이터 삭제
localStorage.removeItem("key");

// 모든 키의 데이터 삭제
localStorage.clear();

// 저장된 키/값 쌍의 개수
localStorage.length;

localStorage의 사용

• 1. 오직 문자형(string)데이터 타입만 지원한다. 숫자는 지원하지 않는다.

> localStorage.setItem('num', 1)
undefined
> localStorage.getItem('num') === 1
false
> localStorage.getItem('num')
"1"
> typeof localStorage.getItem('num')
"string"

• 2. String만의 사용을 용이하게 하기 위해서 JSON형태로 데이터를 읽고 쓴다.

1. stringify : js의 데이터를 JSON형식으로 변경

localStorage.setItem('json', JSON.stringify({a: 1, b: 2}))
undefined
> JSON.parse(localStorage.getItem('json'))
{a: 1, b: 2}

2. parse JSON형식의 데이터를 js 객체로 변한

> localStorage.setItem('nums', JSON.stringify([1, 2, 3]))
undefined
> JSON.parse(localStorage.getItem('nums'))
[1, 2, 3]

localStorage 청소 - clear

> localStorage.length
5
> localStorage.key(0)
"email"
> localStorage.removeItem('obj')
undefined
> localStorage.length
4
> localStorage.clear()
undefined
> localStorage.length
0

---