HTML5在客戶端存儲數(shù)據(jù)的新方法——localStorage
localStorage作為HTML5本地存儲web storage特性的API之一，主要作用是將數(shù)據(jù)保存在客戶端中，而客戶端一般是指上海網(wǎng)站設(shè)計用戶的計算機。
在移動設(shè)備上，由于大部分瀏覽器都支持web storage特性，因此在android和ios等智能手機上的web瀏覽器都能正常使用該特性。
localStorage保存的數(shù)據(jù)，一般情況下是永久保存的，也就是說只要采用localstorage保存信息，數(shù)據(jù)便一直存儲在用戶的客戶端中。即使用戶關(guān)閉當(dāng)前web瀏覽器后重新啟動，數(shù)據(jù)讓然存在。知道用戶或程序明確制定刪除，數(shù)據(jù)的生命周期才會結(jié)束。
cookie、 sessionStorage 、localStorage之間的區(qū)別和使用
cookie:存儲在用戶本地終端上的數(shù)據(jù)。有時也用cookies，指某些網(wǎng)站為了辨別用戶身份，進(jìn)行session跟蹤而存儲在本地終端上的數(shù)據(jù)，通常經(jīng)過加密。一般應(yīng)用最典型的案列就是判斷注冊用戶是否已經(jīng)登過該網(wǎng)站
HTML5 提供了兩種在客戶端存儲數(shù)據(jù)的新方法：
localStorage - 沒有時間限制的數(shù)據(jù)存儲
sessionStorage - 針對一個 session 的數(shù)據(jù)存儲
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲，因為它們由每個對服務(wù)器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
使用場景：
localStorage可以用來統(tǒng)計頁面訪問次數(shù)。
sessionStorage可以用來統(tǒng)計當(dāng)前頁面元素的點擊次數(shù)。
cookie一般存儲用戶名密碼相關(guān)信息，一般使用escape轉(zhuǎn)義編碼后存儲。
使用實例：
刷新頁面會看到計數(shù)器在增長。請關(guān)閉瀏覽器窗口，然后再試一次，計數(shù)器會繼續(xù)計數(shù)。localStorage 對象存儲的數(shù)據(jù)沒有時間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。
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>
重置：
刷新頁面會看到計數(shù)器在增長。
請關(guān)閉瀏覽器窗口，然后再試一次，計數(shù)器已經(jīng)重置了。
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 存儲前,應(yīng)檢查瀏覽器是否支持 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 對象!
// 一些代碼.....
} else {
// 抱歉! 不支持 web 存儲。
}
原文作者：祈澈姑娘
技術(shù)博客：http://www.itdecent.cn/u/05f416aefbe190后前端妹子，愛編程，愛運營，愛折騰。
堅持總結(jié)工作中遇到的技術(shù)問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。
文末福利：關(guān)注「編程微刊」公眾號 ，在微信后臺回復(fù)「領(lǐng)取資源」，獲取IT資源200G干貨大全。公眾號回復(fù)“1”，拉你進(jìn)程序員技術(shù)討論群
