html5storage事件
HTML5 虽然很多年了，但是真的了解不不够不够。主题说的是 storage时间，说起对 storage 事件的了解还是从说起。
当前想法是如下，可是怎么想都⽐较low啊。
1. 存⼊ localStorage 或者 indexedDB⾥⾯，然后定期读取呢？
2. socket开启呢？
3. 中间服务中转呢？
曾有同事偶然间提到到storage事件，当时也上⼼。前两天⽆意中看到⼀篇的⽂章。
顺便再去探究⼀下 QQ⾳乐。
点击播放歌曲的时候，在player.html页⾯即播放页⾯捕获的数据。这就完全验证了 QQ⾳乐这个添加⾳乐的实现就是基于 storage事件来完成的。
那么我们先来看⼀下， storage event的定义。简单就是说 session storage 和 local storage 的值变化的时
候，会触发该事件。
The  event is fired on a 's  object when a storage area changes, as described in the previous two sections (, ).
When a user agent is to send a storage notification for a , the user agent must  to  named  at the  object's object, using .
怎么使⽤呢：
A页⾯
window.addEventListener("storage", function (e) {
console.log(e)
});
B 页⾯
localStorage.setItem('key1', 'vakue1')
B页⾯执⾏这段代码的时候， A页⾯就会打出e整个对象。
我们看⼀下e究竟有哪些属性或者⽅法，注意标红的五个属性，其实的都是普通事件都有的属性，
  key: 不⽤解释，更新的属性名
newValue: 新值
oldValue : 旧值
storageArea:  我这⾥理解就是localStorage的值
url: 触发该事件的⽹址
这⾥有两点：
1.  当localStorage调⽤ setItem, removeItem ,clear⽅法的时候，调⽤的页⾯本⾝是不会触发storage事件的。
2. 如果想调⽤页⾯也能监听localStorage的变化，可以像如下，当然removeItem ,clear⽅法也得重写。显得有点⿇烦sessionstorage和localstorage
var _setItem = localStorage.setItem;
localStorage.setItem = function(key,newValue){
var setItemEvent = new Event("setItemEvent");
window.dispatchEvent(setItemEvent);
_setItem .apply(this,arguments);
}
window.addEventListener("setItemEvent", function (e) {
console.log(e)
});
localStorage.setItem("key1","value1");
当然，我⾃⼰也⽤过另外⼀种⽅式，这种⽅法，遗憾的是， localStorage被代理，导致 ls调⽤⽅法都会报错，导致 ls现在是⼀个对象了。        var ls = new Proxy(localStorage, {
get: function (target, key, receiver) {
var val = (target, key, receiver)
return val && JSON.parse(val)
},
set: function (target, key, value, receiver) {
var evt = ateEvent('StorageEvent');
evt.initStorageEvent('storage', false, false, key, Item(key), value, window.location.href, window.localStorage);
window.dispatchEvent(evt);
return Reflect.set(target, key, value && JSON.stringify(value), receiver)
},
deleteProperty: function (target, key) {
var evt = ateEvent('StorageEvent');
evt.initStorageEvent('storage', false, false, key, Item(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
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.
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.参考：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。