放假的前一天总是这么无聊。
枯燥的工作想放松一下,点开了QQ音乐Web版本
当我选择一个歌单的时候会弹出一个新的页面,音乐开始播放。
然后我点击另外一个歌单,播放页面竟然自动更换了歌曲,此时页面并没有刷新,并且没有Socket连接,没有Ajax请求。WTF!

寻找答案

也想过cookie,WebSocket,session。但似乎忽略了什么。

  • localStorage
  • sessionStorage

什么是 localStorage
什么是 sessionStorage

实现代码

仅上关键部分javaScript代码

  • 页面 1
1
localStorage.setItem('page1','我是页面1数据')
  • 页面 2
1
2
3
4
5
6
addEventListener('storage', e => {
// 如果localStorage 数据改变 监听事件将会被触发
// 实测 仅在相同域名下生效 且改变的值与上次的值一样此监听事件不会触发
// 实测 用 file: 协议无法正确监听 storage 事件 但是 数据可以正确写入
// 并且 file:下可以通过Chrome F12调试工具看到数据改变 就是 无法监听到数据的改变
})