如何在所有浏览器上使用jQuery绑定localStorage更改事件？
如何在所有浏览器上使用jQuery绑定localStorage更改事件？
提问于 2011-01-13 01:26:26
如何使用jQuery将函数绑定到HTML5 localStorage更改事件？
$(function () {
$(window).bind('storage', function (e) {
alert('storage changed');
});
localStorage.setItem('a', 'test');
});我已经尝试了上面的方法，但是没有显示警告。
更新:它可以在Firefox3.6上工作，但在Chrome8或IE8上不能工作，所以问题应该更多地是“如何在所有浏览器上使用jQuery绑定到localStorage更改事件？”
回答 3
Stack Overflow用户
发布于 2014-04-08 05:40:18
下面是如何在JQuery中执行此操作：
$(window).bind('storage', function (e) {
console.log(e.originalEvent.key, e.originalEvent.newValue);
});直接访问e.key不起作用。您需要使用e.originalEvent.key。
有些浏览器只会向其他选项卡发送存储通知，有些则不会。(火狐会向自己的选项卡发送存储事件，但在key设置为空的情况下，似乎是这样的)。
Stack Overflow用户
发布于 2016-10-28 15: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)Stack Overflow用户
发布于 2017-11-09 04: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
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4671852
复制相关文章
相似问题