我想在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%有效，但答案可能仍然令人感兴趣。
您可以使用localDataStorage透明地存储JavaScript数据类型（Array、BigInt、Boolean、Date、Float、Integer、String和Object）。它还提供了轻量级数据混淆，自动压缩字符串，方便按关键字（名称）和按关键字（值）查询，并通过前缀关键字帮助在同一域内强制执行分段共享存储。
[免责声明]我是实用程序的作者[/免责声明】
示例：
localDataStorage.set( 'key1', 'Belgian' )
localDataStorage.set( 'key2', 1200.0047 )
localDataStorage.set( 'key3', true )
localDataStorage.set( 'key4', { 'RSK' : [1,'3',5,'7',9] } )
localDataStorage.set( 'key5', null )
localDataStorage.get( 'key1' ) // --> 'Belgian'
localDataStorage.get( 'key2' ) // --> 1200.0047
localDataStorage.get( 'key3' ) // --> true
localDataStorage.get( 'key4' ) // --> Object {RSK: Array(5)}
localDataStorage.get( 'key5' ) // --> null
正如您所看到的，基本值受到了尊重。
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对象
https://github.com/adrianmay/rhaboo是一个localStorage糖层，允许您编写如下内容：
var store = Rhaboo.persistent('Some name');
store.write('count', store.count ? store.count+1 : 1);
store.write('somethingfancy', {
one: ['man', 'went'],
2: 'mow',
went: [ 2, { mow: ['a', 'meadow' ] }, {} ]
});
store.somethingfancy.went[1].mow.write(1, 'lawn');
它不使用JSON.stringify/parse，因为这对于大型对象来说是不准确和缓慢的。相反，每个终端值都有自己的localStorage条目。
你可能会猜到我可能和rhaboo有关系。
我在读到另一篇文章后发表了这篇文章，这篇文章的标题是“如何在本地存储中存储数组？”。这很好，除了两个线程都没有提供关于如何在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
下面是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；不工作。
