Question

I’m building a canvas where I will have multiple objects and images being moved around and I want to save them in local storage to be retrieved on a later viewing.

I think jQuery’s $.storage plugin would be ideal, but I don’t know how to save more than one object in it. The jquery api says its syntax is:

$.Storage.set({"name1":"value1", "name2":"value2", etc})`

But this is only good for one object. Would I be able to create multiple objects within the argument list? Or maybe store an array?

Answer 1

You can create JSON strings and store them so when you retrieve the data you can parse them as JSON and get an object out of it. That way you can store all the information about a single element in an object.

UPDATE

Here is a tool that you can include to “stringify” JavaScript objects into JSON (it will add this functionality in browsers that don’t have this already): https://github.com/douglascrockford/JSON-js

And you can nest objects if you want:

var myObj = {
        level_one : {
            level_two : {
                key : 'val'
            },
            level_two_too : {
                level_three : {
                    key : 'val'
                }
            }
        },
        level_one_too : {
            key : 'val'
        }
    },
    str = JSON.stringify(myObj);

The str variable will now hold a string like this:

{"level_one":{"level_two":{"key":"val"},"level_two_too":{"level_three":{"key":"val"}}},"level_one_too":{"key":"val"}}

Here is a demo: http://jsfiddle.net/ycxcV/

UPDATE

So your $.storage() function call would be something like this:

$.Storage.set({"element-one":JSON.stringify($('#element-one')), "element-two":JSON.stringify($('#element-two'))})

Here is an updated demo that shows creating a JSON string and parsing it back into an object: http://jsfiddle.net/ycxcV/1/
This will store the jQuery objects associated with the #element-one and #element-two DOM elements in local-storage.