我想在HTML5 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 Web存储规范的误解，而不是浏览器特定的错误或限制。
我已经试图理解2公共基础设施中描述的结构化克隆算法。我不完全理解它的意思，但也许我的问题与对象的财产不可枚举有关（？？？）。
有简单的解决方法吗？
更新：W3C最终改变了对结构化克隆规范的想法，并决定更改规范以匹配实现。请参阅12111–存储对象getItem（key）方法的规范与实现行为不匹配。因此，这个问题不再100%有效，但答案可能仍然令人感兴趣。
我在读到另一篇文章后发表了这篇文章，这篇文章的标题是“如何在本地存储中存储数组？”。这很好，除了两个线程都没有提供关于如何在localStorage中维护数组的完整答案之外，不过我已经根据两个线程中包含的信息制定了一个解决方案。
因此，如果其他人希望能够在数组中推送/弹出/移动项目，并且他们希望将该数组存储在localStorage或sessionStorage中，那么可以这样做：
Storage.prototype.getArray = function(arrayName) {
var thisArray = [];
var fetchArrayObject = this.getItem(arrayName);
if (typeof fetchArrayObject !== 'undefined') {
if (fetchArrayObject !== null) { thisArray = JSON.parse(fetchArrayObject); }
}
return thisArray;
}
Storage.prototype.pushArrayItem = function(arrayName,arrayItem) {
var existingArray = this.getArray(arrayName);
existingArray.push(arrayItem);
this.setItem(arrayName,JSON.stringify(existingArray));
}
Storage.prototype.popArrayItem = function(arrayName) {
var arrayItem = {};
var existingArray = this.getArray(arrayName);
if (existingArray.length > 0) {
arrayItem = existingArray.pop();
this.setItem(arrayName,JSON.stringify(existingArray));
}
return arrayItem;
}
Storage.prototype.shiftArrayItem = function(arrayName) {
var arrayItem = {};
var existingArray = this.getArray(arrayName);
if (existingArray.length > 0) {
arrayItem = existingArray.shift();
this.setItem(arrayName,JSON.stringify(existingArray));
}
return arrayItem;
}
Storage.prototype.unshiftArrayItem = function(arrayName,arrayItem) {
var existingArray = this.getArray(arrayName);
existingArray.unshift(arrayItem);
this.setItem(arrayName,JSON.stringify(existingArray));
}
Storage.prototype.deleteArray = function(arrayName) {
this.removeItem(arrayName);
}
示例用法-在localStorage数组中存储简单字符串：
localStorage.pushArrayItem('myArray','item one');
localStorage.pushArrayItem('myArray','item two');
示例用法-在sessionStorage阵列中存储对象：
var item1 = {}; item1.name = 'fred'; item1.age = 48;
sessionStorage.pushArrayItem('myArray',item1);
var item2 = {}; item2.name = 'dave'; item2.age = 22;
sessionStorage.pushArrayItem('myArray',item2);
处理数组的常用方法：
.pushArrayItem(arrayName,arrayItem); -> adds an element onto end of named array
.unshiftArrayItem(arrayName,arrayItem); -> adds an element onto front of named array
.popArrayItem(arrayName); -> removes & returns last array element
.shiftArrayItem(arrayName); -> removes & returns first array element
.getArray(arrayName); -> returns entire array
.deleteArray(arrayName); -> removes entire array from storage
我做了一个东西，它不破坏现有的存储对象，而是创建一个包装器，这样您就可以随心所欲了。结果是一个普通的对象，没有方法，可以像任何对象一样访问。
我做的东西。
如果您希望1个localStorage属性具有魔力：
var prop = ObjectStorage(localStorage, 'prop');
如果您需要几个：
var storage = ObjectStorage(localStorage, ['prop', 'more', 'props']);
您所做的一切都将被保存，或者存储中的对象将自动保存到localStorage中。你总是在玩一个真实的物体，所以你可以这样做：
storage.data.list.push('more data');
storage.another.list.splice(1, 2, {another: 'object'});
被跟踪对象中的每个新对象都将被自动跟踪。
最大的缺点是：它依赖于Object.oobserve（），因此它的浏览器支持非常有限。而且它看起来不会很快出现在Firefox或Edge上。
