关于javascript：在HTML5本地存储中存储对象

Storing Objects in HTML5 localStorage

我想在html5 localStorage中存储一个javascript对象，但是我的对象显然被转换成了一个字符串。

我可以使用localStorage存储和检索原始的javascript类型和数组，但对象似乎不起作用。他们应该吗？

以下是我的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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);

控制台输出为

1
2
3
4
5
6
7

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存储规范的误解，而不是特定于浏览器的错误或限制。

我试图理解http://www.w3.org/tr/html5/infrastructure.html中描述的结构化克隆算法。我不完全理解它的意思，但也许我的问题与我的对象的属性不可枚举有关(？？？)

有什么简单的方法吗？

更新：W3C最终改变了他们对结构化克隆规范的看法，并决定改变SPEC以匹配实现。参见https://www.w3.org/bugs/public/show_bug.cgi？ID＝12111。所以这个问题不再是100%有效的，但是答案仍然是有意义的。

相关讨论

查看Apple、Mozilla和Microsoft文档，功能似乎仅限于处理字符串键/值对。

解决方法可以是在存储对象之前对其进行字符串化，然后在检索对象时对其进行解析：

1
2
3
4
5
6
7
8
9

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));

相关讨论

一个变量的微小改进：

1
2
3
4
5
6
7
8

Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}

Storage.prototype.getObject = function(key) {
var value = this.getItem(key);
return value && JSON.parse(value);
}

由于短路评估，如果key不在存储中，getObject()将立即返回null。如果value是""(空字符串；JSON.parse()无法处理)，它也不会抛出SyntaxError异常。

相关讨论

您可能会发现使用以下方便的方法扩展存储对象很有用：

1
2
3
4
5
6
7

Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}

Storage.prototype.getObject = function(key) {
return JSON.parse(this.getItem(key));
}

这样，即使在API下面只支持字符串，也可以获得真正想要的功能。

相关讨论

扩展存储对象是一个很棒的解决方案。对于我的API，我已经为本地存储创建了一个外观，然后在设置和获取时检查它是否是一个对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

相关讨论

串化并不能解决所有问题

这里的答案似乎并没有涵盖在javascript中可能出现的所有类型，因此下面是一些关于如何正确处理它们的简短示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

//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()是邪恶的，会导致有关安全、优化和调试的问题。一般来说，在javascript代码中不应该使用eval()。

私人成员

使用JSON.stringify()存储对象的问题是，此函数不能序列化私有成员。这个问题可以通过覆盖.toString()方法(在web存储中存储数据时隐式调用)来解决：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//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无法处理的另一个问题是循环引用：

1
2
3

var obj = {};
obj["circular"] = obj;
localStorage.object = JSON.stringify(obj); //Fails

在本例中，JSON.stringify()将抛出一个TypeError"将循环结构转换为json"。如果支持存储循环引用，可以使用JSON.stringify()的第二个参数：

1
2
3
4
5
6
7
8
9

然而，找到一个有效的存储循环引用的解决方案高度依赖于需要解决的任务，并且恢复这些数据也不是一件容易的事情。

关于如何处理这个问题，已经有一些问题了：用循环引用将一个javascript对象串化(转换为json)

有一个很棒的库，它包含了许多解决方案，因此它甚至支持称为jstorage的旧浏览器。

可以设置对象

1	$.jStorage.set(key, value)

很容易找到它

1 2	value = $.jStorage.get(key) value = $.jStorage.get(key,"default value")

相关讨论

将JSON对象用于本地存储：

//集

1 2	var m={name:'Hero',Title:'developer'}; localStorage.setItem('us', JSON.stringify(m));

//获取

1 2	var gm =JSON.parse(localStorage.getItem('us')); console.log(gm.name);

//所有本地存储键和值的迭代

1
2
3

for (var i = 0, len = localStorage.length; i < len; ++i) {
console.log(localStorage.getItem(localStorage.key(i)));
}

//删除

1 2	localStorage.removeItem('us'); delete window.localStorage["us"];

理论上，可以使用以下函数存储对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

但是，函数序列化/反序列化不可靠，因为它依赖于实现。

相关讨论

您还可以覆盖默认的存储setItem(key,value)和getItem(key)方法，以像处理任何其他数据类型一样处理对象/数组。这样，您就可以像平时那样简单地调用localStorage.setItem(key,value)和localStorage.getItem(key)。

我没有广泛地测试过这个，但是对于一个我一直在修补的小项目来说，它似乎没有问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Storage.prototype._setItem = Storage.prototype.setItem;
Storage.prototype.setItem = function(key, value)
{
this._setItem(key, JSON.stringify(value));
}

