【一文一问】通过LocalStorage实现页面间通信

Mayyyyyyyy
433 阅读3分钟

一个函数实现一个功能，一篇文章解决一个问题

一，背景：

点击A页面，另开页签B页面，在B页面完成一系列用户操作后，关闭B页面的同时，向A页面发消息，让A页面做一些操作

二，基础知识：

1，Window.localStorage定义

localStorage 属性允许你访问一个Document 源（origin）的对象 Storage，并将数据保存在浏览器会话中

2，Window.localStorage语法

let localStorage= window.localStorage
//增加数据项
localStorage.setItem('myCat', 'Tom'); //注：localstorage为标准的键值对（Key-Value）数据类型
//读取数据项
let cat = localStorage.getItem('myCat');
//移除数据项
localStorage.removeItem('myCat');
// 移除所有
localStorage.clear();
// 监听LocalStorage变化
window.addEventListener('storage', () => {
});
window.onstorage = () => {
};

三，方法：

// Page A
 window.addEventListener('storage',(e)=>{
      if(e.key === 'closeTab'){
        let data = JSON.parse(e.newValue)
        console.log('storage data',data)
        if(data === 'closeTab'){
          console.log('关闭A页面', )
        }
      }
    })
 // Page B
 window.localStorage.setItem('closeTab', JSON.stringify('closeTab'))
 //注：需将想要存储进localstorage的数据转化成字符串。举例：把对象转换成json字符串，就能存储对象了；把图片转换成DataUrl（base64），就可以存储图片了。另外对于键值对数据类型来说，"键是唯一的"这个特性也是相当重要的，重复以同一个键来赋值的话，会覆盖上次的值。

四，延申

1,cookie sesstionStorage localStorage区别与联系

cookiesesstionStoragelocalStorage
定义HTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上sessionStorage 属性允许你访问一个，对应当前源的 session Storage对象。它与 localStorage) 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除只读的localStorage 属性允许你访问一个Document源（origin）的对象 Storage)；存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage)，但其区别在于：存储在 localStorage 的数据可以长期保留
语法new Cookie(key,value)、setMaxAge()、addCookie()setItem(key,kalue)、getItem(key)、removeItem(key)、clear()setItem(key,kalue)、getItem(key)、removeItem(key)、clear()
大小4kb5M5M
生命周期一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效仅在当前会话下有效，关闭页面或浏览器后被清除除非被清除，否则永久保存
与服务器端通信每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题仅在客户端（即浏览器）中保存，不参与和服务器的通信仅在客户端（即浏览器）中保存，不参与和服务器的通信

五，参考资料：

avatar
文章
阅读
粉丝