印象最深的一個bug：sessionStorage緩存在移動端失效

yuxue 發(fā)布于2021-11-18 10:07 / 2623人閱讀

摘要：移動端緩存失效是我印象最深的一個之一，為啥呢，因為這個問題導(dǎo)致我加班到很晚。的生命周期是僅在當(dāng)前會話下有效。引入了一個瀏覽器窗口的概念，是在同源的窗口中始終存在的數(shù)據(jù)。

無bug，不程序：作為程序員的我，不是修bug就是在寫bug的路上。

　　移動端sessionStorage緩存失效是我“印象最深的一個bug”之一，為啥呢，因為這個問題導(dǎo)致我加班到很晚。在現(xiàn)在看來就是一個簡單的概念問題。

在我剛工作的時候，公司還沒有招到前端工程師，于是作為后端工程師的我開始了不怎么愉快地前端之旅，不知道大家是否理解自學(xué)新語言的苦，里面的坑簡直能讓人自閉。

　　作為我兼職前端的第一個bug：“移動端sessionStorage緩存失效”，沒錯，就是概念沒理解透，導(dǎo)致在App里面獲取后為null（這里的App是一個jQuery Mobile盒子套html），在PC端是正常的。

　　因為sessionStorage的生命周期是僅在當(dāng)前會話下有效，移動端切換頁面是關(guān)閉原頁面打開新頁面，知道sessionStorage特性的朋友看到這里是不是瞬間理解了？

解決方案，我們知道sessionStorage被清空的原因是：移動端切換頁面是關(guān)閉原頁面打開新頁面，因此，在做移動端的時候，可以采用localStorage保存數(shù)據(jù)，使用完后再清空localStorage。
當(dāng)然，如果是在同一個頁面中，sessionStorage的使用是沒有任何問題的。

我們一起看一下sessionStorage和localStorage的概念，深入了解一下：

　　1、生命周期：localStorage的生命周期是永久的，關(guān)閉頁面或瀏覽器之后localStorage中的數(shù)據(jù)也不會消失。localStorage除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)永遠(yuǎn)不會消失。

　　　　　　? ? ? ? ?sessionStorage的生命周期是僅在當(dāng)前會話下有效。sessionStorage引入了一個“瀏覽器窗口”的概念，sessionStorage是在同源的窗口中始終存在的數(shù)據(jù)。

　　　　　　　　只要這個瀏覽器窗口沒有關(guān)閉，即使刷新頁面或者進(jìn)入同源另一個頁面，數(shù)據(jù)依然存在。但是sessionStorage在關(guān)閉了瀏覽器窗口后就會被銷毀。同時獨立的打開同一個窗口同一個頁面，sessionStorage也是不一樣的。

　　2、存儲大小：localStorage和sessionStorage的存儲數(shù)據(jù)大小一般都是：5MB。

　　3、存儲位置：localStorage和sessionStorage都保存在客戶端，不與服務(wù)器進(jìn)行交互通信。

　　4、存儲內(nèi)容類型：localStorage和sessionStorage只能存儲字符串類型，對于復(fù)雜的對象可以使用ECMAScript提供的JSON對象的stringify和parse來處理。

　　5、獲取方式：localStorage：localStorage.getItem("key");;sessionStorage：sessionStorage.getItem("key")。

　　6、應(yīng)用場景：localStorage：常用于長期登錄（+判斷用戶是否已登錄），適合長期保存在本地的數(shù)據(jù)。sessionStorage：敏感賬號一次性登錄；

　　看到這里是不是感覺很簡單，換成localStorage就可以了，正所謂“會者不難難者不會”，當(dāng)時的我剛剛轉(zhuǎn)換學(xué)習(xí)前端，很多概念沒理解透導(dǎo)致一些前端問題頻繁出現(xiàn)。

我們簡單看一下寫入和讀取方式：

//寫入緩存localStorage.setItem("key", "value");//獲取緩存 localStorage.getItem("key");//寫入緩存sessionStorage.setItem("key", "value");//獲取緩存sessionStorage.getItem("key");

歡迎關(guān)注訂閱微信公眾號【熊澤有話說】，更多好玩易學(xué)知識等你來取
作者：熊澤-學(xué)習(xí)中的苦與樂
公眾號：熊澤有話說
出處：?https://www.cnblogs.com/xiongze520/p/15568939.html
您可以隨意轉(zhuǎn)載、摘錄，但請在文章內(nèi)注明作者和原文鏈接。 ?