알고가자 로컬 스토리지(localStorage), 중요한 특징

1. 웹 스토리지란?

웹 스토리지란 서버를 따로 사용하지 않고 브라우저(크롬, 사파리.. 등등)를 통해 데이터를 저장하는 기술을 말한다.

 

이 웹 스토리지 공간을 두 개의 스토리지로 나눌 수 있다.

 

로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)가 존재한다.

 

개발자 도구를 통해 확인가능한 웹 스토리지

 

그리고 이러한 스토리지들은 모두 key - value 쌍으로 저장된다.

---

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

이름에서 알 수 있다!

 

로컬 스토리지는 세션이 종료되도 데이터가 유지되는 반면에

 

세션 스토리지는 세션이 종료되면 데이터도 사라진다.

---

3. 웹 스토리지 메소드

대게 사용하는 웹 스토리지의 메소드는 다음과 같다.

 

• setItem("key", "value") - 스토리지에 저장하기
• getItem("key") - key값을 통해 해당 value가져오기
• removeItem("key") - 해당 key 삭제하기
• clear() - 스토리지 비우기
• key(index) - 인덱스에 해당하는 key 받아오기

 

다음과 같은 형태로 사용할 수 있다.

//로컬 스토리지에 저장
localStorage.setItem("key", "value");
//세션 스토리지에 저장
sessionStorage.setItem("key", "value");

---

4. 중요한 특징

중요한건 웹 스토리지는 문자열(String)형태만 지원한다는 것이다.

 

value를 숫자형태로 setItem했지만, 저장 될 때에는 문자열로 저장이 된다.

 

 

이 때문에 객체를 저장할 때 나타나는 문제가 있다.

 

 

[Object Object] 형태는 객체를 문자열로 반환할때는 필연적으로 마주치는 결과다.

 

하필 이런 형태로 나오는지는 다음에 자세히 알아보겠다.

---

4.1 해결법

이러란 문제는 JSON메소드를 이용해 해결할 수 있다.

• JSON.stringify(Ojbect)
• JSON.parse(JSON)

 

 

저장되기 전에 미리 JSON형태로 바꿔 저장한 뒤, 가져올때는 다시 Object형태로 변환해서 가져오는 방법이다.