项目中有一个需求,需要在两个页面进行传值操作并实时更新,想到了用Storage,原理就不解释了,直接上代码
实时监听的页面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
| <!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <title>利用storage事件实时监视Web Storage中的数据</title> </head>
<body> <script type="text/javascript"> //利用storage事件实时监视wev Storage中的数据 window.addEventListener('storage', function(e) { //e只是一个传参 console.log(e) //获取被修改的键值 if(e.key == 'test') { //获取将要被添加内容的元素 var output = document.getElementById('output'); //将获取到的修改值在元素中输出 output.innerHTML = '原有值:' + e.oldValue; output.innerHTML += '<br />新值:' + e.newValue; output.innerHTML += '<br />变动页面地址:' + e.url;
//分别打印会发现内容一致 console.log(e.storageArea); console.log(localStorage); //此行代码只在Chrome浏览器中有效 console.log(e.storageArea === localStorage); //输出true
} }, false);
</script> <output id="output"></output> </body>
</html>
|
被监听的代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用于修改localStorage 中数据的页面的代码</title> </head>
<body> <span>请输入一些值:</span><input type="text" id="text1" /> <button onclick="setLOcalStorage()">设置</button> </body> <script type="text/javascript"> function setLOcalStorage() { localStorage.clear(); //设置test键值下的内容等于input框中的内容 localStorage.test = document.getElementById('text1').value; } </script> </html>
|
-------------本文结束感谢您的阅读-------------