0

我有一个数组，我的应用程序依赖它来渲染图形和 div。我希望通过 HTML 5 localStorage 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);
}

我不确定我这样做是否正确。它在刷新时不起作用。刷新后，app 对象不包含我之前保存的数据。

有什么建议么？

4

2 回答 2

1

我认为你这样做是错误的。你不能指望saved页面刷新后变量存在吗？您必须检查数据是否来自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;
    }
};

演示：http: //jsbin.com/icafac/1/edit

我删除的东西：

  • 将参数传递event给处理程序中的函数。
  • savedtrue用于/的变量false现在用于保存数据localStorage

希望这可以帮助！

于 2013-06-23T17:52:46.330 回答
0

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

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
        }
    }
};
于 2013-06-23T17:49:20.800 回答