初識localstorage用法

最近在作一個相似填報信息的頁面，一共有8頁，當點擊切換到下一頁的時候要求把上一頁的數據存到本地，以便下次切換到這個頁面的時候自動把值填上去，而且在最後一頁提交數據的時候直接用localstorage裏面的數據，相似這樣：

window.localStorage.setItem('workInfoList', JSON.stringify(workInfoList));// 插入 對象轉字符串

 

var requestworkInfo = JSON.parse(window.localStorage.getItem('workInfoList'));//讀取 字符串轉換成對象才能使用

 

 

而後就瞭解了一下localstorage的基本用法

1、什麼是localStorage、sessionStorage

在HTML5中，新加入了一個localStorage特性，這個特性主要是用來做爲本地存儲來使用的，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間爲4k)，localStorage中通常瀏覽器支持的是5M大小，這個在不一樣的瀏覽器中localStorage會有所不一樣。

在HTML5中，本地存儲是一個window的屬性，包括localStorage和sessionStorage，從名字應該能夠很清楚的辨認兩者的區別，前者是一直存在本地的，後者只是伴隨着session，窗口一旦關閉就沒了。如下是localStorage 和sessionStorage的區別

(1)localStorage和sessionStorage同樣都是用來存儲客戶端臨時信息的對象。

(2)他們均只能存儲字符串類型的對象（雖然規範中能夠存儲其餘原生類型的對象，可是目前爲止沒有瀏覽器對其進行實現）。

(3)localStorage生命週期是永久，這意味着除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，不然這些信息將永遠存在。

(4)sessionStorage生命週期爲當前窗口或標籤頁，一旦窗口或標籤頁被永久關閉了，那麼全部經過sessionStorage存儲的數據也就被清空了。

(5)不一樣瀏覽器沒法共享localStorage或sessionStorage中的信息。相同瀏覽器的不一樣頁面間能夠共享相同的localStorage（頁面屬於相同域名和端口），可是不一樣頁面或標籤頁間沒法共享sessionStorage的信息。這裏須要注意的是，頁面及標籤頁僅指頂級窗口，若是一個標籤頁包含多個iframe標籤且他們屬於同源頁面，那麼他們之間是能夠共享sessionStorage的。

2、localStorage的優點與侷限

localStorage的優點

一、localStorage拓展了cookie的4K限制

二、localStorage會能夠將第一次請求的數據直接存儲到本地，這個至關於一個5M大小的，針對於前端頁面的數據庫，相比於cookie能夠節約帶寬，可是這個倒是隻有在高版本的瀏覽器中才支持的

localStorage的侷限

一、瀏覽器的大小不統一，而且在IE8以上的IE版本才支持localStorage這個屬性

二、目前全部的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對咱們平常比較常見的JSON對象類型須要一些轉換

三、localStorage在瀏覽器的隱私模式下面是不可讀取的

四、localStorage本質上是對字符串的讀取，若是存儲內容多的話會消耗內存空間，會致使頁面變卡

五、localStorage不能被爬蟲抓取到

localStorage與sessionStorage的惟一一點區別就是localStorage屬於永久性存儲，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對會被清空

這裏咱們以localStorage來分析

3、localStorage的使用

首先在使用localStorage的時候，咱們須要判斷瀏覽器是否支持localStorage這個屬性

1 if(！window.localStorage){ 2 alert("瀏覽器支持localstorage"); 3 return false; 4 }else{ 5 //主邏輯業務 6 }

localstorage存儲

好比如今要存儲我的的學校信息，就能夠像下面這樣寫：

 

var requesteducatData = { "school": '吉林大學', "startSchoolTime": '2015', "finishSchoolTime": '2019', "schoolTypeId": '大學', }; window.localStorage.setItem('educatList', JSON.stringify(requesteducatData));//對象轉字符串

運行後的結果以下：

 

 

這裏說一下爲何要用JSON.stringfy將數據轉一下，由於localstorage存儲只支持字符串類型數據，因此咱們要再存儲以前將數據轉一下。

最後在控制檯上面打印出來的結果是: 

localStorage的讀取

console.log(JSON.parse(window.localStorage.getItem('educatList'))) console.log(window.localStorage.getItem('educatList'));

 

經過window.localStorage.getItem("名稱")的方式讀取，這裏爲何要用JSON.parse轉一下呢，就是由於咱們在存儲的時候對他進行了轉換了，變成了字符串形式，經過JSON.psrse將字符串轉換成對象，這樣方便咱們使用。

打印結果：

 

localStorage的刪除

若是用完數據後再也不使用就能夠手動清除localstorage的存儲數據

1.將localStorage的全部內容清除

window.localStorage.clear()

2.刪除某個鍵值對

以下：localstorage裏面存儲着三對數據

 

 咱們清除一個

window.localStorage.removeItem('personalbaseinfo1')

控制檯查看結果 

 

 

localStorage的鍵獲取

var storage=window.localStorage; storage.a=1; storage.setItem("c",3); for(var i=0;i<storage.length;i++){ var key=storage.key(i); console.log(key); }

 

使用key()方法，向其中出入索引便可獲取對應的鍵

4、localStorage其餘注意事項

特別須要注意的就是咱們上面提到過的類型轉換問題。

存儲的時候可使用JSON.stringify()這個方法，來將JSON轉換成爲JSON字符串。讀取的時候要將JSON字符串轉換成爲JSON對象，使用JSON.parse()方法

另外還有一點要注意的是，其餘類型讀取出來也要進行轉換