利用sessionStorage來做頁面之間的通訊

2021-10-01 17:25:13 字數 1997 閱讀 4852

上篇剛說了下localstorage怎麼在兩個不同的頁面之間做通訊以及他們通訊成功的幾個條件,今天就順便講下sessionstorage是怎麼做的。sessionstosrage 這個語法跟localstorage是一樣的,如下:

// 儲存資料到 sessionstorage

sessionstorage.

setitem

('key'

,'value');

// 從 sessionstorage 獲取資料

let data = sessionstorage.

getitem

('key');

// 從 sessionstorage 刪除儲存的資料

sessionstorage.

removeitem

('key');

// 從 sessionstorage 刪除所有儲存的資料

sessionstorage.

clear()

;

但是sessionstorage還是有幾個跟localstorage不同的地方:

1.儲存時間的時效性,localstorage生命週期是永久,這意味著除非使用者手動清除localstorage資訊,否則這些資訊將永遠存在,sessionstorage生命週期為當前視窗或標籤頁,一旦視窗或標籤頁被永久關閉了,那麼所有通過sessionstorage儲存的資料也就被清空了。

2.相同瀏覽器的不同頁面或者標籤頁可以共享相同的localstorage(頁面屬於相同網域名稱,協議和埠),但是相同瀏覽器的不同頁面或標籤頁間卻無法共享sessionstorage的資訊(頁面也是屬於相同網域名稱,協議和埠)

相信大家對一條應該都知道,如果不理解上面所說的第2條,沒有關係,直接上個非常簡單的demo,估計大家都會懂了

<

!doctype html>

"en"

>

"utf-8"

>

pagea<

/title>

<

/head>

//我在sessionstorage存入了乙個token

sessionstorage.

setitem

('token'

,new

date()

.gettime()

);<

/script>

<

/body>

<

/html>

先在pagea往sessionstorage儲存乙個token,然後在pageb取得這個值

<

!doctype html>

"en"

>

"utf-8"

>

pageb<

/title>

<

/head>

//取得這個存入的token

alert

(sessionstorage.

getitem

('token'))

;<

/script>

<

/body>

<

/html>

我們發現在pageb彈出的是乙個null,根本取不到這個值,如果把取值操作放在pagea頁面,那麼是可以獲取到這個token的值的,這正好說明了第2點:

相同瀏覽器的不同頁面或標籤頁間無法共享sessionstorage的資訊(即使頁面也是屬於相同網域名稱,協議和埠)
如果是在pagea往localstorage儲存這個token, 那麼在pageb是可以取得這個token的值

總結:sessionstorage做不了跨頁面之間的通訊,但是在同個頁面下做設值跟取值的操作是可以的,大家可以根據業務場景需要,選擇合適的儲存的方法就可以了,那就真的沒有辦法實現sessionstorage多頁面的資料共享了嗎,答案是否定的。下篇就講講怎麼在瀏覽器的多個tab頁中共享sessionstorage。

vue 全域性監聽sessionStorage變化

一 首先新建乙個global.js 檔案 我的js 檔案為這個名字,名字自己定義 export default vue.prototype.resetsetitem function key,newval return storage.setitem key,newval 第二步 將你的js 檔案匯...

HTML5中的sessionStorage使用示例

sessionstorage作為html5的web storage的兩種儲存方式之一。用於本地儲存乙個會話 session 中的資料,這些資料只有在同乙個 會話中的頁面才能訪問並且當會話結束後資料會被銷毀。不是一種持久化的本地儲存。會話級的儲存。1 介面 sessionstorage.getitem...

mysql 利用 mysql利用

mysql 寫入webshell復現 1.直接寫入 windows成功率較高 1.檢視是否允許可寫 空可寫,null不行,5.5以前預設為空,5.5以後預設為null 2.寫入檔案 2.日誌檔案寫入shell 5.0以後會建立日誌檔案 資料庫許可權 1.檢視是否開啟日誌 2.開啟日誌 3.設定路徑 ...