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

最新推荐文章于 2024-05-11 11:10:02 发布

babylove_lin

最新推荐文章于 2024-05-11 11:10:02 发布

阅读量2.3k

点赞数 1

分类专栏： H5 H5，前端，本地存储

本文链接：https://blog.csdn.net/babylove_lin/article/details/77932063

版权

H5 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

H5，前端，本地存储

6 篇文章 0 订阅

订阅专栏

在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>

这样就能够得到原始数据，修改后的数据，以及哪个页面修改的数据。

babylove_lin

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
本地存储webstorage-如何监测本地数据是否改变

在H5中，window对象里面有一个storage事件，我们可以进行监听或者指定其事件处理函数的方法，在其他页面修改了sessionstorage或者localstorage中的值时，要做的处理。我们先看一下一下几个属性：1、event.key:这个是被修改的数据键值2、event.oldValue : 被修改前的值3、enent.newValue:被修改后的值4、even
复制链接

扫一扫