如何使用jQuery将函数绑定到HTML5 localStorage更改事件?
$(function () {
$(window).bind('storage', function (e) {
alert('storage changed');
});
localStorage.setItem('a', 'test');
});
我已经尝试了上面的方法,但是没有显示警告。
更新:它可以在Firefox3.6上工作,但在Chrome8或IE8上不能工作,所以问题应该更多地是“如何在所有浏览器上使用jQuery绑定到localStorage更改事件?”
发布于 2014-04-07 21:40:18
下面是如何在JQuery中执行此操作:
$(window).bind('storage', function (e) {
console.log(e.originalEvent.key, e.originalEvent.newValue);
});
直接访问e.key
不起作用。您需要使用e.originalEvent.key
。
有些浏览器只会向其他选项卡发送存储通知,有些则不会。(火狐会向自己的选项卡发送存储事件,但在key
设置为空的情况下,似乎是这样的)。
发布于 2016-10-28 07:22:09
值得一提的是,只有当项目实际发生更改时,才会在.setItem
上调用事件处理程序。为了让它正常工作,我费了好大劲,直到我意识到你不能一直用相同的值运行setItem。
我使用的是Chrome版本54.0.2840.71 m
这是一个测试(在两个浏览器选项卡中打开它)。
if (window.addEventListener)
addEventListener('storage', storage_event, false);
else if (window.attachEvent)
attachEvent('onstorage', storage_event, false);
function storage_event(e) {
console.log("Time is now "+ e.newValue);
}
setInterval(function () {
var time=new Date().getTime();
localStorage.setItem("time", time);
console.log("Setting time to "+time);
}, 1000)
发布于 2017-11-08 20:43:40
每当键值发生更改时,都可以使用诸如localDataStorage之类的实用程序在同一窗口/选项卡中为您触发事件。您还可以使用它透明地设置/获取以下任何“类型”:Array、Boolean、Date、Float、Integer、Null、Object或String。
免责声明我是实用程序/DISCLAIMER的作者
实例化该实用程序后,以下代码片段将允许您监视事件(在普通JS中,因为已经给出了jQuery示例):
function localStorageChangeEvents( e ) {
console.log(
"timestamp: " + e.detail.timestamp + " (" + new Date( e.detail.timestamp ) + ")" + "\n" +
"key: " + e.detail.key + "\n" +
"old value: " + e.detail.oldval + "\n" +
"new value: " + e.detail.newval + "\n"
);
};
document.addEventListener(
"localDataStorage"
, localStorageChangeEvents
, false
);
https://stackoverflow.com/questions/4671852
复制相似问题