摘要:實現模塊有其他頁面取被清空了被修改了引用此模塊并執行拿到的函數存入獲取刪除清空此時基本實現了的基礎功能,,,,。
??sessionStorage是頁面級別的,僅在一個標簽頁生效,如果同一個瀏覽器同時打開多個標簽頁,且都訪問同一個域名,sessionStorage是不會在這多個標簽頁共用的,即每個標簽頁都有自己的sessionStorage。
??如果想突破這種局限,實現多tab頁共享存取數據同時又有sessionStorage暫存性的功能(關閉頁面時存在里面的數據也消失的功能),則需要自己通過一些技巧實現手動維護多tab頁面內存儲某個對象的數據,就是目前我想要講的方法。
??方法:通過給localStorage存儲數據,可以在全瀏覽器內捕獲一個storag的事件,然后再拿到該事件傳過來的數據進行本地修改維護,多個tab頁就以此通信,同步數據。
const MemoryStorage = class { constructor(){ this._data = {}; } setItem(k, v){ this._data[k] = v; MemoryStorage.dataSendHandler( this._data ); } getItem(k){ return this._data[k]; } removeItem(k){ delete this._data[k]; MemoryStorage.dataSendHandler( this._data ); } clear(){ this._data = {}; MemoryStorage.dataSendHandler( this._data ); } getData() { return this._data; } setData(data) { this._data = data } mergeToData(data) { for(let k in data) { this._data[k] = data[k] } } static dataSendHandler( data ){ localStorage.setItem("setMemoryStorage", JSON.stringify(data)); localStorage.removeItem("setMemoryStorage"); } static dataGetHandler(){ localStorage.setItem("getMemoryStorage", new Date().getTime()); localStorage.removeItem("getMemoryStorage"); } } const initMemoryStorage = function(){ var memoryStorage = new MemoryStorage(); window.addEventListener("storage",function(e){ if( e.newValue===null ) return false; if(e.key == "getMemoryStorage"){ console.log("有其他頁面取memory") MemoryStorage.dataSendHandler( memoryStorage.getData() ); } else if(e.key == "setMemoryStorage"){ let data = JSON.parse(e.newValue); if( isEmptyObj(data) ){ console.log("memory被清空了") memoryStorage.setData({}); }else{ console.log("memory被修改了") memoryStorage.mergeToData(data) } } }) if( isEmptyObj(memoryStorage.data) ){ MemoryStorage.dataGetHandler(); } return memoryStorage; } function isEmptyObj(obj){ for(let i in obj){ return false; } return true; } export default initMemoryStorage;
引用此模塊并執行拿到的函數
import memory from "multitabstorage" window.memoryStorage = memory(); window.memoryStorage.setItem("Auth", "as00f0e058585856d"); //存入Auth var Auth = window.memoryStorage.getItem("Auth"); //獲取Auth window.memoryStorage.removeItem("Auth"); //刪除Auth window.memoryStorage.clear(); //清空storage
此時memoryStorage基本實現了sessionStorage的基礎功能,setItem, getItem,removeItem,clear。
github地址https://github.com/JhonMr/multitabstoragenpm引入
npm install multitabstorage
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95854.html
摘要:前端存儲簡介一種在前端保存數據的思想。為了保證前端性能,一般不會保存大量數據。在手動刪除前一直存在關閉當前頁面后被清除可存放大小與服務器通信每次都在頭部信息中。 前端存儲 簡介 一種在前端保存數據的思想。第一次在頁面中的保存數據,那么從第二次開始就可以使用了。可以使用的方法有: cookie localeStorage sessionStorage ie的userData web s...
摘要:算法題現在有一組數據,一組因子,利用公式可以得到一個結果。和只能存儲字符串類型,對于復雜的對象可以使用提供的對象的和來處理應用場景用于組件之間的傳值,,則主要用于不同頁面之間的傳值。例如表示數字到,表示匹配所有的大小寫字母。 1. 算法題:現在有一組數據,一組因子a,b,c,利用公式 x*a+y*b+z*c可以得到一個結果。問怎樣可以求出因子a,b,c對結果的影響? 2. 介紹自己技術...
閱讀 1289·2023-04-25 19:33
閱讀 1171·2021-10-21 09:39
閱讀 3644·2021-09-09 09:32
閱讀 2614·2019-08-30 10:58
閱讀 1599·2019-08-29 16:17
閱讀 873·2019-08-29 15:29
閱讀 2885·2019-08-26 11:55
閱讀 2658·2019-08-26 10:33