Jquery 刷新HTML 5 Localstorage后恢复应用程序数据数组

我的应用程序依赖于一个数组来渲染图形和div。我希望通过HTML5LocalStorage API将其存储在本地。这是我的JS代码

var app = {
slidePreviews: "",
slideDuration: 7000,
presentation: {
    title: "",
    theme: "themeName",
    slides: []
},
themes: [{
    name: "white",
    css: "whitetheme",
    slideControls: ""
}, {
    name: "black",
    css: "blacktheme",
    slideControls: ""
}, {
    name: "red",
    css: "redtheme",
    slideControls: ""
}, {
    name: "blue",
    css: "bluetheme",
    slideControls: ""
}, {
    name: "orange",
    css: "orangetheme",
    slideControls: ""
}, {
    name: "green",
    css: "greentheme",
    slideControls: ""
}]
};

$(document).ready(function () {

var saved = false;

var handlers = {

    savePresentationData: function(event){

        // Place the app object into storage
        localStorage.setItem("app", JSON.stringify(app));

        // Retrieves the object app from HTML 5 local storage
        var retrievedObject = localStorage.getItem("app");

        console.log("retrievedObject: ", JSON.parse(retrievedObject));

        var savedData = JSON.parse(retrievedObject);

        var saved = true;
        return savedData;
    },

    clearAppData: function(event){
        localStorage.clear();
        return false;
    }

};

//use localstorage to restore presentaton data
if(saved){
    app = JSON.parse(retrievedObject);
}

我不确定我是否做得对。刷新时它不工作。刷新时，应用程序对象不包含我以前保存的数据

---

有什么建议吗

您需要一个处理程序来加载数据，另一个用于保存数据。尝试加载数据，并传递默认值。如果加载失败，函数将返回您设置的默认值：

var app = { .. values .. },
handlers = {
    loadPresentatioData: function (defaults) {
        /**
         * Retrieve stored value
         */
        var loaded = localStorage.getItem('app');

        /**
         * Use defaults if no stogare is found
         */
        if (!loaded) {
            localStorage.setItem('app',JSON.stringify(defaults));
            loaded = localStorage.getItem('app');
        }

        /**
         * Prevent errors if the parsing goes wrong
         * Defaults to original app value
         */
        try {
            loaded = JSON.parse(loaded);
        }
        catch (e) {
            loaded = defaults;
        }

        return loaded;
    },
    savePresentationData: function (data) {
        var serialized;

        try {
            serialized = JSON.stringify(data);
            localStorage.setItem('app',serialized);
        }
        catch (e) {
            // Something went wrong
        }
    }
};

---

我认为你错了。页面刷新后，您不能期望

保存的
变量存在，可以吗？您必须检查
localStorage
中的数据是否为
null
，并根据以下信息编写代码：

window.onload = function () {
    //get data from localStorage
    var saved = handlers.getPresentationData();
    //check if its null / undefined
    if ([null, undefined].indexOf(saved) === -1) {
        //its not null/undefined - data exists!
        console.log("Data exists. Here's the data : ", saved);
        //set your "app" to data from localStorage
        app = saved;

        //Do whatever you want with app - Im choosing to ask for deleting
        if (confirm("Clear locally Stored data?")) {
            handlers.clearAppData();
        }

    } else {
        //data DOES NOT exist in localStorage
        console.log("Data does not exist, save to localStorage");
        //So, save it in localStorage. Refresh this page now.
        handlers.savePresentationData();
    }

};

哦，你还需要三个搬运工


拯救
得到
清楚的

像这样：

var handlers = {
    savePresentationData: function () {
        // Place the app object into storage
        localStorage.setItem("app", JSON.stringify(app));
    },
    getPresentationData: function () {
        // Retrieves the object app from HTML 5 local storage
        var retrievedObject = localStorage.getItem("app");
        var savedData = JSON.parse(retrievedObject);
        return savedData;
    },
    clearAppData: function (event) {
        localStorage.clear();
        return false;
    }
};

演示：

我移除的东西：


将
事件
参数传递给处理程序中的函数
用于
true
/
false
的
saved
变量现在用于保存
localStorage

希望这有帮助
 你能举个例子吗？你从哪里得到数据？是这样吗？在js文件中是静态的还是从服务器（ajax）中检索它们？