在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這個屬性
<code>if
(！window
.localStorage){ alert("瀏覽器支持localstorage"
);return
false
;}else
{ /<code>
存值共有3種方式，localStorage相當於window對象下面的一個屬性，所以有[]和.調用，但也具有自身的setItem方法：
<code>// 自身方法localStorage.setItem("name"
,"bonly"
);// []方法localStorage["name"
]="bonly"
;// .方法localStorage.name="bonly"
;/<code>
取值也是如此，自身的方法是getItem。
<code>// 自身方法localStorage.getItem("name"
);// []方法localStorage["name"
];// .方法localStorage.name;/<code>
改變的方式，就是相當於給對應的key重新賦值，就會把原來的值覆蓋掉。
<code>// 自身方法localStorage.setItem("name"
,"TOM"
);// []方法localStorage["name"
]="TOM"
;// .方法localStorage.name="TOM"
;/<code>
移除某一個值，可以通過對象刪除屬性的關鍵字delete也可以用自身的方法removeItem。
<code>//
自身方法localStorage.removeItem("name"
);//
[]方法delete
localStorage["name"
];//
.方法delete
localStorage.name/<code>
獲取所有的key。
<code>//
通過自身的keyfor (var i=0
;iconsole.log(localStorage.key(i));}//
通過for
in
循環獲取for
(var keyin
localStorage){console
.log(key);}/<code>
6.獲取所有的值
<code>localStorage
.valueOf
();取出所有的值/<code>
7.清除所有的值
<code>localStorage
.clear
()/<code>
8.判斷是否具有某個key，hasOwnProperty方法
<code>localStorage.hasOwnProperty("name"
)// 如果存在的話返回true
，不存在返回false
/<code>
localStorage其他注意事項
一般我們會將JSON存入localStorage中，但是在localStorage會自動將localStorage轉換成為字符串形式
這個時候我們可以使用JSON.stringify()這個方法，來將JSON轉換成為JSON字符串
示例：
<code>if
(!window
.localStorage){ alert("瀏覽器支持localstorage"
);}else
{var
storage=window
.localStorage;var
data={name
:'xiecanyong'
,sex
:'man'
,hobby
:'program'
};var
d=JSON
.stringify(data); storage.setItem("data"
,d);console
.log(storage.data);}/<code>
讀取之後要將JSON字符串轉換成為JSON對象，使用JSON.parse()方法。
<code>var
storage=window
.localStorage;var
data={name
:'xiecanyong'
,sex
:'man'
,hobby
:'program'
};var
d=JSON
.stringify(data);storage.setItem("data"
,d);/<code>
打印出來是Object對象
另外還有一點要注意的是，其他類型讀取出來也要進行轉換
使用技巧
1.先判斷瀏覽器是否支持localStorage，通過if(!window.localStorage) return;
2.單詞太長，不方便書寫，可以利用 var storage=window.localStorage;
3.字符串和原始類型需要通過JSON.stringfy轉字符串，通過JSON.parse轉成對象
4.通過封裝方法實現來回轉化
sessionStorage
sessionStorage 用於臨時保存同一窗口(或標籤頁)的數據，在關閉窗口或標籤頁之後將會刪除這些數據。
提示: 如果你想在瀏覽器窗口關閉後還保留數據，可以使用 localStorage 屬性， 該數據對象沒有過期時間，今天、下週、明年都能用，除非你手動去刪除。
語法：
<code>window
.sessionStorage/<code>
保存數據語法：
<code>sessionStorage
.setItem
("key"
,"value"
);/<code>
讀取數據語法：
<code>var
lastname = sessionStorage.getItem("key"
);/<code>
刪除指定鍵的數據語法：
<code>sessionStorage
.removeItem
("key"
);/<code>
刪除所有數據：
<code>sessionStorage
.clear
();/<code>
實例：以下實例用於記錄點擊按鈕的次數:
Markup
<code> ><
html
><
head
><
meta
charset
="utf-8"
><
title
>Web前端之家(https://www.jiangweishan.com)title
><
script
>
function
clickCounter
() {if
(typeof
(Storage) !=="undefined"
) {if
(sessionStorage.clickcount) { sessionStorage.clickcount =Number
(sessionStorage.clickcount)+1
; }else
{ sessionStorage.clickcount =1
; }document
.getElementById("result"
).innerHTML ="你在按鈕上已經點擊了 "
+ sessionStorage.clickcount +" 次。"
; }else
{document
.getElementById("result"
).innerHTML ="Sorry, your browser does not support web storage..."
; } }script
>head
><
body
><
p
><
button
onclick
="clickCounter()"
type
="button"
>點我!button
>p
><
div
id
="result"
>div
><
p
>點擊按鈕查看數字變化。p
><
p
>關閉瀏覽器並重新打開，看看數值是否重置了。p
>body
>html
>/<code>