Storage.prototype._getItem = Storage.prototype.getItem;
Storage.prototype.getItem = function(key)
{
try
{
return JSON.parse(this._getItem(key));
}
catch(e)
{
return this._getItem(key);
}
}

相关讨论

我是在点击了另一篇文章之后到达这篇文章的，这篇文章已经作为这个文章的副本关闭了，标题是"如何在本地存储中存储一个数组？"。这很好，除了两个线程都没有提供关于如何在本地存储中维护数组的完整答案—不过，我已经根据两个线程中包含的信息构建了一个解决方案。

因此，如果其他人希望能够在数组中推/弹出/移动项，并且他们希望该数组存储在本地存储中，或者实际上是会话存储中，那么您可以这样做：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

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);
}

示例用法-在本地存储阵列中存储简单字符串：

1 2	localStorage.pushArrayItem('myArray','item one'); localStorage.pushArrayItem('myArray','item two');

示例用法-在sessionstorage数组中存储对象：

1
2
3
4
5

var item1 = {}; item1.name = 'fred'; item1.age = 48;
sessionStorage.pushArrayItem('myArray',item1);

var item2 = {}; item2.name = 'dave'; item2.age = 22;
sessionStorage.pushArrayItem('myArray',item2);

操作数组的常用方法：

1
2
3
4
5
6

.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

相关讨论

建议对这里讨论的许多特性以及更好的兼容性使用抽象库。有很多选择：

jStorage或SimpleStorage<<我的首选项
乡土牧草
阿列克谢库利科夫/储藏
女主席
JS<另一个好的选择
对象管理组织

更好的是，将函数设置为Stter和Gutter到本地存储，这样您将有更好的控制，并且不必重复JSON解析和所有。它甚至可以顺利处理你的(空)空字符串键/数据实例。

1
2
3
4
5
6
7
8
9
10
11

我稍微修改了一个最受欢迎的答案。如果不需要的话，我喜欢用单一功能代替2。

1
2
3
4
5
6
7
8
9
10
11

Storage.prototype.object = function(key, val) {
if ( typeof val ==="undefined" ) {
var value = this.getItem(key);
return value ? JSON.parse(value) : null;
} else {
this.setItem(key, JSON.stringify(val));
}
}

localStorage.object("test", {a : 1}); //set value
localStorage.object("test"); //get value

另外，如果没有设置值，则返回null，而不是false。false有某种意义，null没有。

相关讨论

@guria答案的改进：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Storage.prototype.setObject = function (key, value) {
this.setItem(key, JSON.stringify(value));
};

