HTML5在用戶端存儲資料的新方法——localStorage
localStorage作為HTML5本地存儲web storage特性的API之一，主要作用是将資料儲存在用戶端中，而用戶端一般是指上海網站設計使用者的計算機。
在移動裝置上，由于大部分浏覽器都支援web storage特性，是以在android和ios等智能手機上的web浏覽器都能正常使用該特性。
localStorage儲存的資料，一般情況下是永久儲存的，也就是說隻要采用localstorage儲存資訊，資料便一直存儲在使用者的用戶端中。即使使用者關閉目前web浏覽器後重新啟動，資料讓然存在。知道使用者或程式明确制定删除，資料的生命周期才會結束。
cookie、 sessionStorage 、localStorage之間的差別和使用
cookie:存儲在使用者本地終端上的資料。有時也用cookies，指某些網站為了辨識使用者身份，進行session跟蹤而存儲在本地終端上的資料，通常經過加密。一般應用最典型的案列就是判斷注冊使用者是否已經登過該網站 複制
HTML5 提供了兩種在用戶端存儲資料的新方法：
localStorage - 沒有時間限制的資料存儲
sessionStorage - 針對一個 session 的資料存儲
之前，這些都是由 cookie 完成的。但是 cookie 不适合大量資料的存儲，因為它們由每個對伺服器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。 複制
使用場景：
localStorage可以用來統計頁面通路次數。
sessionStorage可以用來統計目前頁面元素的點選次數。
cookie一般存儲使用者名密碼相關資訊，一般使用escape轉義編碼後存儲。
使用執行個體：
重新整理頁面會看到計數器在增長。請關閉浏覽器視窗，然後再試一次，計數器會繼續計數。localStorage 對象存儲的資料沒有時間限制。第二天、第二周或下一年之後，資料依然可用。
document.write("Visits "+ localStorage.pagecount + " time(s)."); 複制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
</html> 複制
重置：
重新整理頁面會看到計數器在增長。
請關閉浏覽器視窗，然後再試一次，計數器已經重置了。
document.write("Visits " + sessionStorage.pagecount + " time(s) this session."); 複制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
</script>
</html> 複制
注意：nternet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支援Web 存儲。
注意: Internet Explorer 7 及更早IE版本不支援web 存儲。
是以：在使用 web 存儲前,應檢查浏覽器是否支援 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined")
{
// 是的! 支援 localStorage sessionStorage 對象!
// 一些代碼.....
} else {
// 抱歉! 不支援 web 存儲。
} 複制
原文作者：祈澈姑娘
技術部落格：https://www.jianshu.com/u/05f416aefbe1
90後前端妹子，愛程式設計，愛營運，愛折騰。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探讨交流。