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

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

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

Answer 1

不可以.您无法在localStorage中存储函数或闭包.这意味着您无法在localStorage中显式存储闭包中存储的状态.

您当前的代码实际打印[null, null, null]是因为它已损坏.

经过修理你的代码是正确prings [{}, {}, {}]因为你只需要方法

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

使用真正的原型OO模块

实例 - 这里我使用的是pd风格的原型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以获取方法.

实现保存和加载功能

实例 - 这里的技巧是保存数据,然后将数据打包到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的优势在于您的对象只是您的状态,并且因为只有属性拥有数据才是它自己的属性,所以只需保存对象而不进行修改是完全安全的.