我想在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%有效，但答案可能仍然令人感兴趣。
我做了另一个只有20行代码的极简包装器，这样就可以使用它了：
localStorage.set('myKey',{a:[1,2,5], b: 'ok'});
localStorage.has('myKey'); // --> true
localStorage.get('myKey'); // --> {a:[1,2,5], b: 'ok'}
localStorage.keys(); // --> ['myKey']
localStorage.remove('myKey');
https://github.com/zevero/simpleWebstorage
我做了另一个只有20行代码的极简包装器，这样就可以使用它了：
localStorage.set('myKey',{a:[1,2,5], b: 'ok'});
localStorage.has('myKey'); // --> true
localStorage.get('myKey'); // --> {a:[1,2,5], b: 'ok'}
localStorage.keys(); // --> ['myKey']
localStorage.remove('myKey');
https://github.com/zevero/simpleWebstorage
下面是danott发布的代码的一些扩展版本：
它还将实现本地存储中的删除值，并显示如何添加Getter和Setter层，
localstorage.setItem（预览，true）
你可以写
config.preview=真
好了，我们来了：
var PT=Storage.prototype
if (typeof PT._setItem >='u')
PT._setItem = PT.setItem;
PT.setItem = function(key, value)
{
if (typeof value >='u') //..undefined
this.removeItem(key)
else
this._setItem(key, JSON.stringify(value));
}
if (typeof PT._getItem >='u')
PT._getItem = PT.getItem;
PT.getItem = function(key)
{
var ItemData = this._getItem(key)
try
{
return JSON.parse(ItemData);
}
catch(e)
{
return ItemData;
}
}
// Aliases for localStorage.set/getItem
get = localStorage.getItem.bind(localStorage)
set = localStorage.setItem.bind(localStorage)
// Create ConfigWrapperObject
var config = {}
// Helper to create getter & setter
function configCreate(PropToAdd){
Object.defineProperty( config, PropToAdd, {
get: function () { return (get(PropToAdd) )},
set: function (val) { set(PropToAdd, val)}
})
}
//------------------------------
// Usage Part
// Create properties
configCreate('preview')
configCreate('notification')
//...
// Configuration Data transfer
// Set
config.preview = true
// Get
config.preview
// Delete
config.preview = undefined
嗯，你可以用.bind（…）去掉别名部分。不过，我只是把它放进去，因为知道这一点真的很好。我花了几个小时才弄明白为什么一个简单的get=localStorage.getItem；不工作。
Stringify并不能解决所有问题
这里的答案似乎并没有涵盖JavaScript中可能的所有类型，因此这里有一些关于如何正确处理它们的简短示例：
// Objects and Arrays:
var obj = {key: "value"};
localStorage.object = JSON.stringify(obj); // Will ignore private members
obj = JSON.parse(localStorage.object);
// Boolean:
var bool = false;
localStorage.bool = bool;
bool = (localStorage.bool === "true");
// Numbers:
var num = 42;
localStorage.num = num;
num = +localStorage.num; // Short for "num = parseFloat(localStorage.num);"
// Dates:
var date = Date.now();
localStorage.date = date;
date = new Date(parseInt(localStorage.date));
// Regular expressions:
var regex = /^No\.[\d]*$/i; // Usage example: "No.42".match(regex);
localStorage.regex = regex;
var components = localStorage.regex.match("^/(.*)/([a-z]*)$");
regex = new RegExp(components[1], components[2]);
// Functions (not recommended):
function func() {}
localStorage.func = func;
eval(localStorage.func); // Recreates the function with the name "func"
我不建议存储函数，因为eval（）是邪恶的，会导致安全、优化和调试方面的问题。
通常，eval（）不应在JavaScript代码中使用。
私人成员
使用JSON.stringify（）存储对象的问题是，该函数不能串行化私有成员。
这个问题可以通过重写.toString（）方法来解决（在web存储中存储数据时隐式调用）：
// Object with private and public members:
function MyClass(privateContent, publicContent) {
var privateMember = privateContent || "defaultPrivateValue";
this.publicMember = publicContent || "defaultPublicValue";
this.toString = function() {
return '{"private": "' + privateMember + '", "public": "' + this.publicMember + '"}';
};
}
MyClass.fromString = function(serialisedString) {
var properties = JSON.parse(serialisedString || "{}");
return new MyClass(properties.private, properties.public);
};
// Storing:
var obj = new MyClass("invisible", "visible");
localStorage.object = obj;
// Loading:
obj = MyClass.fromString(localStorage.object);
循环引用
stringify无法处理的另一个问题是循环引用：
var obj = {};
obj["circular"] = obj;
localStorage.object = JSON.stringify(obj); // Fails
在本例中，JSON.stringify（）将抛出TypeError“将循环结构转换为JSON”。
如果应支持存储循环引用，则可以使用JSON.stringify（）的第二个参数：
var obj = {id: 1, sub: {}};
obj.sub["circular"] = obj;
localStorage.object = JSON.stringify(obj, function(key, value) {
if(key == 'circular') {
return "$ref" + value.id + "$";
} else {
return value;
}
});
然而，找到存储循环引用的有效解决方案高度依赖于需要解决的任务，恢复这样的数据也并非易事。
关于堆栈溢出处理这个问题已经有一些问题：Stringify（转换为JSON）一个具有循环引用的JavaScript对象
