您的位置：首页 > 其它

本地存储webstorage-如何监测本地数据是否改变

2017-09-11 13:59 316 查看

在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 onclick="setLocalStorage()">
修改
</button>
</body>
</html>这样就能够得到原始数据，修改后的数据，以及哪个页面修改的数据。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航