JS 监听 storage

案例地址：http://yotcap.top/htm/storage.html

在同一页面添加监听事件监听 storage 并不起作用，所以有以下两种方法用来监听。

同源页面添加监听事件

同页面重写 storage 方法

1. 监听同源页面中 storage 的变动

storage.html（监听变动页面）

<!doctype html>
<html>
<head><meta charset="utf-8" ><title>test storage</title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body><input id="tInput" type="text" /><button onclick="addItem()">add</button><button onclick="getItem()">get</button><br><p><a href="storageChange.html" target="_blank" title="修改storage">同源修改storage</a></p><p id="changeResult"></p><script>window.addEventListener('storage', function (e) {let p = document.getElementById('changeResult');p.innerHTML = `oldValue: ${e.oldValue}<br>newValue: ${e.newValue}<br>from: ${e.url}`;}, false);function addItem () {let value = document.getElementById('tInput').value;localStorage[value] = value;}function getItem () {let v = document.getElementById('tInput').value;console.log(localStorage[v], 'getItem');}function changeItem () {let k = document.getElementById('changeInputKey').value;let v = document.getElementById('changeInputValue').value;let p = document.getElementById('changeResult');p.innerHTML = `oldValue: ${localStorage[k]}<br>newValue: ${v}<br>from: this's page`;localStorage.setItem(k, v);}</script>
</body>
</html>

storageChange.html（修改页面）

<!doctype html>
<html>
<head><meta charset="utf-8" ><title>changeStorage</title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body><span>key：</span><input id="changeInputKey" type="text" /><span>value：</span><input id="changeInputValue" type="text" /><button onclick="changeItem()">change</button><script>function changeItem () {let k = document.getElementById('changeInputKey').value;let v = document.getElementById('changeInputValue').value;localStorage[k] = v;}</script>
</body>
</html>

2. 监听当前页面 storage 变动

<!doctype html>
<html>
<head><meta charset="utf-8" ><title>test storage</title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body><input id="tInput" type="text" /><button onclick="addItem()">add</button><button onclick="getItem()">get</button><br><p>页面修改 storage</p><span>修改的key</span><input id="changeInputKey" type="text" /><span>修改的value</span><input id="changeInputValue" type="text" /><button onclick="changeItem()">change</button><br><p id="changeResult"></p><script>let originStorage = localStorage;let sto = {setItem: function (key, value) {let setItemEvent = new Event('setItemEvent');setItemEvent.key = key;window.dispatchEvent(setItemEvent);originStorage.setItem(key, value);},getItem: function (key) {return originStorage.getItem(key);}}window.addEventListener('setItemEvent', function (e) {// console.log(e);});window.addEventListener('storage', function (e) {let p = document.getElementById('changeResult');p.innerHTML = `oldValue: ${e.oldValue}<br>newValue: ${e.newValue}<br>from: ${e.url}`;}, false);function addItem () {let value = document.getElementById('tInput').value;sto.setItem(value, value);}function getItem () {let v = document.getElementById('tInput').value;console.log(sto.getItem(v), 'getItem');}function changeItem () {let k = document.getElementById('changeInputKey').value;let v = document.getElementById('changeInputValue').value;let p = document.getElementById('changeResult');// localStorage.setItem(k, v);p.innerHTML = `oldValue: ${sto.getItem(k)}<br>newValue: ${v}<br>from: this's page`;sto.setItem(k, v);}</script>
</body>
</html>

JS 监听 storage相关推荐

js 监听安卓事件_百行代码实现js事件监听实现跨页面数据传输
百行代码实现js事件监听实现跨页面数据传输使用场景类似消息队列的使用场景,支持同页面和跨页面通信,发送消息和接收消息技术原理跨页面通信: 基于事件监听,通过监听 storage事件监听回调机制 ...
js监听audio播放完毕
js监听audio播放完毕 <!DOCTYPE html> <html> <head><meta charset="UTF-8">& ...
Vue.js 监听属性简单实例
Vue.js 监听属性 watch,可以通过 watch 来响应数据的变化. watch:用来监听每一个属性的变化 watch这个对象里面都是函数,函数的名称是data中的属性名称,watch ...
vue 组件属性监听_Vue.js 监听属性
# Vue.js 监听属性本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: ~~~ Vue 测试实例 - 菜鸟教程(runoob.com) ...
使用Node.JS监听文件夹变化
使用Node.JS监听文件夹改变有许多应用场合,比如: 构建自动编绎工具当源文件改变时,自动运行build过程,比如当你写CoffeeScript文件或SASS CSS文件时,保存之后可即时生成对应 ...
html5中检测网络状态的方法,前端js监听浏览器网络变化
首先,为什么要让前端判断用户的网络状态呢--为了更好的用户体验. 其次,前端能否判断网络状态?有哪些方法? 1,可以做到渐进式判断,不能做到绝对准确. 2,使用的是navigator.onLine或n ...
js监听iframe是否加载完毕
js监听iframe是否加载完毕代码片. //初始化加载var a = document.getElementById(iframe的id);var iframeLoad = function () ...
js监听浏览器tab页面变化
js监听浏览器tab页面变化引言今天写到一个需求,当用户离开当前页面的时候,需要关闭页面的一个功能,查找资料发现了这个指令,个人觉得很有用,记录下来... 直接上代码 mounted:(){thi ...
js监听鼠标拖动事件(按住左键拖动触发，松开左键取消)
此段代码,实现了左键点击id元素内区域后,拖动鼠标到边缘区域滚动条(内部class元素的滚动条)自动滚动,松开鼠标后取消事件业务需要记录一下 $(function () {var div=docum ...

JS 监听 storage

1. 监听同源页面中 storage 的变动

2. 监听当前页面 storage 变动

JS 监听 storage相关推荐

最新文章

热门文章