Question

我正在尝试HTML5 LocalStorage。

在示例中，我只看到简单的JSON数据对象，但我有一些自定义的数据对象类，添加了各种方法（如addChild，cleanup等）。

是否可以直接在LocalStorage中存储这些自定义对象的实例，或者我是否完全理解LocalStorage的整个概念呢？

Answer 1

localStorage只能存储字符串，因此您尝试存储在localStorage中的任何内容都将首先序列化为字符串。因此，将{em>定义存储在localStorage中只是数据是没有意义的。您可以创建一个从序列化数据生成自定义对象实例的方法：

function Custom() {}
Custom.prototype.addChild = function () {
    console.log(this.x, this.y);
}
// LocalStorage serializes to String first
Custom.prototype.toString = function () {
    return JSON.stringify({
        "x": this.x,
        "y": this.y,
    });
};
Custom.unserialize = function (customData) {
    customData = JSON.parse(customData);
    var custom = new Custom;
    custom.x = customData.x;
    custom.y = customData.y;
    return custom;
}
var custom = new Custom;
custom.x = "foo";
custom.y = "bar";
localStorage.custom = custom;
console.log(Custom.unserialize(localStorage.custom).addChild());

Answer 2

来自MDN：

DOM存储机制是一种可以安全存储字符串键/值对并随后检索使用的方法。

此外，来自Dive Into HTML5：

HTML5存储基于命名的键/值对。您可以根据命名密钥存储数据，然后使用相同的密钥检索该数据。命名键是一个字符串。数据可以是JavaScript支持的任何类型，包括字符串，布尔值，整数或浮点数。 但是，数据实际上存储为字符串。如果要存储和检索字符串以外的任何内容，则需要使用parseInt（）或parseFloat（）等函数将检索到的数据强制转换为预期的JavaScript数据类型。

在两个引号中强调我的。

因此，只要您可以将对象存储为字符串，并且可以从字符串反序列化它，就可以将其放在本地存储中。通常使用JSON表示法存储对象。但是，由于JSON规范允许的基本类型不包含函数，因此JSON不能用于在本地存储中存储函数。

从this other SO answer和Wikipedia开始，JSON支持的基本类型为：

数字（整数，实数或浮点数）
String（带反斜杠转义的双引号Unicode）
布尔值（true和false）
数组（有序的值序列，逗号分隔并用方括号括起来）
对象（键的集合：值对，以逗号分隔并用花括号括起来）
null

您可以通过在要存储在本地存储中的对象上定义名为toJSON的函数来定义自己的序列化，请参阅here：

如果正在进行字符串化的对象具有名为toJSON的属性，其值为函数，则toJSON方法自定义JSON字符串化行为：而不是被序列化的对象，调用时toJSON方法返回的值将被序列化。

HTML5 LocalStorage中的自定义对象类？

2 个答案: