zoukankan      html  css  js  c++  java
  • HTML5 storage事件监听

    引用《h5移动web开发指南》上的话:

    “当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件,就会触发”

    所以,localStorage  storage的例子运行需要如下条件:

    同一浏览器打开了两个同源页面

    其中一个网页修改了localStorage

    另一网页注册了storage事件

    Storage事件

    在某些复杂情况下,如果多个页面都需要访问本地存储的数据,就需要在存储区域的内容发生改变时,能够通知相关的页面。

    Web Storage API内建了一套事件通知机制,当存储区域的内容发生改变(包括增加、修改、删除数据)时,就会自动触发 storage 事件,并把它发送给所有感兴趣的监听者。因此,如果需要跟踪存储区域的改变,就需要在关心存储区域内容的页面监听 storage 事件。

    所有支持 localStorage 的浏览器都支持 storage 事件,包括 IE8。但IE 8不支持 W3C 标准的 addEventListener。因此,为了监听 storage 事件,还需要检测浏览器支持哪种事件机制:

    if (window.addEventListener) {

        window.addEventListener("storage", handleStorage, false);

    } else {

        window.attachEvent("onstorage", handleStorage);

    }

    handleStorage 回调函数接受一个 StorageEvent 参数,在IE中,StorageEvent对象保存在 window.event 里面。

    function handleStorage(e) {

      if (!e) {

        e = window.event;

      }

    }

    此时,变量 e 就是一个 StorageEvent 对象,这个对象有很多有用的属性。这些属性及含义见表:

    表 StorageEvent对象的属性及含义

    属性       含义

    key 设置或删除或修改的键。调用clear()时,则为null。

    oldValue      改变之前的旧值。如果是新增元素,则为null。

    newValue     改变之后的新值。如果是删除元素,则为null。

    storageArea 该属性是一个引用,指向发生变化的sessionStorage或localStorage对象

    url   触发这个改变事件的页面的URL

    得到这些属性之后,就可以做任何想做的事情。接下来,通过一个完整的实例,来演示一下 localStorage 的 storage 事件机制。

    假设有 save.html 和 show.html 两个页面,在 save 页面触发数据改变,在 show 页面通过弹窗将相关信息显示出来。

    在 save 页面中,有一个文本框和一个保存按钮,用户在文本框中输入数据后,点击保存按钮,就会调用 saveItem() 函数将用户的输入保存到本地存储中。代码如下:

    <input type="text" id="data" placeholder="input date to save"> 

    <button onClick="saveItem()">保存</button>

    <script>

    function saveItem() {

        var data = document.getElementById("data").value;   

        localStorage.setItem("data", data);

    }

    </script>

    在 show 页面中,注册事件监听函数,来监听 storage 事件,因为它关心存储区域内容的变化:

    <script>

    if (window.addEventListener) {

        window.addEventListener("storage", showStorage);

    } else {

        window.attachEvent("onstorage", showStorage);

    }

    function showStorage(e) {

        if (!e) {

          e = window.event;

        }

        var str = "key: " + e.key +

           " newValue: " + e.newValue +

           " oldValue: " + e.oldValue +

           " url: " + e.url +

           " storageArea: " + e.storageArea;

        

      alert(str);      

    }

    </script>

    此时,如果 save 页面改变了存储区域的内容,就会自动触发 storage 事件,并把它发送给所有监听 storage 事件的页面。

    需要注意的是,只有在数据的内容确实发生改变的时候,才会触发 storage 事件。如果把一个值设置成一模一样的值,或删除一个根本就不存在的存储项,则不会触发 storage 事件。并且,storage 事件只会发送给同源、而且处于打开状态的其它页面,而不会发送给触发改变的页面本身(即 save.html)及处于关闭状态的页面。因此,应当从Web服务器上获取本实例的页面。

  • 相关阅读:
    继承
    rpm使用
    weblogic报outOfMemory
    linux能访问外网但ping不通百度
    zookeeper启动异常问题
    Oracle查看表的变动信息
    Linux创建、删除软链接
    zookeeper开机自启
    linux中oracle自启动
    Weblogic命令模式安装
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/11429991.html
Copyright © 2011-2022 走看看