一、本地存儲由來的背景
由于HTML4時代Cookie的大小、格式、存儲數(shù)據(jù)格式等限制，網(wǎng)站應(yīng)用如果想在瀏覽器端存儲用戶的部分信息，那么只能借助于Cookie。但是Cookie的這些限制，也就導(dǎo)致了Cookie只能存儲一些ID之類的標(biāo)識符等簡單的數(shù)據(jù)。
下面是Cookie的限制：
大多數(shù)瀏覽器支持最大為 4096 字節(jié)的 Cookie。
瀏覽器還限制站點(diǎn)可以在用戶計(jì)算機(jī)上存儲的 Cookie 的數(shù)量。大多數(shù)瀏覽器只允許每個站點(diǎn)存儲 20 個Cookie；如果試圖存儲更多 Cookie，則最舊的 Cookie 便會被丟棄。
有些瀏覽器還會對它們將接受的來自所有站點(diǎn)的 Cookie 總數(shù)作出絕對限制，通常為 300 個。
Cookie默認(rèn)情況都會隨著Http請求發(fā)送到后臺服務(wù)器，但并不是所有請求都需要Cookie的，比如：js、css、圖片等請求則不需要Cookie。
為了破解Cookie的一系列限制，HTML5通過JS的新的API就能直接存儲大量的數(shù)據(jù)到客戶端瀏覽器，而且支持復(fù)雜的本地?cái)?shù)據(jù)庫，讓JS更有效率。 HTML5支持兩種的WebStorage：
- 永久性的本地存儲（localStorage）
- 會話級別的本地存儲（sessionStorage）
二、本地存儲的分類
H5本地存儲有兩個API，一個是Web Storage，還有一個是Web SQL。不管是哪一個，都是基于JavaScript語言來使用，接下來我就教你怎么使用Web Storage
三、Web Storage
HTML5 定義了本地存儲規(guī)范 Web Storage ， 提供了兩種存儲類型 API： sessionStorage 和 localStorage，二者的差異主要是數(shù)據(jù)的保存時長及數(shù)據(jù)的共享方式。
1.localStorage 一直存儲在本地，數(shù)據(jù)存儲是永久的，除非用戶或程序?qū)ζ溥M(jìn)行刪除操作；localStorage 對象存儲的數(shù)據(jù)沒有時間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。
特點(diǎn)：① 域內(nèi)安全、永久保存。即客戶端或?yàn)g覽器中來自同一域名的所有頁面都可訪問localStorage數(shù)據(jù)且數(shù)據(jù)除了刪除否則永久保存，但客戶端或?yàn)g覽器之間的數(shù)據(jù)相互獨(dú)立。
② 數(shù)據(jù)不會隨著Http請求發(fā)送到后臺服務(wù)器；
③ 存儲數(shù)據(jù)的大小機(jī)會不用考慮，因?yàn)樵贖TML5的標(biāo)準(zhǔn)中要求瀏覽器至少要支持到4MB。
看一個例子：
代碼如下：
function clickCounter(){
if(typeof(Storage)!=="undefined"){
if(localStorage.clickcount){
localStorage.clickcount=Number(localStorage.clickcount)+1;
}else{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已經(jīng)點(diǎn)擊了按鈕 " + localStorage.clickcount + " 次 ";
}else{
document.getElementById("result").innerHTML="對不起，您的瀏覽器不支持 web 存儲。";
}
}
</script>
<p><button onclick="clickCounter()" type="button">點(diǎn)我！</button></p>
<div id="result"></div>
<p>點(diǎn)擊該按鈕查看計(jì)數(shù)器的增加。</p>
<p>關(guān)閉瀏覽器選項(xiàng)卡(或窗口),重新打開此頁面,計(jì)數(shù)器將繼續(xù)計(jì)數(shù)(不是重置)。</p>
2.sessionStorage在會話期內(nèi)有效，數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除；
特點(diǎn)：會話控制、短期保存。會話概念與服務(wù)器端的session概念相似，短期保存指窗口或?yàn)g覽器或客戶端關(guān)閉后自動消除數(shù)據(jù)。
兼容性
注意：IE9 localStorage不支持本地文件，需要將項(xiàng)目署到服務(wù)器，才可以支持！
目前所有主流的瀏覽器都在一定程度上支持 HTML5 的 Web Storage特性。 由上圖可以看出，基本上所有現(xiàn)代瀏覽器都已經(jīng)支持 Web Storage。
Android平臺和 IOS 平臺各自的瀏覽器都基本上支持 Web Storage 本地存儲特性。 目前市場上的移動設(shè)備， 除了 android 手機(jī)和 iphone 手機(jī)外，越來越多的平板電腦面世，而且基本上依賴著兩種平臺。在移動端使用 Web Storage 我們幾乎不需要考慮瀏覽器是否支持， 當(dāng)然從代碼的嚴(yán)謹(jǐn)來說，建議最好在使用前先檢查瀏覽器是否支持
下面是檢測方式：
if (window.localStorage) {
// 瀏覽器支持 localStorage
}else{
// 不支持
}
if (window.sessionStorage) {
// 瀏覽器支持 sessionStorage
}else{
// 不支持
}
三、localStorage
HTML5 的本地存儲 API 中的 localStorage 與 sessionStorage 在使用方法上是相同的，區(qū)別在于 sessionStorage 在關(guān)閉頁面后即被清空，而 localStorage 則會一直保存。我們這里以 localStorage 為例，簡要介紹下 html5 的本地存儲，并針對如遍歷等常見問題作一些示例說明。 localStorage 是 Html5 本地存儲的 API，使用鍵值對的方式進(jìn)行存取數(shù)據(jù)，存取的數(shù)據(jù)只能是字符串。不同瀏覽器對該 API 支持情況有所差異，如使用方法、最大存儲空間等。
存儲方式：以鍵值對(Key-Value)的方式存儲字符串。
主要應(yīng)用：購物車、客戶登錄、游戲存檔。。。
可儲存的數(shù)據(jù)類型：數(shù)組，圖片，json，樣式，腳本。。。（只要是能序列化成字符串的內(nèi)容都可以存儲）
儲存地址：C:\Users\15014\AppData\Local\Google\Chrome\User Data\Default\Local Storage（不同電腦不一樣，需要打開隱藏文件顯示，但是在C盤搜索localStorage就能搜出這個文件夾。）
localStorage提供了四個方法來輔助我們進(jìn)行對本地存儲做相關(guān)操作。
（1）localStorage.setItem(鍵名，鍵值)在本地客戶端存儲一個字符串類型的數(shù)據(jù)，其中，第一個參數(shù)“鍵名”代表了該數(shù)據(jù)的標(biāo)識符，而第二個參數(shù)“鍵值”為該數(shù)據(jù)本身。如：
localStorage.setItem("name", "張三"); //存儲鍵名為name和鍵值為"張三"的數(shù)據(jù)到本地
localStorage.setItem("age", "28"); //存儲鍵名為age和鍵值為"28"的數(shù)據(jù)到本地
（2）localStorage.getItem(鍵名) 讀取已存儲在本地的數(shù)據(jù)，通過鍵名作為參數(shù)讀取出對應(yīng)鍵名的數(shù)據(jù)。如：
var data = localStorage.getItem("name");
alert(data);//張三
（3）localStorage.removeItem(鍵名)移除已存儲在本地的數(shù)據(jù)，通過鍵名作為參數(shù)刪除對應(yīng)鍵名的數(shù)據(jù)。如：
var data2 = localStorage.removeItem("name");//從本地存儲中移除鍵名為name的數(shù)據(jù)
alert(data2); //undefined
（4）localStorage.clear() 移除本地存儲所有數(shù)據(jù)。如：
localStorage.clear() 移除本地存儲所有數(shù)據(jù)。如：
localStorage.clear(); //保存著的"age/28"和"name/張三"的鍵/值對也被移除了，所有本地?cái)?shù)據(jù)拜拜
（5）另外，sessionStorage中的四個函數(shù)與以上localStorage類的函數(shù)用法基本一致，就不再詳解。
下面是一個小實(shí)例：
<script type="text/javascript">
localStorage.setItem("name", "張三");
localStorage.setItem("age", "28");
verify(); //驗(yàn)證本地存儲
localStorage.removeItem("name");
verify(); //驗(yàn)證name是否存在
localStorage.clear();
verify(); //驗(yàn)證name和age是否存在
//自定義驗(yàn)證函數(shù)，驗(yàn)證name和age的數(shù)據(jù)是否存在
function verify(){
var type = localStorage.getItem("name");
var price = localStorage.getItem("age");
type = type ? type : '不存在';
price = price ? price : '不存在';
alert( "name: " + type + "\n\n" + "age: " + price );
}
</script>
三、localStorage過期策略
由于html5沒有給本地存儲設(shè)置過期策略，那么在處理數(shù)據(jù)的過期策略的時候可以編寫自己過期策略程序，如下：
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Access-Control-Allow-Origin" content="anonymous">
<title>locstorage 過期策略</title>
</head>
<body>
</body>
</html>
<script>
function set(key,value){
var curtime = new Date().getTime();//獲取當(dāng)前時間
localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//轉(zhuǎn)換成json字符串序列
/*
說明：
JSON.parse用于從一個字符串中解析出json對象,如
var str = '{"name":"huangxiaojian","age":"23"}'
結(jié)果：
JSON.parse(str)
Object
age: "23"
name: "huangxiaojian"
__proto__: Object
注意：單引號寫在{}外，每個屬性名都必須用雙引號，否則會拋出異常。
JSON.stringify()用于從一個對象解析出字符串，如
var a = {a:1,b:2}
結(jié)果：
JSON.stringify(a)
"{"a":1,"b":2}"
*/
}
function get(key,exp)//exp是設(shè)置的過期時間
{
var val = localStorage.getItem(key);//獲取存儲的元素
var dataobj = JSON.parse(val);//解析出json對象
if(new Date().getTime() - dataobj.time > exp)//如果當(dāng)前時間-減去存儲的元素在創(chuàng)建時候設(shè)置的時間 > 過期時間
{
console.log("expires");//提示過期
}
else{
console.log("val="+dataobj.val);
}
}
</script>
使用操作如下圖所示：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
