使用localStorage跨頁面通信

localStorage 即使瀏覽器關閉了,數據也會被保存下來并可用于所有來自同源(相同域名、協議和端口)窗口的加載。

sessionStorage 數據存儲在窗口對象中,對于其他窗口或標簽不可見,并且當窗口關閉時,數據丟失。

sessionStorage常用于前后端分離用來記錄登錄狀態。

兩種web storage的用法相同


setItem 和GetItem

如何使用localStorage跨頁面通信呢,例如有這樣一個需求,

用戶登錄后臺,開啟了很多tab頁面。然后因為某種原因被踢下線,當前這個tab就要退出到登錄頁面,同時其他頁面也希望能退出不再顯示。

我們先開啟兩個頁面,page1和page2,兩個都是都是同源

page1監聽storage事件


監聽storage事件

page2設置localStorage


設置localStorage

打開page2的時候page1就執行了storage事件~然后可以用e.key判斷setItem的key和獲取value進行退出操作~

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。