讓 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]);
		}
	}
});

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *