redux vuex 這個是單頁面應用裡跨頁面狀態管理 多頁應用 跨頁面資料傳遞本題主要考察多頁應用中各個頁籤之間資料互動的技術手段。
實現多頁通訊主要有利用
在乙個標籤頁裡面使用localstorage.setitem(key,value)新增(修改、刪除)內容;在另乙個標籤頁裡面監聽storage事件。即可得到localstorge儲存的值，實現不同標籤頁之間的通訊。
// 新增
localstorage.setitem(key,value)
// 刪除
localstorage.removeitem(key,value)
// 新增監聽 storage 的變化
window.onload = function () )
}
在a頁面將需要傳遞的訊息儲存在cookie當中
在b頁面設定setinterval,以一定的時間間隔去讀取cookie的值。(不停地問cookie)
// 設定 cookie
document.cookie = "name=" + name;
// 獲取 cookie
function
getcookie(key) '[key];
return
json.parse(_string);
}
websocket 是html 5新增的協議，它的目的是在瀏覽器和伺服器之間建立乙個不受限的雙向通訊的通道，比如說，伺服器可以在任意時刻傳送訊息給瀏覽器。
為什麼傳統的http協議不能做到websocket實現的功能?這是因為http協議是一乙個請求-響應協議，請求必須先由瀏覽器發給伺服器，伺服器才能響應這個請求，再把資料傳送給瀏覽器。
也有人說，http協議其實也能實現啊，比如用輪詢或者comet。這個機制的缺點一是實時性不夠, 二是頻繁的請求會給伺服器帶來極大的壓力。comet本質上也是輪詢，但是在沒有訊息的情況下，伺服器先拖一段時間， 等到有訊息了再回覆。這個機制暫時地解決了實時性問題，但是它帶來了新的問題：以多執行緒模式執行的伺服器會讓大部分執行緒大部分時間都處於掛起狀態，極大地浪費伺服器資源。另外，乙個http連線在長時間沒有資料傳輸的情況下，鏈路上的任何乙個閘道器都可能關閉這個連線,而閘道器是我們不可控的，這就要求comet連線必須定期發一些ping資料表示連線正常工作」。
websocket並不是全新的協議，而是利用了http協議來建立連線。
為什麼websocket連線可以實現全雙工通訊而http連線不行呢?
實際上通訊協議是建立在tcp協議之上的, tcp協議本身就實現了全雙工通訊，但是http協議的請求-應答機制限制了全雙工通訊。websocket連線建立以後，其實只是簡單規定了一下:接下來，咱們通訊就不使用http協議了，直接互相發資料吧。安全的websocket連線機制和https類似。首先，瀏覽器用wss://xx建立websocket連線時， 會先通過https建立安全的連線，然後，該https連線公升級為websocket連線，底層通訊走的仍然是安全的ssl/tls協議。
websocket連線必須由瀏覽器發起，特點:
(1)建立在 tcp 協議之上，伺服器端的實現比較容易。
(2)與 http 協議有著良好的相容性。預設埠也是80和443，並且握手階段採用 http 協議，因此握手時不容易遮蔽，能通過各種 http **伺服器。
(3)資料格式比較輕量,效能開銷小，通訊高效。
(4)可以傳送文字，也可以傳送二進位制資料。
(5)沒有同源限制，客戶端可以與任意伺服器通訊。
(6)協議識別符號是ws (如果加密,則為wss)，伺服器**就是url。
示例：瀏覽器端**
// create websocket connection.
const socket = new websocket("ws://localhost:8080");
// connection opened
socket.addeventlistener("open", function (event) );
// listen for messages
socket.addeventlistener("message ", function (event) );
new worker()即可建立，這種 webworker 是當前頁面專有的。然後還有種共享 worker(sharedworker)，這種是可以多個標籤頁、iframe共同使用的。sharedworker 可以被多個 window 共同使用，但必須保證這些標籤頁都是同源的(相同的協議，主機和埠號)
首先新建乙個is檔案worker.js, 具體**如下: .
// shareworker 所要用到的js檔案，不必打包到專案中，直接放到伺服器即可
let data = " ";
let onconnect = function (event) else
};};
try );
worker.port.start();
setbtn.addeventlistener(
"click",
function (e) ,
false
);getbtn.addeventlistener(
"click",
function (e) ,
false
);} catch (error)
瀏覽器內多個標籤頁之間的通訊
呼叫localstorge cookies等本地儲存方式。方法一 localstorge在乙個標籤頁裡被新增 修改或刪除時，都會觸發乙個storage事件，通過在另乙個標籤頁裡監聽storage事件，即可得到localstorge儲存的值，實現不同標籤頁之間的通訊。標籤頁1 標籤頁 2 方法二 使用...
如何實現瀏覽器內多個標籤頁之間的通訊
呼叫 localstorge cookies 等本地儲存方式 方法一 使用localstorage 使用localstorage.setitem key,value 新增內容 使用storage事件監聽新增 修改 刪除的動作 window.addeventlistener storage funct...
瀏覽器切換標籤頁的方法
方法一 快捷鍵切換標籤頁 我們使用快捷鍵 ctrl 數字 就可以快速切換谷歌瀏覽器的標籤頁了，例如 ctrl 1是切換到第乙個標籤，ctrl 2是切換到第二個標籤，依次類推，但是ctrl 9不是第九個標籤頁，而是最後乙個標籤頁。換一種解釋方法就是，ctrl鍵加上數字鍵1 8對應的是第一到第八個標籤，...