JavaScript를 사용하여 배열과 객체를 localStorage에 저장하는 방법은 무엇입니까?

Originally posted here!

브라우저의 localStorage API는 key:pair 형식의 정보 추가만 지원하며 key 및 pair는 string 유형이어야 하므로 기본 개체 또는 배열은 localStorage 에 저장할 수 없습니다.

JavaScript에서 localStorage API를 사용하여 배열이나 객체를 저장하려면 먼저 stringify 메서드를 사용하여 배열이나 객체를 저장해야 하고JSON.stringify() 값을 검색해야 할 때 JSON.parse() 메서드를 사용할 수 있습니다.

이 개체를 고려하십시오.

// an object
const John = {
  name: "John Doe",
  age: 23,
};

이 객체를 localStorage에 저장하려면 먼저 John 객체를 JSON 문자열로 변환해야 합니다. 이를 위해 JSON.stringify() 메서드를 사용하고 메서드에 대한 인수로 개체를 전달합니다.

이런식으로 할 수 있는데,

// an object
const John = {
  name: "John Doe",
  age: 23,
};

// convert object to JSON string
// using JSON.stringify()
const jsonObj = JSON.stringify(John);

이제 setItem()에 localStorage 메서드를 사용하고 키 이름을 메서드에 대한 첫 번째 인수로 전달하고 jsonObj를 메서드에 대한 두 번째 인수로 다음과 같이 전달합니다.

// an object
const John = {
  name: "John Doe",
  age: 23,
};

// convert object to JSON string
// using JSON.stringify()
const jsonObj = JSON.stringify(John);

// save to localStorage
localStorage.setItem("John", jsonObj);

이제 localStorage 에서 값을 검색하기 위해 getItem() API에서 localStorage 메서드를 사용한 다음 JSON.parse() 메서드를 사용하여 문자열을 유효한 객체로 변환할 수 있습니다.

이런식으로 할 수 있는데,

// an object
const John = {
  name: "John Doe",
  age: 23,
};

// convert object to JSON string
// using JSON.stringify()
const jsonObj = JSON.stringify(John);

// save to localStorage
localStorage.setItem("John", jsonObj);

// get the string
// from localStorage
const str = localStorage.getItem("John");

// convert string to valid object
const parsedObj = JSON.parse(str);

console.log(parsedObj);

엄청난! 🌟 localStorage API에서 성공적으로 저장 및 검색했습니다.

JSBin에 있는 이 예제를 참조하십시오.

프로세스는 어레이에서도 동일합니다.

배열을 사용하는 이 예를 참조하십시오.

// an array
const arr = [1, 2, 3, 4, 5];

// convert array to JSON string
// using JSON.stringify()
const jsonArr = JSON.stringify(arr);

// save to localStorage
localStorage.setItem("array", jsonArr);

// get the string
// from localStorage
const str = localStorage.getItem("array");

// convert string to valid object
const parsedArr = JSON.parse(str);

console.log(parsedArr);

JSBin에 있는 이 예제를 참조하십시오.

😃 유용하셨다면 공유해 주세요.