运用Storage Event完成网页页面间通讯的示例编码

日期:2020-10-10 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

大家都了解开启window.onstorage务必考虑下列两个标准:

  • 根据localStorage.setItem或sessionStorage.setItem储存(升级)某个storage
  • 储存(升级)这个storage时,它的新值务必与以前的值不一样

上面的第2个标准,简易来说便是:要末是storage的原始化,由于不存在的storage,其值为null;要末便是对已有storage的升级

举例:

// 原始化storage
window.localStorage.setItem('a', 123);

// 申请注册onstorage恶性事件
window.onstorage = (e) => {
  console.log(e);
};

// 升级storage
window.localStorage.setItem('a', 123);

上面的最终1行编码其实不会开启onstorage恶性事件,由于a的值并沒有转变,前后左右全是123,因此访问器判断这次升级是失效的

因为onstorage恶性事件是访问器开启的,因此假如大家开启了好几个同样网站域名下的网页页面,并在这其中任11个网页页面实行window.localStorage.setItem方式(还要确保考虑文章内容开始提到的第2个标准),那末别的网页页面假如监视了onstorage恶性事件,则这些网页页面中的onstorage恶性事件回调函数都会被实行

举例:

// http://www.example.com/a.html
<script>
// 申请注册onstorage恶性事件
window.onstorage = (e) => {
  console.log(e);
};
</script>
// http://www.example.com/b.html
<script>
// 申请注册onstorage恶性事件
window.onstorage = (e) => {
  console.log(e);
};
</script>
// http://www.example.com/c.html
<script>
// 开启onstorage恶性事件
window.localStorage.setItem('a', new Date().getTime());
</script>


要是确保c网页页面在a和b网页页面以后开启(哪怕3个网页页面不在同1访问器对话框,这里必须差别对话框与tab页的差别),那末a和b网页页面中的onstorage恶性事件都会被开启

如今大家早已了解怎样运用storage event完成了网页页面之间的通讯,那末这个通讯针对大家有何主要用途呢?

实际上大家只需了解是哪一个storage的升级实际操作开启了onstorage恶性事件就充足了,那末大家怎样了解呢?onstorage恶性事件回调函数和别的恶性事件回调函数涵数1样,也接受1个event目标主要参数,在这个目标中有3个有效的特性,它们各自是:

  • key 被原始化或升级的storage的键名
  • oldValue 被原始化或升级的storage以前的值
  • newValue 被原始化或升级的storage以后的值

融合这3个重要特性,大家便可以完成网页页面间的数据信息同歩

最终提1下localStorage与sessionStorage的差别

localStorage 里边储存的数据信息沒有到期時间设定,而储存在 sessionStorage 里边的数据信息在网页页面对话完毕时会被消除

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。