HTML5 localStorage 覆盖数据答案

【问题标题】：HTML5 localStorage overwrite dataHTML5 localStorage 覆盖数据
【发布时间】：2013-12-23 15:50:59
【问题描述】：

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

使用 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":"Default JSON 1"}"}

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

我是否遗漏了一个步骤，或者没有正确使用 localStorage？

【问题讨论】：

您是在切换域还是从 http 切换到 https？
没有域切换唯一改变的是在getJSON请求中被调用的文件
写localStorage之间一定要有一个页面吗？
不，您可以在任何页面上多次访问 localStorage，我问的唯一原因是因为如果域更改或协议更改，您将拥有不同的 localStorage 实例

标签： javascript json html local-storage

【解决方案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');
        });

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

【讨论】：