Question

在我的主干应用程序中，我将对象保存到本地存储中，并且只想在保存后检索它们。

我尝试使用回调函数（在保存数据的函数之后触发）但是我观察到了一些延迟并且它返回undefined。

但是，当我使用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'));
})();

Fiddle

Answer 2

您可以在内存中保留localStorage之外的副本。您不需要依赖localStorage的时间。只需经常写入localStorage，并且只在页面加载时从中加载。

只是一个想法！没有更多具体细节，很难给出更具体的答案。

Answer 3

首先我考虑使用存储事件，但正如您在html5demos.com上看到的this question - 和this question以及this demonstration一样，存储事件的使用用于跟踪窗口/选项卡之间的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');

demo / jsfiddle：http://jsfiddle.net/cYLHT/

现在，每次将任何内容保存到localStorage时，都会调度一个事件，并且实际存在写入的值。使用可帮助您运行应用程序的事件扩展此功能 - 例如，如果更新/存储某个重要密钥，则会发生特殊事件。以上似乎可能是一个“非主题”的答案，或者过度杀伤，但我认为这比围绕代码传播setTimeouts要好得多。

使用javascript保存后，从浏览器本地存储中检索数据

3 个答案: