html5 storage事件

时间:2022-05-11 23:42:10

HTML5 虽然很多年了,但是真的了解不不够不够。主题说的是 storage时间,说起对 storage 事件的了解还是从 QQ音乐 说起。

QQ音乐的主页是 https://y.qq.com , 而实际播放的页面是 https://y.qq.com/portal/player.html。你在其他里面点击播放或者添加的时候,你会发现 https://y.qq.com/portal/player.html 会实时的变化。当前我想,这个神奇啊,

当前想法是如下,可是怎么想都比较low啊。

1. 存入 localStorage 或者 indexedDB里面,然后定期读取呢?

2. socket开启呢?

3. 中间服务中转呢?

曾有同事偶然间提到到storage事件,当时也上心。前两天无意中看到一篇  h5 storage事件监听 的文章。

顺便再去探究一下 QQ音乐。

html5 storage事件html5 storage事件

点击播放歌曲的时候,在player.html页面即播放页面捕获的数据。这就完全验证了 QQ音乐这个添加音乐的实现就是基于 storage事件来完成的。

html5 storage事件

那么我们先来看一下, storage event的定义  The storage event。 简单就是说 session storage 和 local storage 的值变化的时候,会触发该事件。

The storage event is fired on a Document's Window object when a storage area changes, as described in the previous two sections (for session storagefor local storage).

When a user agent is to send a storage notification for a Document, the user agent must queue a task to fire an event named storage at the Document object's Windowobject, using StorageEvent.

怎么使用呢:

A页面

window.addEventListener("storage", function (e) {
console.log(e)
});

B 页面

 localStorage.setItem('key1', 'vakue1')

B页面执行这段代码的时候, A页面就会打出e整个对象。

我们看一下e究竟有哪些属性或者方法,注意标红的五个属性,其实的都是普通事件都有的属性,

  key: 不用解释,更新的属性名

newValue: 新值

oldValue : 旧值

storageArea:  我这里理解就是localStorage的值

url: 触发该事件的网址

html5 storage事件

这里有两点:

1.  当localStorage调用 setItem, removeItem ,clear方法的时候,调用的页面本身是不会触发storage事件的。

2. 如果想调用页面也能监听localStorage的变化,可以像如下,当然removeItem ,clear方法也得重写。显得有点麻烦

   var _setItem = localStorage.setItem;
localStorage.setItem = function(key,newValue){
var setItemEvent = new Event("setItemEvent");
setItemEvent.newValue = newValue;
window.dispatchEvent(setItemEvent);
_setItem .apply(this,arguments);
}
window.addEventListener("setItemEvent", function (e) {
console.log(e)
});
localStorage.setItem("key1","value1");

当然,我自己也用过另外一种方式

   var ls = new Proxy(localStorage, {
get: function (target, key, receiver) {
var val = Reflect.get(target, key, receiver)
return typeof val === 'function' ? val.bind(localStorage) : val
},
set: function (target, key, value, receiver) { var evt = document.createEvent('StorageEvent');
evt.initStorageEvent('storage', false, false, key, window.localStorage.getItem(key), value, window.location.href, window.localStorage);
window.dispatchEvent(evt); return Reflect.set(target, key, value , receiver) },
deleteProperty: function (target, key) { var evt = document.createEvent('StorageEvent');
evt.initStorageEvent('storage', false, false, key, window.localStorage.getItem(key), null, window.location.href, window.localStorage);
window.dispatchEvent(evt) Reflect.deleteProperty(target, key)
}
}) window.addEventListener('storage', function (e) {
console.log(e)
}) ls.a = 2
delete ls.a

  

已知的一些问题:

  1. Storing large amounts of data in Safari (on OSX & iOS) can result in freezing the browser see bug
  2. IE10 in Windows 8 has an issue where localStorage can fail with the error message "SCRIPT5: Access is denied" if "integrity" settings are not set correctly. see details
  3. Internet Explorer does not support storing most of the ASCII characters with codes under x20.
  4. The "storage" event is completely wrong in IE: 
    IE10 : The storage event is fired even on the originating document where it occurred. Causes problems with multiple windows websites, and huge problems with iframes.
    IE11 : The storage event's oldValue and newValue are identical (newValue is supposed to contain the storage's updated value). 

    Partial workaround: regularly probe the storage's value and compare with the last known value on all pages where you want to listen to this event, and track the last submitted value to determine if the modification was triggered locally.

  5. In IE attempting to access localStorage on HTML files served from the file system results in the localStorage object being undefined
  6. In iOS 5 & 6 localStorage data is stored in a location that may occasionally be cleared out by the OS.
  7. In private browsing mode, Safari and iOS Safari up to including version 10.x as well as the Android browser (not include Chrome for Android) do not support setting sessionStorage or localStorage.
  8. IE 8 and 9 store data based only on hostname, ignoring the scheme (http vs https) and port number as required by the specification.

