localStorage에 객체를 추가하는 방법은 무엇입니까?

이 노트에서는 localStorage에 객체를 삽입하는 방법을 보여드리겠습니다.

경우에 따라 로컬 스토리지 또는 세션 스토리지에 데이터를 개체로 저장해야 할 수 있습니다. 어떻게 이것을 달성할 수 있습니까?

객체가 있고 이 객체가 일부 토큰을 저장한다고 가정합니다.

const tokens = {
token: "meowmeow",
anotherToken: "woofwoof"
}

localStorage에 쓰기

localStorage 항목을 설정하려면 localStorage.setItem( ) 메서드를 사용해야 합니다. 이 메서드는 key 및 value 의 두 매개변수를 사용합니다. key는 로컬 저장소 항목의 이름이며 값은 기본적으로 해당 값입니다.

localStorage 또는 세션 저장소에 개체를 직접 저장할 수 없습니다. 따라서 JSON 문자열로 변환해야 합니다. 이를 위해 JSON.stringify(value) 라는 매우 편리한 방법이 있습니다. value 매개변수는 JSON 문자열로 변환하려는 객체가 됩니다. 이 예에서 값은 토큰입니다.

JSON.stringify(tokens)

개체를 JSON 문자열로 변환하는 방법을 배웠습니다. 이제 이 JSON 문자열을 localStorage에 추가해 보겠습니다.

const tokens = {
token: "meowmeow",
anotherToken: "woofwoof"
}

localStorage.setItem("tokens", JSON.stringify(tokens))

로컬 저장소를 확인하면 개체가 성공적으로 추가된 것을 확인할 수 있습니다.

localStorage에서 읽기

localStorage에서 객체를 읽기 위해 JSON.parse( ) 라는 또 다른 편리한 메서드가 있습니다. 이 방법은 JSON 문자열을 JavaScript 객체로 변환하는 데 도움이 됩니다. 그러나 먼저 로컬 저장소에서 개체를 가져와야 합니다.

const localStorageItem = localStorage.getItem("tokens")
const tokenObject  = JSON.parse(localStorageItem)


console.log(tokenObject)

/*
{
token: "meowmeow",
anotherToken: "woofwoof"
}
*/