[CS study] 로컬스토리지 && 세션스토리지

로컬스토리지와 세션스토리지의 개념

 

1. 로컬스토리지와 세션스토리지의 공통점

• 데이터를 클라이언트에 저장 할 수 있다 
• JS API의 형태가 완전히 동일하다 (하나의 사용법만 익혀도 둘 다 사용이 가능하다)

 

2. 로컬스토리지와 세션스토리지의 차이점

• 로컬스토리지는 웹페이지를 종료하더라도 데이터가 날아가지 않는다 반면 세션스토리지는 세션이 종료하게 되면 데이터가 사라진다 (창을 닫았을 때 세션이 종료됨으로 보자) 
• 로컬스토리지는 데이터를 모든 세션이 공유하는 반면 세션스토리지는 각 세션마다 데이터를 저장하고 공유하지 않는다

 

3. 로그인페이지를 만들 때 사용가능하겠다

   - 로컬스토리지와 세션스토리지는 서버에 들어가지 않아도 되는 중요하지 않은 데이터를 저장하는데 사용이 되는데 클라이언트에 직접 저장이 되기 때문에 이러한 특성을 가지고 token을 저장하는 곳으로 사용해도 좋은 공간이다. (로컬스토리지의 특성 상 웹페이지를 종료하더라도 사라지지 않는다)

 

---

 

사용방법

 

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

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

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

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

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

 

실제 사용 모습

> localStorage.getItem('name')
null
> localStorage.getItem('email')
null
> localStorage.setItem('email', 'test@user.com')
undefined
> localStorage.getItem('email')
"test@user.com"
> localStorage.setItem('email', 'test@admin.com')
undefined
> localStorage.getItem('email')
"test@admin.com"
> localStorage.removeItem('email')
undefined
> localStorage.getItem('email')
null

 

 

---

주의사항

 

1. 오직 문자형데이터타입만을 지원한다.

  객체를 집어넣어도  "[object Object]" 형태로 저장이 되기 때문에 객체를 전달하려면 아래와 같이 해야 한다.

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

JSON형태로 데이터를 읽고 쓰는 방법이다 넣을 때엔 직렬화를 하고 꺼낼 떄에는 역직렬화 해준다.

 

2. 직접 청소를 해주어야 한다.

  웹페이지를 닫아도 사라지는 것이 아니기 때문에 데이터가 남지 않도록 직접 없애주어야 한다.

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

 

 

f12누르고 Application에서 로컬스토리지에 저장된 데이터를 확인할 수 있다.