HTML5 localStorage覆蓋數據

Question

我正在使用LocalStorage第一次使用我正在處理的Web應用程序。 但是我遇到了一個問題，我希望有人能夠幫助我，

使用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');
        });

我的猜測是，在運行代碼時，您不會在控制台中看到這些打印件。