無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 您可以隨意轉載、摘錄，但請在文章內注明作者和原文鏈接，
|
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/373877.html
標籤：HTML5
上一篇：“go:go.modfilenotfoundincurrentdirectory”但它已經存在于目錄中
下一篇：html完整語法學習