讓 sessionStorage 跨分頁運作

先招認,這段程式碼不是我自己想出來的,不過因為我也忘了當時到底是從哪一個網站看到的。

一般要將資料儲存在瀏覽器,有 cookie 或是 Web Storage 兩種不同的東西可使用。
如果這些資料只需要在瀏覽器,伺服器端的運作時並不需要知道的話,那麼使用 Web Storage 會是比較好的選擇。

而 Web Storage 本身又可以分為兩種不同的東西,分別是:
localStorage 是永久的,只有手動清除才會消失,並且是跨分頁的。
sessionStorage 是臨時的,在瀏覽器關閉或是手動清除之後就會消失,而且是不跨分頁的。

但其實,有時候你會希望是臨時的且跨分頁運作的。就有點類似使用 cookie 然後將過期時間設定為 0 那樣的效果。

這樣的話 sessionStorage 不能跨分頁,而 localStorage 的有效期限又太長了。
所以就要想方設法讓在新開分頁的時候,能夠自動的同步原分頁的 sessionStorage 資料過來。

if( !sessionStorage.length ) {
	localStorage.setItem('getSessionStorage', Date.now());
};
window.addEventListener('storage', function(e) {
	if( e.key == 'getSessionStorage' ) {
		localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
		localStorage.removeItem('sessionStorage');
	} else if( e.key == 'sessionStorage' && !sessionStorage.length ) {
		var data = JSON.parse(e.newValue);
		for( var key in data ) {
			sessionStorage.setItem(key, data[key]);
		}
	}
});

故意寫在最後面的備註,2021 年中的時候發現,這樣寫法的跨分頁轉移 sessionStorage 的功能感覺怪怪的。不知道是哪裡有問題,但轉移的不是很順。

發表留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料