在公司的一次内部分享会上, 偶然知道了这个H5的新事件, 解决了我之前的一个bug.
事情是这样的, 第A网页上显示的数量的总和, 点击去是B页面, 可以进行管理, 增加或者删除, 当用户做了增删操作之后, 返回到A页面的时候不会更新数量, 这个问题困扰了很久
终于等到storage事件, 据说淘宝的购物车就是这么实现的
所以, localStorage的例子运行需要如下条件
- 同一个浏览器打开了两个同源网页
- 其中一个网页修改了localStorage
- 另一个网页注册了storage事件
例子
A网页监听了storage事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>a</title> </head> <body> <script type="text/javascript"> window.addEventListener('storage', function(e) { console.log('storage', e.newValue); }) </script> </body> </html>
B网页修改了localStorage
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>B</title> </head> <body> <button id="btn">点击</button> </body> <script type="text/javascript"> var btn = document.getElementById('btn'); btn.onclick = function() { localStorage.clear(); localStorage.setItem('foo', 'bar'); } </script> </html>
运行: 将上面两个网页, 放到同一个服务器上, 在同一个浏览器上打开两个页面, 点击B网页中的按钮, 就会看到A网页中console打印内容
扩展
如果非要在同一个网页中监听怎么办, 可以重写localStorage的方法, 抛出自定义的事件
<!DOCTYPE html> <html> <head lang="en"> <title>A</title> </head> <body> <script> var orignalSetItem = localStorage.setItem; localStorage.setItem = function(key,newValue){ var setItemEvent = new Event("setItemEvent"); setItemEvent.newValue = newValue; window.dispatchEvent(setItemEvent); orignalSetItem.apply(this,arguments); } window.addEventListener("setItemEvent", function (e) { alert(e.newValue); }); localStorage.setItem("nm","1234"); </script> </body> </html>