在H5中,window对象里面有一个storage事件,我们可以进行监听或者指定其事件处理函数的方法,在其他页面修改了sessionstorage或者localstorage中的值时,要做的处理。
我们先看一下一下几个属性:
1、event.key:这个是 被修改的数据键值
2、event.oldValue : 被修改前的值
3、enent.newValue:被修改后的值
4、event.url:修改storage 页面的url地址
5、event.storageArea : 被变动的 sessionstorage或者localstorage对象。
接下来我们通过两个例子来体验一下:
一、输出变动情况,如果该值被修改,则立刻输出 变动前,变动后,以及修改该值得页面url。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监测webstorage数据</title>
</head>
<body>
<script>
window.addEventListener('storage',function (event) {
if(event.key=='demo'){
var output=document.getElementById("output");
output.innerHTML="修改前的值:"+event.oldValue;
output.innerHTML+="<br>修改后的新值:"+event.newValue;
output.innerHTML+="<br>变动后的地址"+utf8_decode(unescape(event.url));
}
},false);
function utf8_decode(utftext) {
var string="";
var i=0;
var c=c1=c2=0;
while (i<utftext.length){
c=utftext.charCodeAt(i); //charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
if(c<128){
string+=String.fromCharCode(c); //fromCharCode() 可接受一个指定的 Unicode 值,然后返回一个字符串
i++;
}
else if (c>191 && c<224){
c2=utftext.charCodeAt(i+1);
string+=String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i=i+2;
}else {
c2=utftext.charCodeAt(i+1);
c3=utftext.charCodeAt(i+2);
string+=String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i+=3;
}
}
return string;
}
</script>
<output id="output"></output>
</body>
</html>
在这个页面来对webstorage进行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改web中的数据</title>
</head>
<body>
<script>
function setLocalStorage() {
localStorage.demo=document.getElementById("mytext").value;
}
</script>
请输入修改的值:<input type="text" id="mytext"> <br>
<button οnclick="setLocalStorage()">
修改
</button>
</body>
</html>
这样就能够得到 原始数据,修改后的数据,以及哪个页面修改的数据。