使用JavaScript保存后從瀏覽器本地存儲中檢索數據

Question

在我的主干應用程序中，我將對象保存到本地存儲中，並且只想在保存對象后檢索它們。

我嘗試使用回調函數（該函數在保存數據的函數之后觸發），但觀察到一些延遲，並且返回未定義。

但是，當我使用setTimeout將函數調用（用於檢索數據）延遲200 ms時，它工作得很好。

有一種優雅的方法嗎？

function delayed(){
    // this callback function retrieves the data
    callback.call(self);
}

window.setTimeout(delayed, 200);

Answer 1

因此，您可以為此創建一個自定義包裝器：

(function() {
    var Store = function() {
    };

    Store.prototype.set = function(key, value) {
        localStorage.setItem(key, value);
        return this.get(key);
    };

    Store.prototype.get = function(key) {
        return localStorage.getItem(key);
    };

    var store = new Store();
    console.log(store.set('foo', 'bar'));
})();

小提琴

Answer 2

您可以在localStorage之外的內存中保留一個副本。 您無需依賴localStorage的時間。 只需經常寫入localStorage，並且僅在頁面加載時從中加載。

只是一個主意！ 沒有更多細節，很難給出更具體的答案。

Answer 3

起初我以為使用存儲的事件，但你可以看到這個問題 -而這個問題 ，而這個示范在html5demos.com，使用存儲事件的目的是跟蹤窗口/標簽之間的localStorage的變化，而不是在文檔本身內部。

但是你可以創建自己的事件，射擊時setItem是通過覆蓋setItem稱為：

//create an "onstoragechange" custom event
var storageEvent = document.createEvent('Event');
storageEvent.initEvent('onstoragechanged', true, true);

document.addEventListener('onstoragechanged', function (e) {
    alert('value added to localstorage');
    //or 
    alert(localStorage.getItem('test'));
    //call the code here, as you above would do after setTimeout
    //"callback.call(self);" or whatever 
}, false);

//override localStorage.setItem
var oldSetItem = Storage.prototype.setItem;
Storage.prototype.setItem = function() { 
    oldSetItem.apply(this, arguments);
    document.dispatchEvent(storageEvent);
}

//test
localStorage.setItem('test', 'value');

演示/ jsfiddle： http : //jsfiddle.net/cYLHT/

現在，您有了一個事件，每次將任何內容保存到localStorage時都會調度該事件，並且實際存在寫入的值。 使用對您的應用程序有幫助的事件來擴展它-例如特殊事件，如果某個重要密鑰被更新/存儲。 上面的內容似乎是一個“離題”的答案，或者說是矯kill過正，但是我認為這比在代碼周圍散布setTimeouts更好。