無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 您可以隨意轉載、摘錄，但請在文章內註明作者和原文連結。
|
