如何使用jQuery将函数绑定到HTML5 localStorage change事件?
$(function () {
$(window).bind('storage', function (e) {
alert('storage changed');
});
localStorage.setItem('a', 'test');
});
我已尝试上述方法,但未显示警报。
- 更新 *:它在Firefox 3.6中工作,但在Chrome 8或IE 8中不工作,所以问题应该更多地是“如何在所有浏览器中使用jQuery绑定到localStorage更改事件?”
5条答案
按热度按时间de90aj5v1#
事实证明,这实际上是正确的工作,我误解了规范
在与本地存储区域关联的Storage对象x上调用setItem()、removeItem()和clear()方法时,如果这些方法执行了某些操作,则在每个Document对象(其Window对象的localStorage属性的Storage对象与同一存储区域关联,而不是与x关联)中,必须触发storage事件
换句话说,除了**更新
localStorage
对象并引发事件的窗口/选项卡之外,**在每个窗口/选项卡上触发存储事件。所以这个事件没有被触发,因为我只打开了一个窗口/标签。如果我把上面的代码放在一个页面中,并在两个标签中打开这个页面,我会看到在第二个标签中触发的事件。
这个问题的答案包含了更多的细节。
kuuvgm7e2#
下面是在JQuery中的实现方法:
直接访问
e.key
不起作用。您需要使用e.originalEvent.key
。有些浏览器只会向其他标签页发送存储通知,有些则不会。(Firefox会向自己的标签页发送存储事件,但
key
设置为null,看起来像是这样)。gg0vcinb3#
有一点需要说明的是,只有当
.setItem
上的项 * 实际上 * 发生了变化时,才会调用该事件处理程序。我一直在努力让它工作,直到我意识到不能一直用相同的值运行setItem。我使用的是Chrome版本54.0.2840.71 m
下面是一个测试(在两个浏览器选项卡中打开)。
rqcrx0a64#
你可以使用localDataStorage这样的实用程序在同一个窗口/选项卡中为你触发事件,每当键值发生变化时,比如set或remove方法所做的变化。你也可以使用它来透明地设置/获取以下任何“类型”:数组、布尔值、日期、浮点数、整数、空值、对象或字符串。
[免责声明]我是该实用程序的作者[/免责声明]
一旦示例化了该实用程序,下面的代码片段将允许您监视事件(在普通JS中,因为已经给出了jQuery示例):
8aqjt8rx5#
更新@Flimm的答案;
.bind()
方法在jQuery 3.0之后已弃用,因此建议使用.on()
方法。