無bug，不程序：作為程序員的我，不是修bug就是在寫bug的路上。
移動端sessionStorage緩存失效是我“印象最深的一個bug”之一，為啥呢，因為這個問題導致我加班到很晚。在現在看來就是一個簡單的概念問題。
在我剛工作的時候，公司還沒有招到前端工程師，於是作為后端工程師的我開始了不怎么愉快地前端之旅，不知道大家是否理解自學新語言的苦，里面的坑簡直能讓人自閉。
作為我兼職前端的第一個bug：“移動端sessionStorage緩存失效”，沒錯，就是概念沒理解透，導致在App里面獲取后為null（這里的App是一個jQuery Mobile盒子套html），在PC端是正常的。
因為sessionStorage的生命周期是僅在當前會話下有效，移動端切換頁面是關閉原頁面打開新頁面，知道sessionStorage特性的朋友看到這里是不是瞬間理解了？
解決方案，我們知道sessionStorage被清空的原因是：移動端切換頁面是關閉原頁面打開新頁面，因此，在做移動端的時候，可以采用localStorage保存數據，使用完后再清空localStorage。
當然，如果是在同一個頁面中，sessionStorage的使用是沒有任何問題的。
我們一起看一下sessionStorage和localStorage的概念，深入了解一下：
1、生命周期：localStorage的生命周期是永久的，關閉頁面或瀏覽器之后localStorage中的數據也不會消失。localStorage除非主動刪除數據，否則數據永遠不會消失。
sessionStorage的生命周期是僅在當前會話下有效。sessionStorage引入了一個“瀏覽器窗口”的概念，sessionStorage是在同源的窗口中始終存在的數據。
只要這個瀏覽器窗口沒有關閉，即使刷新頁面或者進入同源另一個頁面，數據依然存在。但是sessionStorage在關閉了瀏覽器窗口后就會被銷毀。同時獨立的打開同一個窗口同一個頁面，sessionStorage也是不一樣的。
2、存儲大小：localStorage和sessionStorage的存儲數據大小一般都是：5MB。
3、存儲位置：localStorage和sessionStorage都保存在客戶端，不與服務器進行交互通信。
4、存儲內容類型：localStorage和sessionStorage只能存儲字符串類型，對於復雜的對象可以使用ECMAScript提供的JSON對象的stringify和parse來處理。
5、獲取方式：localStorage：localStorage.getItem("key");;sessionStorage：sessionStorage.getItem("key")。
6、應用場景：localStorage：常用於長期登錄（+判斷用戶是否已登錄），適合長期保存在本地的數據。sessionStorage：敏感賬號一次性登錄；
看到這里是不是感覺很簡單，換成localStorage就可以了，正所謂“會者不難難者不會”，當時的我剛剛轉換學習前端，很多概念沒理解透導致一些前端問題頻繁出現。
我們簡單看一下寫入和讀取方式：
//寫入緩存 localStorage.setItem("key", "value"); //獲取緩存 localStorage.getItem("key"); //寫入緩存 sessionStorage.setItem("key", "value"); //獲取緩存 sessionStorage.getItem("key");
|
歡迎關注訂閱微信公眾號【熊澤有話說】，更多好玩易學知識等你來取
作者：熊澤-學習中的苦與樂 公眾號：熊澤有話說 出處： https://www.cnblogs.com/xiongze520/p/15568939.html 您可以隨意轉載、摘錄，但請在文章內注明作者和原文鏈接。
|