Storage.prototype.getObject = function (key) {
var value = this.getItem(key);
try {
return JSON.parse(value);
}
catch(err) {
console.log("JSON parse failed for lookup of", key,"
error was:", err);
return null;
}
};

可以使用localdatastore透明地存储javascript数据类型(数组、布尔值、日期、浮点值、整数、字符串和对象)。它还提供了轻量级的数据混淆、自动压缩字符串、方便按键(名称)查询以及按(键)值查询，并通过预加键帮助在同一域中强制执行分段共享存储。

[免责声明]我是实用程序的作者[免责声明]

实例：

1
2
3
4
5
6
7
8
9
10
11

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

如您所见，基本值是受尊重的。

相关讨论

另一个选择是使用现有的插件。

例如，persisto是一个开放源代码项目，它为localstorage/sessionstorage提供了一个简单的接口，并自动实现表单字段(输入、单选按钮和复选框)的持久性。

persisto features

(免责声明：我是作者。)

相关讨论

可以使用ejson将对象存储为字符串。

EJSON is an extension of JSON to support more types. It supports all JSON-safe types, as well as:

Date (JavaScript Date)

Binary (JavaScript Uint8Array or the result of EJSON.newBinary)

User-defined types (see EJSON.addType. For example, Mongo.ObjectID is implemented this way.)

All EJSON serializations are also valid JSON. For example an object with a date and a binary buffer would be serialized in EJSON as:

1
2
3
4
{
"d": {"$date": 1358205756553},
"b": {"$binary":"c3VyZS4="}
}

这是我使用ejson的本地存储包装

https://github.com/uzitech/storage.js网站

我在包装器中添加了一些类型，包括正则表达式和函数

我用20行代码做了另一个极简的包装，允许像应该的那样使用它：

1
2
3
4
5

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

HTTP://Rabooo.Org是一个本地存储糖层，可以让你写出这样的东西：

1
2
3
4
5
6
7
8

它不使用JSON.StrugIFy/PARSE，因为这对大型对象来说是不准确和慢的。相反，每个终端值都有自己的本地存储条目。

你可能猜到我可能和拉博有什么关系；

阿德里安。

对于愿意设置和获取类型化属性的typescript用户：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/**
* Silly wrapper to be able to type the storage keys
*/
export class TypedStorage<T> {

public removeItem(key: keyof T): void {
localStorage.removeItem(key);
}

public getItem<K extends keyof T>(key: K): T[K] | null {
const data: string | null = localStorage.getItem(key);
return JSON.parse(data);
}

public setItem<K extends keyof T>(key: K, value: T[K]): void {
const data: string = JSON.stringify(value);
localStorage.setItem(key, data);
}
}

示例用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// write an interface for the storage
interface MyStore {
age: number,
name: string,
address: {city:string}
}

const storage: TypedStorage<MyStore> = new TypedStorage<MyStore>();

storage.setItem("wrong key",""); // error unknown key
storage.setItem("age","hello"); // error, age should be number
storage.setItem("address", {city:"Here"}); // ok

const address: {city:string} = storage.getItem("address");

这里是@danott发布的代码的扩展版本

它还将实现从本地存储中删除值并演示如何添加getter和setter层，

localstorage.setItem(preview, true)

你可以写

config.preview = true

好了，我们开始了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

你可以用.bind(...)去掉别名部分。不过，我只是把它放进去了，因为知道这件事真的很好。我花了好几个小时来弄明白为什么一个简单的get = localStorage.getItem;不起作用。

我做了一个不会破坏现有存储对象的事情，但是创建了一个包装器，这样你就可以做你想做的事情。结果是一个普通对象，没有方法，任何对象都有访问权限。

我做的东西。

如果您希望1个localStorage属性具有魔力：

1	var prop = ObjectStorage(localStorage, 'prop');

如果您需要几个：

1	var storage = ObjectStorage(localStorage, ['prop', 'more', 'props']);

你对prop或storage中的对象所做的一切都将自动保存到localStorage中。你总是在玩一个真实的物体，所以你可以这样做：

1 2	storage.data.list.push('more data'); storage.another.list.splice(1, 2, {another: 'object'});

跟踪对象中的每个新对象都将自动跟踪。

很大的缺点：它依赖于Object.observe()，所以它的浏览器支持非常有限。而且它看起来不会很快出现在Firefox或Edge上。

看看这个

假设您有以下称为电影的数组：

1 2	var movies = ["Reservoir Dogs","Pulp Fiction","Jackie Brown", "Kill Bill","Death Proof","Inglourious Basterds"];

使用stringify函数，可以使用以下语法将movies数组转换为字符串：

1	localStorage.setItem("quentinTarantino", JSON.stringify(movies));

请注意，我的数据存储在一个名为quentinarantino的键下。

正在检索数据

1	var retrievedData = localStorage.getItem("quentinTarantino");

要从字符串转换回对象，请使用json parse函数：

1	var movies2 = JSON.parse(retrievedData);

可以调用电影中的所有数组方法2

相关讨论

要存储一个对象，您可以制作一个字母，用于将对象从字符串获取到对象(可能没有意义)。例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

如果你使用你用来分割物体的字母，这项技术会导致一些小故障，而且它也是非常实验性的。

使用localstorage跟踪从联系人收到的消息的库的一个小示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

// This class is supposed to be used to keep a track of received message per contacts.
// You have only four methods:

// 1 - Tells you if you can use this library or not...
function isLocalStorageSupported(){
if(typeof(Storage) !=="undefined" && window['localStorage'] != null ) {
return true;
} else {
return false;
}
}

// 2 - Give the list of contacts, a contact is created when you store the first message
function getContacts(){
var result = new Array();
for ( var i = 0, len = localStorage.length; i < len; ++i ) {
result.push(localStorage.key(i));
}
return result;
}

// 3 - store a message for a contact
function storeMessage(contact, message){
var allMessages;
var currentMessages = localStorage.getItem(contact);
if(currentMessages == null){
var newList = new Array();
newList.push(message);
currentMessages = JSON.stringify(newList);
}
else
{
var currentList =JSON.parse(currentMessages);
currentList.push(message);
currentMessages = JSON.stringify(currentList);
}
localStorage.setItem(contact, currentMessages);
}

// 4 - read the messages of a contact
function readMessages(contact){

var result = new Array();
var currentMessages = localStorage.getItem(contact);

if(currentMessages != null){
result =JSON.parse(currentMessages);
}
return result;
}

通过本地存储循环

1
2
3
4
5

var retrievedData = localStorage.getItem("MyCart");

retrievedData.forEach(function (item) {
console.log(item.itemid);
});

相关讨论