Сохранение объекта модуля 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);

Когда я помещаю массив объектов в локальное хранилище и извлекаю его, я получаю строку ([object object, object object, object object]), а не сам массив объектов. Я также новичок в модульной архитектуре и локальном хранилище. Я пробовал, сколько уровней я знаю, чтобы сохранить и получить массив объектов. пожалуйста, просмотрите кодовый блок. заранее спасибо

Answer 1

Нет. Вы не можете хранить функции или замыкания в localStorage. Это означает, что вы не можете явно хранить состояние, хранящееся в замыканиях, в localStorage.

Ваш текущий код на самом деле печатает [null, null, null], потому что он сломан.

После исправления вашего кода он правильно печатает [{}, {}, {}], потому что у вас есть только методы

Главным образом потому, что JSON не поддерживает функции. Есть два решения

Используйте настоящий прототип ОО модуля

Живой пример - Здесь я использую 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, чтобы вернуть ваши методы.

Реализация функции сохранения и загрузки

Живой пример - Хитрость здесь в том, чтобы сохранить данных и затем упаковать данных в объект 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);
});

Обратите внимание, что в отличие от прототипного примера ОО, вы должны распаковать ваши объекты на этапе сохранения. Прототипное ОО обладает тем преимуществом, что ваши объекты просто являются вашим состоянием, и поскольку только данные, принадлежащие свойствам, являются его собственными свойствами, совершенно безопасно просто сохранить объект без изменений.