监听sessionStorage中值的变化
应用场景:将登录接口所返回的用户信息存入sessionStorage,在其他地方需要使用到用户信息,但不知道什么时候接口请求完,此时可以监听sessionStorage中值的变化。
应用:Event自定义事件 window.dispatchEvent();事件分发
var orignalSetItem = sessionStorage.setItem;
sessionStorage.setItem = function(key, newValue) {
var setItemEvent = new Event("setItemEvent");
setItemEvent.newValue = newValue;
window.dispatchEvent(setItemEvent);
orignalSetItem.apply(this, arguments);
};
// 获取sessionStorage中需要监听的值loginInfor
var info = sessionStorage.getItem("loginInfor");
if (info) { // 符合条件
console.log(info);
} else {
// 否则继续监听
window.addEventListener("setItemEvent", function(e) {
if ((e.key = "loginInfor")) {
var _this = sessionStorage.getItem("loginInfor");
if (_this != e.newValue) {
if (e.newValue) {
console.log(e.newValue);
console.log(_this);
}
}
}
});
}
监听sessionStorage中值的变化的更多相关文章
- js实时监听input中值的变化
$(function(){ $('#inputid').bind('input propertychange', function() { // input 中的值 var params = $(th ...
- js 实时监听input中值变化
注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...
- vue中父组件如何监听子组件值的变化
vue中我们会遇到很多父子组件通信的需求, 下面简单列一下,父子组件通信的几种情况 1:父组件向子组件传值:使用prop向子组件传值: 2:子组件实时监听父组件传来的值的变化:使用watch去监听父组 ...
- 怎样监听xhr.readyState值的变化
可以使用 xhr.onreadystatechange 属性指向的函数去监听 xhr.readyState 值的变化. 示例如下: var xhr = new XMLHttpRequest(); xh ...
- iOS: 使用KVO监听控制器中数组的变化
一.介绍: KVO是一种能动态监听到属性值的改变的方式,使用场景非常广泛,这里我只讲如何监听控制器ViewController中数组的变化. 二.了解: 首先我们应该知道KVO是不能直接监听控制器Vi ...
- 黎活明8天快速掌握android视频教程--21_监听ContentProvider中数据的变化
采用ContentProvider除了可以让其他应用访问当前的app的数据之外,还有可以实现当app的数据发送变化的时候,通知注册了数据变化通知的调用者 其他所有的代码都和第20讲的一样,不同的地方看 ...
- 监听localStorage中的数据变化
问题描述:我们在js里面获取了某一个localstorage的值,但是后期它可能改变了,我们js只执行一遍没办法再次获取它的值,当然可以刷新页面获取,但如果是我们的但页面就不能刷新页面了,此时:我们可 ...
- js监听文本框值变化事件,就oninput & onpropertychange & onkeyup & onchange的区别
在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...
- js监听input输入框值的实时变化实例
情景:监听input输入框值的实时变化实例 解决方法:1.在元素上同时绑定oninput和onporpertychanger事件 实例:<script type="text/JavaS ...
- jQuery实时监听input的值变化(input的值产生变化才会触发事件)
//用于监听input的值变化(input的值产生变化才会触发事件) (function ($) { $.fn.watch = function (callback) { return this.ea ...
随机推荐
- 24/10/13 ABC375补题笔记
A 典,属于显而易见的水题,这数据范围直接暴力做就行了. # include <bits/stdc++.h> using namespace std; int main (){ int n ...
- Windows安装Mysql后一段时间后Mysql服务无法启动的问题
本人在windows重装电脑后遇到一个比较麻烦的问题一直没有解决,今日有幸看到某大佬的博客得以解决.真实万分感激,特来分享一下. 第一次安装Mysql8.0之后,此次安装是将整个mysql包进行安装, ...
- isObjectLike:检查 value 是否是 类对象。 如果一个值是类对象,那么它不应该是 null,而且 typeof 后的结果是 "object"
function isObjectLike(value) { return value != null && typeof value == 'object';}
- mobile频段要查找、设置并获取相关参数,该怎么破?
今天我们一起来学习查找和设置mobile频段,并获取相关参数. 一.mobile概述 1.1 简介 "4G mobile"指的是第四代移动通信技术,常用于描述通过4G网络进行的 ...
- JVM的垃圾回收与内存分配
Java是一种内存动态分配和垃圾回收技术的一种语言,不需要显示的进行对象内存的分配,这一切操作都是由JVM来完成的,由于Java是"一切皆对象"的,所以对于内存分配的优化与速度非常 ...
- js之模块导入与导出:export、export default、module.exports、exports
前两者export.export default可为一组,是es6的规范,和import匹配,import是es6中的语法标准:后两者module.exports.exports可为一组,是commo ...
- laravel框架之ORM操作
Laravel 支持原生的 SQL 查询.流畅的查询构造器 和 Eloquent ORM 三种查询方式: 流畅的查询构造器(简称DB),它是为创建和运行数据库查询提供的一个接口,支持大部分数据库操作, ...
- 💥TinyPro Vue v1.1.0 正式发布:增加细粒度权限管理、页签模式、多级菜单,支持 Webpack/Vite/Rspack/Farm 多种构建工具
你好,我是 Kagol,个人公众号:前端开源星球. 视频教程:https://www.bilibili.com/video/BV1SUBRYGECg/ 为了提升前端开发效率,OpenTiny 提供了一 ...
- 面试官:来谈谈Vue3的provide和inject实现多级传递的原理
前言 没有看过provide和inject函数源码的小伙伴可能觉得他们实现数据多级传递非常神秘,其实他的源码非常简单,这篇文章欧阳来讲讲provide和inject函数是如何实现数据多级传递的.ps: ...
- Windows系统安装使用Scoop包管理器
前言 Scoop是Windows的命令行安装程序. 如果用过Linux系统,使用apt-get工具安装过软件,或者用过Python,知道pip工具用于管理Python各种依赖包,那么理解Sco ...