0

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

我尝试使用回调函数（在保存数据的函数之后触发），但我观察到有一点延迟，它返回未定义。

但是，当我使用 setTimeout 将函数调用（检索数据）延迟 200 毫秒时，它工作得很好。

有没有优雅的方法呢？

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

window.setTimeout(delayed, 200);
4

3 回答 3

0

起初我想使用 storage-event，但正如你看到的这个问题- 和这个问题，以及html5demos.com 上的这个演示，使用 storage 事件的目的是跟踪窗口/选项卡之间的 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 时都会调度一个事件，并且写入的值实际上是存在的。使用有助于您的应用程序的事件来扩展它——比如更新/存储某个重要密钥时的特殊事件。以上似乎可能是一个“离题”的答案，或者是矫枉过正，但我​​认为这是一种比在代码中传播 setTimeouts 更好的方法。

于 2013-09-28T14:07:22.523 回答
0

So you can make a custom wrapper for this purpose:

(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

于 2013-09-27T21:35:48.227 回答
0

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

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

于 2013-09-28T00:56:39.373 回答