HTML5 localStorage에 객체 저장

질문 : HTML5 localStorage에 객체 저장

---

localStorage JavaScript 개체를 저장하고 싶지만 내 개체가 분명히 문자열로 변환되고 있습니다.

localStorage 사용하여 기본 JavaScript 유형 및 배열을 저장하고 검색 할 수 있지만 객체가 작동하지 않는 것 같습니다. 그럴까요?

내 코드는 다음과 같습니다.

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
console.log('typeof testObject: ' + typeof testObject);
console.log('testObject properties:');
for (var prop in testObject) {
    console.log('  ' + prop + ': ' + testObject[prop]);
}

// Put the object into storage
localStorage.setItem('testObject', testObject);

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ' + retrievedObject);

콘솔 출력은 다음과 같습니다.

typeof testObject: object
testObject properties:
  one: 1
  two: 2
  three: 3
typeof retrievedObject: string
Value of retrievedObject: [object Object]

setItem 메서드가 입력을 저장하기 전에 문자열로 변환하는 것처럼 보입니다.

Safari, Chrome 및 Firefox에서이 동작을 볼 수 있으므로 브라우저 별 버그 나 제한이 아니라 HTML5 웹 저장소 사양에 대한 오해라고 가정합니다.

http://www.w3.org/TR/html5/infrastructure.html에 설명 된 구조화 된 복제 알고리즘을 이해하려고 노력했습니다. 나는 그것이 말하는 것을 완전히 이해하지 못하지만 아마도 내 문제는 내 개체의 속성이 열거 가능하지 않은 것과 관련이 있습니다 (???)

쉬운 해결 방법이 있습니까?

업데이트 : W3C는 결국 구조화 된 클론 사양에 대한 마음을 바꾸고 구현에 맞게 사양을 변경하기로 결정했습니다. https://www.w3.org/Bugs/Public/show_bug.cgi?id=12111을 참조하십시오. 따라서이 질문은 더 이상 100 % 유효하지 않지만 답변은 여전히 흥미로울 수 있습니다.

답변

---

Apple , Mozilla 및 Mozilla 문서를 다시 살펴보면 기능이 문자열 키 / 값 쌍만 처리하도록 제한되어있는 것 같습니다.

해결 방법은 객체를 저장하기 전에 문자열 화 한 다음 나중에 검색 할 때 구문 분석하는 것입니다.

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject));

출처 : https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage