多頁面通訊問題

2022-03-09 08:33:25 字數 1594 閱讀 5458

使用cookie,使用web worker,使用localestorage和sessionstorage

cookie,相容性很好,但是大概4kb.同時,cookie可以永久存在,也可以再回話結束後結束。要就關閉標籤頁回話立即結束時,不要用cookie,因為它還很有可能會存在一段時間,即使是session-cookie。

使用者在瀏覽器輸入url,傳送請求,伺服器接受請求

伺服器在響應報文中生成乙個set-cookie報頭,發給客戶端

瀏覽器取出響應中set-cookie中內容,以cookie.txt形式儲存在客戶端

如果瀏覽器繼續傳送請求,瀏覽器會在硬碟中找到cookie檔案,產生cookie報頭,與http請求一起傳送.

伺服器接受含cookie報頭的請求,處理其中的cookie資訊,找到對應資源給客戶端.

瀏覽器每一次請求都會包含已有的cookie.

sessionstorage:不支援跨標籤頁共享資料。比如,每次新開啟乙個標籤頁都要求使用者重新登入。

localstorage:此處作者用localstorage事件來解決這個問題。思路:當開啟乙個新的標籤頁的時候,先詢問是否有sessionstorage。如果有,現有標籤頁通過localstorage事件向新頁面傳遞sessionstorage,新頁面獲取後設定。

在標籤頁中有如下**

(function()

else if(event.key=="sessionstorage"&& !sessionstorage.length)}}

;}

})()

不同的標籤頁

方法一第乙個頁面設定cookie

用document.cookie=」name=」+name;

第二個頁面獲得

function getcookie(key) ");//g,全域性  i忽略大小寫 m多行搜尋

}setinterval(getcookie(key),1000);

方法二利用localstorage設值傳遞。

localstorage.setitem(key,value);

呼叫 localstorge、cookies 等本地儲存方式方法一:使用localstorage

使用localstorage.setitem(key,value);新增內容

使用storage事件監聽新增、修改、刪除的動作   

window.addeventlistener("storage",function(event));
方法

二、使用cookie+setinterval  

$(function());  

});

//獲取cookie天的內容

function getkey(key) ")[key];

} //每隔1秒獲取cookie的內容

setinterval(function(),1000);

以上都是引用其他部落格中的內容,我在這只是記錄的作用

JS多頁面間通訊

接到這個需求的時候,先去某雲 看了一下,用的應該是websocket。給領導反饋一下後,領導說後端騰不出資源配合。那只能先排除這種方案了。當時的思路是這樣的 說的挺囉嗦,簡言之,就是監聽localstorage的storage事件,和頁面的關閉事件,去做出不同的反應。下面是 模擬該情況 乙個主頁,表...

如何實現electron多頁面間通訊

總共有兩個頁面,頁面a顯示資料,頁面b處理資料,主線程main 在主線程中開啟頁面a和b,b頁面不進行顯示,主要負責處理從a頁面傳送到主線程main上的資料,然後b將資料處理完成之後,再次將資料送到主線程main上,主線程main將資料再將資料 到頁面a上,頁面a進行資料展示。注意 在electro...

vue cli 跨域問題 多頁面

vue.config.js 配置 建立config專案和src同一級別 config中的 配置反向 解決跨域問題 例如 ajax target 表示uri module.exports foo 請求 如下 在index.html 同級別建立所需的頁面 例如other.html 在main.vue 同...