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

創(chuàng)新互聯(lián)公司是一家網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站，提供網(wǎng)頁設(shè)計(jì)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，建網(wǎng)站，按需求定制制作，網(wǎng)站開發(fā)公司，自2013年創(chuàng)立以來是互聯(lián)行業(yè)建設(shè)者，服務(wù)者。以提升客戶品牌價(jià)值為核心業(yè)務(wù)，全程參與項(xiàng)目的網(wǎng)站策劃設(shè)計(jì)制作，前端開發(fā)，后臺程序制作以及后期項(xiàng)目運(yùn)營并提出專業(yè)建議和思路。

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

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

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

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

解決方案，我們知道sessionStorage被清空的原因是：移動端切換頁面是關(guān)閉原頁面打開新頁面，因此，在做移動端的時(shí)候，可以采用localStorage保存數(shù)據(jù)，使用完后再清空localStorage。

當(dāng)然，如果是在同一個(gè)頁面中，sessionStorage的使用是沒有任何問題的。

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

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

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

　　　　　　　　只要這個(gè)瀏覽器窗口沒有關(guān)閉，即使刷新頁面或者進(jìn)入同源另一個(gè)頁面，數(shù)據(jù)依然存在。但是sessionStorage在關(guān)閉了瀏覽器窗口后就會被銷毀。同時(shí)獨(dú)立的打開同一個(gè)窗口同一個(gè)頁面，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)時(shí)的我剛剛轉(zhuǎn)換學(xué)習(xí)前端，很多概念沒理解透導(dǎo)致一些前端問題頻繁出現(xiàn)。

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

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

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