Sessionstorage 資料共享

admin發表於2019-10-22
Session

關於此儲存方式用法總體介紹可以參閱sessionStorage 用法一章節。

本文專注於介紹一下如何實現sessionStorage 儲存資料的共享。

一.sessionStorage 儲存資料的特點：

localStorage儲存的資料能夠在客戶端本地永久儲存。

同域的任何頁面都可以訪問到localStorage儲存的資料。

但sessionStorage 與localStorage有著較大的不同，簡述如下：

（1）.sessionStorage 受到同源策略限制。

（2）.sessionStorage 儲存資料還受到瀏覽器選項卡的限制。

（3）.手動新開一個選項卡，即便同域同URL，也不會共享sessionStorage 資料。

（4）.當前選項卡關閉，sessionStorage 中儲存的資料也隨之被銷燬。

二.資料共享方式：

首先要明確一個概念，在新選項卡或者視窗開啟一個新的頁面，會新建立一個sessionStorage 會話。

上文闡述過，手動新開一個選項卡，即便同域同URL，也不會共享Sessionstorage資料。

但是並不是說就沒有辦法共享sessionStorage 儲存的資料，準確的說不是共享，而是拷貝一份。

（1）.通過手動方式新開一個選項卡或者視窗不會共享資料。

（2）.通過JavaScript或者連結<a>標籤開啟同源頁面會共享資料（準確說是拷貝一份），兩者是獨立的。

假設A頁面通過sessionStorage 儲存一些資料，頁面中有一個連結<a>指向同源的B頁面。

點選連結，在新的選項卡開啟B頁面，那麼A頁面的資料會被B頁面共享（事實是拷貝了一份）。

兩個頁面的資料是相互獨立的，在B頁面刪除一條記錄，並不會影響A頁面中的資料。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
sessionStorage.setItem("name","螞蟻部落");
sessionStorage.setItem("url","www.softwhy.com");
sessionStorage.setItem("address","青島市南區");
</script>
</head>
<body>
  <div></div>
  <a href="B.html" target="_blank">B頁面</>
</body>
</html>

對上述程式碼分析如下：

（1）.首先，新增三條本地儲存資料。

（2）.然後，點選連結<a>元素，跳轉到同源的B.html頁面。

（3）.此時，你會發現B頁面拷貝了一份A頁面的sessionStorage 資料。

（4）.特別注意的是，這兩份資料是完全獨立的，各自的操作不會影響對方。

相關文章