js 单页面及不同页面监听 storage 改变

news/2024/9/3 0:31:42

    • 同源不同页面
    • 同一个页面

同源不同页面

  • 同一浏览器打开了两个同源页面
  • 其中一个网页修改了localStorage
  • 另一网页注册了storage事件

网页A:监听了storage事件:

window.addEventListener("storage", function (e) {
   alert(e.newValue);
});

网页B:修改了localStorage

localStorage.setItem('foo', 'bar');

同一个页面

var orignalSetItem = localStorage.setItem;
localStorage.setItem = function(key,newValue){
    var setItemEvent = new Event("setItemEvent");
    setItemEvent.key = key;
    setItemEvent.newValue = newValue;
    setItemEvent.oldValue = localStorage.getItem(key);
    window.dispatchEvent(setItemEvent);
    orignalSetItem.apply(this,arguments);
}
window.addEventListener("setItemEvent", function (e) {
    console.log('key: '+e.key);
    console.log('newValue: '+e.newValue);
    console.log('oldValue: '+e.oldValue);
});
localStorage.setItem("nm","1234");

http://www.niftyadmin.cn/n/1584485.html

相关文章

Centos7安装Jekyll

2019独角兽企业重金招聘Python工程师标准>>> 安装ruby 教程链接 安装RubyGems yum install gem使用以下命令替换 gems 默认源 # 添加 TUNA 源并移除默认源 gem sources --add https://mirrors.tuna.tsinghua.edu.cn/rubygems/ --remove https://rubygems.org/ # 列出…

js 原生ajax封装

/*通用的ajax请求函数param type get、post 请求方式param url param isAsync true false true:异步,false:同步param data objectparam callback function*/function doAjax(type, url, isAsync, data, callback) {//创建通信对象var xh…

OpenCV C使用问题

在开发板上安装了OpenCV 3.4,因为使用OpenGL ES 2.0的问题,使用cpp会造成编译错误,所以项目开始就使用C编码,当开始加入图片处理功能的时候(基于OpenCV)又出问题了,编译提示 /usr/include/openc…

手机端rem配置及媒体查询

手机端rem配置及媒体查询手机端meta标签配置rem根据页面宽度调整根字体大小媒体查询px2rem插件在vue中的使用方法&#xff08;把px转换为rem&#xff09;手机端meta标签配置 <meta name"viewport" content"widthdevice-width, initial-scale1, maximum-scal…

ArcEngine开发遇到的问题(转)

ArcEngine开发遇到的问题 https://blog.csdn.net/u013751758/article/category/6971559 转载 2018年02月11日 17:28:1116arcengine创建shp:http://127.0.0.1:47873/help/1-116/?methodpage&ideaglrfSnippetsCreateFeatureClass&productvs&productversion100&l…

bootstrap模态框的使用 及 解决多个模态框嵌套出现滚动条错乱问题

模态框的使用模板 新建aaa.html <div class"modal fade" id"myModal" tabindex"-1" role"dialog" aria-labelledby"myModalLabel" aria-hidden"true"><div class"modal-dialog" style"…

1字节opcode对照表_IMG

转载于:https://blog.51cto.com/haidragon/2097468

js 数组去重常用办法

数组去重简单的去重方法对象键值法去重es6 New set() 方法去重简单的去重方法 /* * 新建一新数组&#xff0c;遍历传入数组&#xff0c;值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ function uniq(array){var temp []; //一个新的临时数组for(var…