项目中有一个需求，需要在两个页面进行传值操作并实时更新，想到了用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>
|
