javascript - HTML5 localStorage 覆盖数据

Question

我第一次使用 LocalStorage 来开发我正在开发的网络应用程序。但是我遇到了一个问题，希望有人能够帮助我解决，

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

在 Web 应用程序启动时，用户会做出一些选择来驱动应用程序使用哪些 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');
        });

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