storage事件

当储存的数据发生变化时,会触发storage事件。我们可以指定这个事件的回调函数。

window.addEventListener("storage",onStorageChange);

function onStorageChange(e) {
console.log(e.key); //还有e.oldValue,e.newValue,e.url属性
}

值得特别注意的是,该事件不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面,当其中的一个页面改变sessionStorage或localStorage的数据时,其他所有页面的storage事件会被触发,而原始页面并不触发storage事件。可以通过这种机制,实现多个窗口之间的通信。所有浏览器之中,只有IE浏览器除外,它会在所有页面触发storage事件。

参考

  Web Storage:浏览器端数据存储机制,阮一峰 http://javascript.ruanyifeng.com/bom/webstorage.html

浏览器 Web Storage - sessionStorage & localStorage的更多相关文章

  1. HTML5中的Web Storage(sessionStorage||localStorage)理解与简单实例

    Web Storage是什么? Web Storage功能,顾名思义,就是在Web上针对client本地储存数据的功能,详细来说Web Storage分为两种: sessionStorage: 将数据 ...

  2. html5 Web Storage(localStorage(),sessionStorage())

    Web Storage包括了两种存储方式:sessionStorage和localStorage sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束 ...

  3. H5的storage(sessionstorage&localStorage)简单存储删除

    众所周知,H5的storage有sessionstorage&localStorage,其中他们的共同特点是API相同 下面直接上代码,storage中的存储与删除: <!DOCTYPE ...

  4. HTML5存储 ——Web Storage(localStorage 和 sessionStorage)

    一.localStorage对象临时储存API 方法: 1.localStorage.setItem(key,value)---设置存储内容 2.localStorage.getItem(key)-- ...

  5. web storage: sessionStorage 和 localStorage

    // sessionStorage.setItem("message",str);function saveStorage(id){ var target = document.g ...

  6. Vue.js Client-Side Storage;( Web Storage/localStorage)

    原文:https://cn.vuejs.org/v2/cookbook/client-side-storage.html LocalStorage (api) my code pen :https:/ ...

  7. web storage和cookie的区别

    Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的.Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外co ...

  8. 数据存储之Cookie和Web Storage。

    Cookie Cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).接下来就谈谈cookie的一些利弊,coo ...

  9. HTML5之WEB Storage

    什么是HTML5 web storage? 使用HTML5,web页面能够使用用户的浏览器本地保存数据. 在曾经,通常我们使用cookie来保存用户数据.然而使用web存储更加安全和高速.数据不再包括 ...

随机推荐

  1. Java生成艺术二维码也可以很简单

    原文点击: Quick-Media Java生成艺术二维码也可以很简单 现在二维码可以说非常常见了,当然我们见得多的一般是白底黑块,有的再中间加一个 logo,或者将二维码嵌在一张特定的背景中(比如微 ...

  2. Spring boot + mybatis + mysql代码生成器

    引入依赖: 在pom文件最下边: <build> <plugins> <!--逆向工程--> <plugin> <groupId>org.m ...

  3. pytest_参数化parametrize

    前言 pytest.mark.parametrize装饰器可以实现测试用例参数化. parametrizing 1.这里是一个实现检查一定的输入和期望输出测试功能的典型例子 import pytest ...

  4. Drool7s 什么叫KIE和生命周期-系列03课

    KIE是缩写,knowledge is everything.可以理解成一个上层接口,本质是由很多个实现类去实现功能的. 另外关于drool7s的生命周期,请看下图 本文只是让你了解drools7的一 ...

  5. java之hibernate之hibernate缓存

    这篇主要讲 hibernate缓存 1.缓存的作用是为了提高效率 2.Hibernate的开发效率比较高,但是执行效率相对较低. 3.Hibernate提供了缓存来提高效率.hibernate缓存分为 ...

  6. C# 获取目录路径

    Console.WriteLine(System.Windows.Forms.Application.StartupPath);//获取启动了应用程序的可执行文件的路径,不包括可执行文件的名称.(Wi ...

  7. 使用Bootstrap的popover标签中嵌入插件,并且为插件注册事件实现Ajax与后台交互

    下午研究了一下bootstrap的popover写了个例子.如果项目很多地方都需要用到可以考虑封装成插件. javascript代码: <script type="text/javas ...

  8. MVC利用JQuery异步加载PartialView

    Javascript: $("#indexList").load('/Test/Index',{"id":"1","name&qu ...

  9. python 基础(文件)

    文件句柄:可简单理解为应该内存对象 open()函数  参考 https://www.runoob.com/python3/python3-file-methods.html 读.写.追加 ''' t ...

  10. Java JAR包

    JAR文件全称 Java Archive File,意为Java档案文件.JAR文件是一种压缩文件,也被成为JAR包. 运行程序时,JVM会自动在内存中解压要用的JAR包. 使用JAR包的优点:1.安 ...