[Javascript] LocalStorage는 데이터를 string으로 저장한다.

개요

• LocalStorage를 이용해서 Object값과 Boolean 값을 저장해야 하는 상황이 있었다.
• 각각의 값들을 그대로 setItem으로 저장하고 getItem으로 불러와 사용했더니, 타입 에러가 발생했다.
• 데이터의 타입 로그를 찍어보니 모두 string으로 나왔다.
• 원하는 결과가 아니다. 데이터 원본 타입 그대로 저장하고 그대로 가져오고 싶다!

 

1. Object

🔒 문제

window.localStorage.setItem("chat", chatObj); //객체 저장
const chat = window.localStorage.getItem("chat");

Object를 저장했는데 로컬스토리지를 거치고 나니까 String이 되어버림.

console.log(typeof chatObj); //Object
console.log(typeof chat); //string

🔑 해결

• JSON형태로 바꿔서 저장하고 → JSON.stringify();
• JSON 형태로 바꿔서 가져온다 → JSON.parse();

window.localStorage.setItem("chat", JSON.stringify(chatObj));
const chat = JSON.parse(window.localStorage.getItem("chat"));

 

2. Boolean

🔒 문제

window.localStorage.setItem("isOpenChannel", isOpenChannelBoolean); //Boolean 저장
const isOpenChannel = window.localStorage.getItem("isOpenChannel");

Boolean을 저장했는데 로컬스토리지를 거치고 나니까 String이 되어버림.

console.log(typeof isOpenChannelBoolean); //Boolean
console.log(typeof isOpenChannel); //string

🔑 해결

• 저장은 그대로 한다.
• 값을 Boolean 형태로 반환하도록 한다 → getItem("stringData") === "true"

window.localStorage.setItem("isOpenChannel", isOpenChannel);
const isOpenChannel = window.localStorage.getItem("isOpenChannel") === "true";