Custom object classes in HTML5 LocalStorage?

Question

I'm trying out HTML5 LocalStorage.

In the examples I only see simple JSON data-objects, but I have some custom data-object classes with various methods added (like addChild, cleanup, etc).

Is it possible to store instances of these custom objects directly in LocalStorage, or do I understand the whole concept of LocalStorage totally wrong then?

Answer 1

localStorage can only store strings, so anything you try to store in localStorage will be serialized to a string first. As such it doesn't make sense to store definitions in localStorage, just data. You can create a method that generates a custom object instance from serialized data:

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

From MDN:

The DOM Storage mechanism is a means through which string key/value pairs can be securely stored and later retrieved for use.

Also, from Dive Into HTML5:

HTML5 Storage is based on named key/value pairs. You store data based on a named key, then you can retrieve that data with the same key. The named key is a string. The data can be any type supported by JavaScript, including strings, Booleans, integers, or floats. However, the data is actually stored as a string. If you are storing and retrieving anything other than strings, you will need to use functions like parseInt() or parseFloat() to coerce your retrieved data into the expected JavaScript datatype.

Emphasis mine in both quotes.

Therefore, as long as you can store your object as a string, and you can deserialize it from a string, you can put it in Local Storage. Quite often objects are stored using JSON notation. However, as the basic types allowed by the JSON specification do not include functions, JSON cannot be used to store functions in Local Storage.

From this other SO answer and Wikipedia, the basic types supported by JSON are:

• Number (integer, real, or floating point)
• String (double-quoted Unicode with backslash escaping)
• Boolean (true and false)
• Array (an ordered sequence of values, comma-separated and enclosed in square brackets)
• Object (collection of key:value pairs, comma-separated and enclosed in curly braces)
• null

You can define your own serialisation by defining a function called toJSON on the object you want to store in Local Storage, see here:

If an object being stringified has a property named toJSON whose value is a function, then the toJSON method customizes JSON stringification behavior: instead of the object being serialized, the value returned by the toJSON method when called will be serialized.