Question

我有一个javascript模块名称SceneModule，请参阅下面的代码片段

var SceneModule = function()    {
    var scene, createScene, updateScene, getScene;

    scene   =   {
        name : '',
        width : 100,
        height : 100
    };

    createScene = function(params)  {
        for(var key in params)  {
            scene[key] = params[key];
        }

        return this;
    };

    updateScene = function(params)  {
        scene[params.attr] = params.value;
    };

    getScene = function()   {
        return scene;
    }

    return {
        create : function(params)   {
            createScene(params);
        },

        update : function(params)   {
            updateScene(params);
        },

        get : function()    {
            getScene();
        }
    };
};

var SceneArray = [], tempArray;

SceneArray.push(
    SceneModule.create({
        name : 'scene 1',
        width : 100,
        height : 100
    }),
    SceneModule.create({
        name : 'scene 2',
        width : 100,
        height : 100
    }),
    SceneModule.create({
        name : 'scene 3',
        width : 100,
        height : 100
    })
);

localStorage.setItem('scene',JSON.stringify(SceneArray);

tempArray = JSON.parse(localStorage.getItem('scene'));

/**
 * Print string [object object, object object, object object];
 * not the SceneArray Structure; 
 */
console.log(tempArray);

当我将对象数组放到本地存储并检索它时，我得到一个字符串（[object object, object object, object object]）而不是对象数组本身。我也是模块化架构和本地存储的新手。我尝试了许多我知道存储和获取对象数组的级别。请查看代码块。提前谢谢

Answer 1

没有。您无法在localStorage中存储函数或闭包。这意味着您无法在localStorage中显式存储闭包中存储的状态。

Your current code实际打印[null, null, null]，因为它已经坏了。

在fixing your code后，它正确地为[{}, {}, {}]打了一针，因为你只有方法

主要是因为JSON不支持函数。有两种解决方案

使用真正的原型OO模块

Live Example - 我在这里使用pd-style原型OO

var Scene = { 
    /* insert methods */   
};

var SceneArray = [], tempArray;

SceneArray.push(
    extend(Object.create(Scene), {
        name : 'scene 1',
        width : 100,
        height : 100
    }),
    extend(Object.create(Scene), {
        name : 'scene 2',
        width : 100,
        height : 100
    }),
    extend(Object.create(Scene), {
        name : 'scene 3',
        width : 100,
        height : 100
    })
);

localStorage.setItem('scene', JSON.stringify(SceneArray));

tempArray = JSON.parse(localStorage.getItem('scene')).map(function (data) {
    return extend(Object.create(Scene), data);
});
console.log(tempArray); // [Object, Object, Object]

此处只有Scene原型的方法，您可以使用实际数据扩展继承自Scene的对象。您将实际数据存储在localStorage中，当您从本地存储中取出时，将它们映射到从Scene继承的对象以恢复您的方法。

实施保存和加载功能

Live Example - 这里的技巧是保存数据，然后将数据打包到SceneModule对象中。

// unpack the data and only save the data
localStorage.setItem('scene', JSON.stringify(SceneArray.map(function (scene) {
    return scene.get();
})));

// pack the data back into a scene module.
var tempArray = JSON.parse(localStorage.getItem('scene')).map(function (data) {
    return SceneModule().create(data);
});

请注意，与原型OO示例不同，您必须在保存阶段解压缩对象。原型OO的优势在于您的对象只是您的状态，并且因为只有属性拥有数据才是它自己的属性，所以只需保存对象而不进行修改就是完全安全的。

将Javascript模块对象保存在本地存储中

1 个答案:

使用真正的原型OO模块

实施保存和加载功能