Question

我正在使用LocalStorage首次使用我正在处理的网络应用。但是我遇到了一个问题，希望有人能够帮助我，

使用localStorage我也保存了一个JSON对象。这个JSON对象提供了存储数据和从中提取数据以驱动我的Web应用程序的地方，而无需LAMP服务器的数据库连接。这是理想的解决方案。

在网络应用程序启动时，用户做出一些选择，驱动应用程序用于启动的JSON文件，其代码就在这里，

makeSelection: function(element) {

        var that = this;

        element.parents('.column-wrapper').find(".selected").removeClass("selected");
        element.addClass("selected");

        if(element.data("collection") != undefined) {
            $.getJSON('json/' + element.data("collection") + '.json', function(data){
                localStorage.setItem('collection', JSON.stringify(data));
            });
        }

        if(element.data("room") != undefined) {
            localStorage.getItem('room');
        }
    }

现在上面的代码工作正常，如果我console.log(localStorage.getItem('collection')那么我得到

{collection: "{"name":"Default JSON 1"}"}

我希望，但是在任何时候用户都可以更改其数据的来源，这意味着再次运行makeSelection函数。然后用户选择默认的JSON 2，我检查网络选项卡，看到已经为该JSON文件发出了请求，并且已经返回了JSON。

我再次运行console.log(localStorage.getItem('collection')期待获得

{collection: "{"name":"Default JSON 2"}"}

当我请求JSON文件时，我可以将JSON作为我的网络选项卡中的响应，但是我在控制台中得到的仍然是，

{collection：“{”name“：”默认JSON 1“}”}

运行makeSelection()是否应该更改localStorage中的集合项以匹配getJSON响应的集合项？

我错过了一个步骤，还是错误地使用了localStorage？

Answer 1

唯一的解释是您的回调未被触发。

localStorage.setItem('collection', 'data 1'); (function () { return  localStorage.getItem('collection');})();

> "data 1"

localStorage.setItem('collection', 'data 2'); (function () { return  localStorage.getItem('collection');})();

> "data 2"

你试过做一些调试吗？如

if(element.data("collection") != undefined) {
        $.getJSON('json/' + element.data("collection") + '.json', function(data){
            console.log('CAME INTO CALLBACK');
            localStorage.setItem('collection', JSON.stringify(data));
            console.log('FINISHING CALLBACK');
        });

我的猜测是，在运行代码时，您不会在控制台中看到这些打印件。

HTML5 localStorage覆盖数据

1 个答案: