多頁面共用sessionStorage的實現

2022-08-05 18:54:10 字數 1413 閱讀 9741

sessionstorage的侷限:

sessionstorage是頁面級別的,僅在乙個標籤頁生效,如果同乙個瀏覽器同時開啟多個標籤頁,且都訪問同乙個網域名稱,sessionstorage是不會在這多個標籤頁共用的,即每個標籤頁都有自己的sessionstorage。

如果想突破這種侷限,實現多tab頁共享訪問資料同時又有sessionstorage暫存性的功能(關閉頁面時存在裡面的資料也消失的功能),則需要自己通過一些技巧實現手動維護多tab頁面內儲存某個物件的資料,就是目前我想要講的方法。

方法:通過給localstorage儲存資料,可以在全瀏覽器內捕獲乙個storag的事件,然後再拿到該事件傳過來的資料進行本地修改維護,多個tab頁就以此通訊,同步資料。

實現(es6 模組)

const memorystorage =  class ;

}setitem(k, v)

getitem(k)

removeitem(k)

clear();

memorystorage.datasendhandler( this.data );

}static datasendhandler( data )

static datagethandler()

}const initmemorystorage = function()

else if(e.key == 'setmemorystorage');

}else}}

})if( isemptyobj(memorystorage.data) )

}function isemptyobj(obj)

return true;

}export default initmemorystorage;

引用此模組並執行拿到的函式

import memory from 'memory_storage'

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。

單頁面多頁面區別

單頁面與多頁面的區別 單頁面多頁面 組成 有乙個主要頁面和其他片段頁面組成 由多個完整頁面組成 css js公用載入 每個頁面都分開載入 url模式 a.com pageone a.com pagetwo url模式 a.com pageone.html a.com pagetwo.html 重新整...

vue 多頁面應用例子 vue 如何實現多頁面應用

其實我孤獨的像條狗 再此我先說明 我寫的這個例子是乙個成熟的專案中直接加入的,裡面有好多配置都是配好的 但是這些都不重要,因為沒有太大的關係,進入正題 我們平時開發 vue專案的時候,就有一種感覺就是 vue就像是專門為單頁應用而誕生的,因為人家的官方文件中也說了 在這裡插入描述 其實不是的,因為v...

利用Ajax的非同步實現多指令碼共用

小弟第一次寫文章,希望各位大神不要噴。有什麼不對的地方,希望大家能提出來,共同進步 舉例說明 html input1 input2 input3 php header content type text html charset utf 8 a int get text sleep a echo g...