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

2021-02-23 05:26 jianzhan

大家都了解开启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 里边的数据信息在网页页面对话完毕时会被消除

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

为您推荐