最近在做一個類似填報信息的頁面，一共有8頁，當點擊切換到下一頁的時候要求把上一頁的數據存到本地，以便下次切換到這個頁面的時候自動把值填上去，並且在最后一頁提交數據的時候直接用localstorage里面的數據，類似這樣：
window.localStorage.setItem('workInfoList', JSON.stringify(workInfoList));// 插入 對象轉字符串
var requestworkInfo = JSON.parse(window.localStorage.getItem('workInfoList'));//讀取 字符串轉換成對象才能使用
然后就了解了一下localstorage的基本用法
一、什么是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的。
二、localStorage的優勢與局限
localStorage的優勢
1、localStorage拓展了cookie的4K限制
2、localStorage會可以將第一次請求的數據直接存儲到本地，這個相當於一個5M大小的，針對於前端頁面的數據庫，相比於cookie可以節約帶寬，但是這個卻是只有在高版本的瀏覽器中才支持的
localStorage的局限
1、瀏覽器的大小不統一，並且在IE8以上的IE版本才支持localStorage這個屬性
2、目前所有的瀏覽器中都會把localStorage的值類型限定為string類型，這個在對我們日常比較常見的JSON對象類型需要一些轉換
3、localStorage在瀏覽器的隱私模式下面是不可讀取的
4、localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡
5、localStorage不能被爬蟲抓取到
localStorage與sessionStorage的唯一一點區別就是localStorage屬於永久性存儲，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對會被清空
這里我們以localStorage來分析
三、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()方法，向其中出入索引即可獲取對應的鍵
四、localStorage其他注意事項
特別需要注意的就是我們上面提到過的類型轉換問題。
存儲的時候可以使用JSON.stringify()這個方法，來將JSON轉換成為JSON字符串。讀取的時候要將JSON字符串轉換成為JSON對象，使用JSON.parse()方法
另外還有一點要注意的是，其他類型讀取出來也要進行轉換