（八）webStorage使用实例——利用storage事件实时监视webStorage中的数据

蔚落 2022-08-02 00:19 112阅读 0赞

在HTML5中，可以通过window对象的storage事件进行监听并指定其事件处理函数的方法来定义当其在其他页面中修改sessionStorage或localStorage中的值时所要执行的处理，代码如下：

window.addEventListener('storage',function(){
                //当sessionStorage或localStorage中的值发生变动时所要执行的处理
            },false);

在事件处理函数中，触发事件的事件对象（event参数值）具有如下属性：

1、event.key属性：属性值为在sessionStorage或localStorage中被修改的数据键值；

2、event.oldValue属性：属性值为在sessionStorage或localStorage中被修改前的值；

3、event.newValue属性：属性值为在sessionStorage或localStorage中被修改后的值；

4、event.url属性：属性值为在sessionStorage或localStorage中值的页面URL地址；

5、event.storageArea属性：属性值为变动的sessionStorage对象或localStorage对象；

示例如下：

storage.html

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>利用storage事件实时监视webStorage中的数据</title>
        <script>
            window.addEventListener('storage',function(event){
                if(event.key == "test"){
                    var output = document.getElementById("output");
                    output.innerHTML = "原有值：" + event.oldValue;
                    output.innerHTML = "<br/>新值：" + event.newValue;
                    output.innerHTML = "<br/>变动页面地址：" + utf8_decode(unEscape(event.url));
                     console.log(event.storageArea);
                    //此行代码只能在chrome浏览器中有效
                    console.log(event.storageArea === localStorage);//输出true
                }
            },false);
            function utf8_decode(utfText){
                var string = "";
                var i = 0;
                var c = c1 = c2= 0;
                while(i < utfText.length){
                    c = utfText.charCodeAt(i);
                    if(c <128){
                        string += String.formCharCode(c);
                        i++;
                    }else if((c > 191) && (c < 224)){
                        c2 = utfText.charCodeAt(i+1);
                        string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                        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>
    </head>
    <body>
        <output id="output"></output>
    </body>
    </html>

storage2.html

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>修改webStorage中的数据</title>
        <script>
            function setLocalStorage(){
                localStorage.test = document.getElementById("text1").value;
            }
        </script>
    </head>
    <body>
        请输入一些值：<input type="text" id="text1" />
        <button οnclick="setLocalStorage()">设置</button>
    </body>
    </html>