前言HTML5标准的localstorage和sessionStorage为现代浏览器提供了用户会话级别的数据访问。它们允许你访问一个Document源（origin）的对象Storage，即在同源策略下访问数据。本文的重点不是localstorage和sessionStorageAPI的基本用法，而是一些常用库中storage的使用，提示大家思考浏览器存储访问数据的更多可能性。阅读本文你会收获什么？storageEvent事件的使用理解use-persisted-state中storage的使用文本1.storageEvent事件当当前页面使用的storage被其他页面修改时，会触发StorageEvent事件（来源MDN）。说明：符合同源策略，在同一个浏览器下的不同窗口中，当焦点页面以外的其他页面引起数据变化时，如果焦点页面监听到storage事件，则触发该事件。也就是说，除了改变数据之外，当前页面不会响应，其他窗口都会响应这个事件。2.用法window.addEventListener("storage",function(event){console.log(event);});/**事件属性：key：该属性表示修改后的键值。当通过clear()方法清除时，此属性为null。（只读）oldValue：该属性表示修改前的原始值。当设置一个新的键值对时，由于没有原来的值，所以该属性的值为null。(只读)newValue：修改后的新值。如果键已被clear()方法清除或键值对已删除，则此属性为null。url：key发生变化的对象所在文档的URL地址。（只读）*/3。Reacthook状态管理中的用法use-persisted-stateuseEventListener('storage',({key:k,newValue})=>{if(k===key){constnewState=JSON.parse(newValue);if(state!==newState){setState(newState);}}});//监控状态变化//仅在状态发生变化时保留到存储。useEffect(()=>{//保留到localStorageset(key,state);//通知此选项卡中的所有其他实例globalState.current.emit（状态）；}，[状态]）；4、同样遵守同源策略的iframeiframe中也可以使用storage事件触发，使用iframe可以解决当前页面不触发storageEvent事件的问题。解决方法如下：btn.onclick=function(){if(iframe){iframe.contentWindow.localStorage.setItem("key",val.value);}};window.addEventListener("storage",function(e){console.log(e);});functionprepareFrame(){iframe=document.createElement("iframe");document.body.appendChild(iframe);iframe.style.display="none";}prepareFrame();您还可以用storageEvent事件做什么？欢迎留言讨论注意：除IE浏览器外，所有页面都会触发storage事件。