参考:

The storage event

StorageEvent

初试WebStorage之localstorage

Can I Use LocalStorage

initStorageEvent method

 

html5 storage事件的更多相关文章

  1. HTML5 storage事件监听

    引用<h5移动web开发指南>上的话: “当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件,就会触发” 所以,localStorage  st ...

  2. sessionStorage html5客户端本地存储之sessionStorage及storage事件

    可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相识,方 ...

  3. html5客户端本地存储之sessionStorage及storage事件

    首先您可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相 ...

  4. Web Storage事件无法触发

    不管是在同源其他页面还是在本页面都不能触发storage事件. <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  5. localStorage、sessionStorage详解,以及storage事件使用

    有关localStorage和sessionStorage的特性. localStorage本身带有方法有 添加键值对:localStorage.setItem(key,value),如果key存在时 ...

  6. localStore的storage事件

    两个浏览器窗口间通信   两个浏览器窗口间通信 补充一下,这里的通讯指遵守同源策略情况下. 为了吸引读者的兴趣,先把demo放到前面:下面有几个我自己写的演示多页面通讯的demo, 为了正常运行,请用 ...

  7. 一篇文章图文并茂地带你轻松学会 HTML5 storage

    html5 storage api localStorage 和 sessionStorage 是 html5 新增的用来存储数据的对象,他们让我们可以以键值对的形式存储信息. 为什么要有 stora ...

  8. html5 touch事件实现触屏页面上下滑动&lpar;二&rpar;

    五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...

  9. HTML5 Storage API

    原文:HTML5 Storage API Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多. 在 ...

随机推荐

  1. 谷歌chrome浏览器www&period;tradeadexchange&period;com广告弹窗跳转劫持病毒

    近期大量网友出现chrome浏览器被劫持的情况,表现如下:           ·  点击(访问)任意网站任意链接均有概率弹出www.tradeadexchange.com.           ·  ...

  2. ecshop程序结构说明

    文件夹说明 名称 备注(作用或意义) 根目录 前台程序文件 admin 后台程序文件 admin/help 功能的帮助文件 admin/images 后台页面用图片 admin/includes 后台 ...

  3. 【转】PHP error&lowbar;reporting&lpar;&rpar; 错误控制函数功能详解

    定义和用法: error_reporting() 设置 PHP 的报错级别并返回当前级别.   函数语法: error_reporting(report_level)   如果参数 level 未指定 ...

  4. jsp中文件下载的实现

    jsp中实现文件下载的最简单的方式是在网页上做超级链接,如:<a href="music/abc.mp3">点击下载</a>.但是这样服务器上的目录资源会直 ...

  5. PKUSC2015总结

    突然发现这是自己第100篇博客...写下总结庆祝一下好啦 首先就是..D类狗果真没*啊啊啊.考的辛辛苦苦结果因为D类拿不到一个好协议真的是哭瞎辣QAQ 然后就是..自己真的是太弱啊啊啊..各种傻逼题 ...

  6. python学习--Linux下dlib安装&lpar;主要是cmake和boost的安装&rpar;

    昨天我们使用了dlib和opencv进行了人脸检测标注(http://www.cnblogs.com/take-fetter/p/8310298.html) 但是运行环境是基于windows的而且可能 ...

  7. nginx配置ssl证书实现https访问

    一,环境说明 服务器系统:ubuntu16.04LTS 服务器IP地址:47.89.12.99 域名:bjubi.com 二,域名解析到服务器 在阿里云控制台-产品与服务-云解析DNS-找到需要解析的 ...

  8. LinuxMint上安装redis和python遇到的一些问题

    今天在安装Redis和Python上遇到了些问题,解决后记录下来. 环境:LinuxMint 18.3 安装redis sudo wget http://download.redis.io/relea ...

  9. CF1139C Edgy Trees

    题目地址:CF1139C Edgy Trees 红黑树 \(ans\) 应该等于总数(\(n^k\))减去不含黑色边的序列数量 不含黑色边就意味着一个序列只能在一个红色联通块中 一个红色联通块中的序列 ...

  10. postman基本使用

    一.安装 官网:https://www.getpostman.com/ Postman是一个Chrome的一个插件工具,我们可以通过Chrome的应用商店进行进行搜索并安装,安装完成会在桌面上显示一个 ...