一匣沼、本地存儲(chǔ)由來(lái)的背景

　由于HTML4時(shí)代Cookie的大小、格式雷酪、存儲(chǔ)數(shù)據(jù)格式等限制淑仆，網(wǎng)站應(yīng)用如果想在瀏覽器端存儲(chǔ)用戶(hù)的部分信息，那么只能借助于Cookie哥力。但是Cookie的這些限制蔗怠，也就導(dǎo)致了Cookie只能存儲(chǔ)一些ID之類(lèi)的標(biāo)識(shí)符等簡(jiǎn)單的數(shù)據(jù)。

　下面是Cookie的限制：

　　　　大多數(shù)瀏覽器支持最大為 4096 字節(jié)的 Cookie吩跋。

　　　?? 瀏覽器還限制站點(diǎn)可以在用戶(hù)計(jì)算機(jī)上存儲(chǔ)的 Cookie 的數(shù)量寞射。大多數(shù)瀏覽器只允許每個(gè)站點(diǎn)存儲(chǔ) 20 個(gè)Cookie；如果試圖存儲(chǔ)更多 Cookie锌钮，則最舊的 Cookie 便會(huì)被丟棄桥温。

有些瀏覽器還會(huì)對(duì)它們將接受的來(lái)自所有站點(diǎn)的 Cookie 總數(shù)作出絕對(duì)限制，通常為 300 個(gè)梁丘。

Cookie默認(rèn)情況都會(huì)隨著Http請(qǐng)求發(fā)送到后臺(tái)服務(wù)器策治，但并不是所有請(qǐng)求都需要Cookie的脓魏，比如：js、css通惫、圖片等請(qǐng)求則不需要Cookie茂翔。

為了破解Cookie的一系列限制，HTML5通過(guò)JS的新的API就能直接存儲(chǔ)大量的數(shù)據(jù)到客戶(hù)端瀏覽器履腋，而且支持復(fù)雜的本地?cái)?shù)據(jù)庫(kù)珊燎，讓JS更有效率。 HTML5支持兩種的WebStorage：

永久性的本地存儲(chǔ)（localStorage）

會(huì)話(huà)級(jí)別的本地存儲(chǔ)（sessionStorage）

二遵湖、本地存儲(chǔ)的分類(lèi)

H5本地存儲(chǔ)有兩個(gè)API悔政，一個(gè)是Web Storage，還有一個(gè)是Web SQL延旧。不管是哪一個(gè)谋国，都是基于JavaScript語(yǔ)言來(lái)使用，接下來(lái)我就教你怎么使用Web Storage

三迁沫、Web Storage

　　　HTML5 定義了本地存儲(chǔ)規(guī)范 Web Storage 芦瘾， 提供了兩種存儲(chǔ)類(lèi)型 API： ?sessionStorage 和 localStorage，二者的差異主要是數(shù)據(jù)的保存時(shí)長(zhǎng)及數(shù)據(jù)的共享方式集畅。

1.localStorage?一直存儲(chǔ)在本地近弟，數(shù)據(jù)存儲(chǔ)是永久的，除非用戶(hù)或程序?qū)ζ溥M(jìn)行刪除操作挺智；localStorage 對(duì)象存儲(chǔ)的數(shù)據(jù)沒(méi)有時(shí)間限制祷愉。第二天、第二周或下一年之后赦颇，數(shù)據(jù)依然可用二鳄。

特點(diǎn)：①?域內(nèi)安全、永久保存媒怯。即客戶(hù)端或?yàn)g覽器中來(lái)自同一域名的所有頁(yè)面都可訪問(wèn)localStorage數(shù)據(jù)且數(shù)據(jù)除了刪除否則永久保存泥从，但客戶(hù)端或?yàn)g覽器之間的數(shù)據(jù)相互獨(dú)立。

②數(shù)據(jù)不會(huì)隨著Http請(qǐng)求發(fā)送到后臺(tái)服務(wù)器沪摄；

③?存儲(chǔ)數(shù)據(jù)的大小機(jī)會(huì)不用考慮躯嫉，因?yàn)樵贖TML5的標(biāo)準(zhǔn)中要求瀏覽器至少要支持到4MB。

看一個(gè)例子：

+

代碼如下：

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="對(duì)不起杨拐，您的瀏覽器不支持 web 存儲(chǔ)祈餐。";

? ? ? ? ? ? }

? ? ? ? }

2.sessionStorage在會(huì)話(huà)期內(nèi)有效，數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除哄陶；

特點(diǎn)：會(huì)話(huà)控制帆阳、短期保存。會(huì)話(huà)概念與服務(wù)器端的session概念相似屋吨，短期保存指窗口或?yàn)g覽器或客戶(hù)端關(guān)閉后自動(dòng)消除數(shù)據(jù)蜒谤。?

兼容性

　　注意：IE9?localStorage不支持本地文件山宾，需要將項(xiàng)目署到服務(wù)器，才可以支持鳍徽！

　　目前所有主流的瀏覽器都在一定程度上支持 HTML5 的 Web Storage特性资锰。 由上圖可以看出，基本上所有現(xiàn)代瀏覽器都已經(jīng)支持 Web Storage阶祭。

　　Android平臺(tái)和 IOS 平臺(tái)各自的瀏覽器都基本上支持 Web Storage 本地存儲(chǔ)特性绷杜。 目前市場(chǎng)上的移動(dòng)設(shè)備， 除了 android 手機(jī)和 iphone 手機(jī)外濒募，越來(lái)越多的平板電腦面世鞭盟，而且基本上依賴(lài)著兩種平臺(tái)。在移動(dòng)端使用 Web Storage 我們幾乎不需要考慮瀏覽器是否支持瑰剃， 當(dāng)然從代碼的嚴(yán)謹(jǐn)來(lái)說(shuō)齿诉，建議最好在使用前先檢查瀏覽器是否支持

下面是檢測(cè)方式：

if (window.localStorage) {

? ? ? ? ? ? ? ? // 瀏覽器支持 localStorage}else{

? ? ? ? ? ? ? ? // 不支持? ?

? ? ? ? ? ? }

? ? ? ? ? ? if (window.sessionStorage) {

? ? ? ? ? ? ? ? // 瀏覽器支持 sessionStorage}else{

? ? ? ? ? ? ? ? // 不支持}

三、localStorage

　　HTML5?的本地存儲(chǔ) API 中的 localStorage 與 sessionStorage 在使用方法上是相同的晌姚，區(qū)別在于 sessionStorage 在關(guān)閉頁(yè)面后即被清空粤剧，而 localStorage 則會(huì)一直保存。我們這里以 localStorage 為例舀凛，簡(jiǎn)要介紹下?html5?的本地存儲(chǔ)，并針對(duì)如遍歷等常見(jiàn)問(wèn)題作一些示例說(shuō)明途蒋。 localStorage 是?Html5?本地存儲(chǔ)的 API猛遍，使用鍵值對(duì)的方式進(jìn)行存取數(shù)據(jù)，存取的數(shù)據(jù)只能是字符串号坡。不同瀏覽器對(duì)該 API 支持情況有所差異懊烤，如使用方法、最大存儲(chǔ)空間等宽堆。

存儲(chǔ)方式：以鍵值對(duì)(Key-Value)的方式存儲(chǔ)字符串腌紧。

主要應(yīng)用：購(gòu)物車(chē)、客戶(hù)登錄畜隶、游戲存檔壁肋。。籽慢。

可儲(chǔ)存的數(shù)據(jù)類(lèi)型：數(shù)組浸遗，圖片，json箱亿，樣式跛锌，腳本。届惋。髓帽。（只要是能序列化成字符串的內(nèi)容都可以存儲(chǔ)）

儲(chǔ)存地址：C:\Users\15014\AppData\Local\Google\Chrome\User Data\Default\Local Storage（不同電腦不一樣菠赚，需要打開(kāi)隱藏文件顯示，但是在C盤(pán)搜索localStorage就能搜出這個(gè)文件夾郑藏。）

　　?localStorage提供了四個(gè)方法來(lái)輔助我們進(jìn)行對(duì)本地存儲(chǔ)做相關(guān)操作衡查。

　　（1）localStorage.setItem(鍵名，鍵值)在本地客戶(hù)端存儲(chǔ)一個(gè)字符串類(lèi)型的數(shù)據(jù)译秦，其中峡捡，第一個(gè)參數(shù)“鍵名”代表了該數(shù)據(jù)的標(biāo)識(shí)符，而第二個(gè)參數(shù)“鍵值”為該數(shù)據(jù)本身筑悴。如：

? ? ? ? ? ? ? ? ? ? 1们拙、localStorage.setItem("name", "張三");//存儲(chǔ)鍵名為name和鍵值為"張三"的數(shù)據(jù)到本地

? ? ? ? ? ? ? ? ? 2、 localStorage.setItem("age", "28");//存儲(chǔ)鍵名為age和鍵值為"28"的數(shù)據(jù)到本地

　「罅摺（2）localStorage.getItem(鍵名) 讀取已存儲(chǔ)在本地的數(shù)據(jù)砚婆，通過(guò)鍵名作為參數(shù)讀取出對(duì)應(yīng)鍵名的數(shù)據(jù)。如：

????????????????????vardata = localStorage.getItem("name");

? ? ????????????????alert(data);//張三

　⊥挥隆（3）localStorage.removeItem(鍵名)移除已存儲(chǔ)在本地的數(shù)據(jù)装盯，通過(guò)鍵名作為參數(shù)刪除對(duì)應(yīng)鍵名的數(shù)據(jù)。如：

????????????????????vardata2 = localStorage.removeItem("name");//從本地存儲(chǔ)中移除鍵名為name的數(shù)據(jù)????????????????

????????????????????????alert(data2);//undefined

　〖撞觥（4）localStorage.clear() 移除本地存儲(chǔ)所有數(shù)據(jù)埂奈。如：

? ????????????????? localStorage.clear() 移除本地存儲(chǔ)所有數(shù)據(jù)。如：

? ? ? ? ? ? ? ? ? ? localStorage.clear();? ? ? //保存著的"age/28"和"name/張三"的鍵/值對(duì)也被移除了定躏，所有本地?cái)?shù)據(jù)拜拜

?　≌嘶恰（5）另外，sessionStorage中的四個(gè)函數(shù)與以上localStorage類(lèi)的函數(shù)用法基本一致痊远，就不再詳解垮抗。

下面是一個(gè)小實(shí)例：

? ? ? ? ? ? localStorage.setItem("name", "張三");?

? ? ? ? ? ? localStorage.setItem("age", "28");?

? ? ? ? ? ? verify();? //驗(yàn)證本地存儲(chǔ)? 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(){?

? ? ? ? ? ? ? ?vartype = localStorage.getItem("name");?

? ? ? ? ? ? ? ? varprice = localStorage.getItem("age");?

? ? ? ? ? ? ? ? type = type ? type : '不存在';?

? ? ? ? ? ? ? ? price = price ? price : '不存在';?

? ? ? ? ? ? ? ? alert( "name: " + type + "\n\n" + "age: " + price );?

? ? ? ? ? ? }?

?三碧聪、localStorage過(guò)期策略

　　由于html5沒(méi)有給本地存儲(chǔ)設(shè)置過(guò)期策略冒版，那么在處理數(shù)據(jù)的過(guò)期策略的時(shí)候可以編寫(xiě)自己過(guò)期策略程序，如下：

locstorage 過(guò)期策略function set(key,value){

var curtime =new Date().getTime();//獲取當(dāng)前時(shí)間 localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//轉(zhuǎn)換成json字符串序列/*? 說(shuō)明：

? JSON.parse用于從一個(gè)字符串中解析出json對(duì)象,如

? var str = '{"name":"huangxiaojian","age":"23"}'

? 結(jié)果：

? JSON.parse(str)

? Object

? ? age: "23"

? ? name: "huangxiaojian"

? ? __proto__: Object

? 注意：?jiǎn)我?hào)寫(xiě)在{}外逞姿，每個(gè)屬性名都必須用雙引號(hào)辞嗡，否則會(huì)拋出異常。

? JSON.stringify()用于從一個(gè)對(duì)象解析出字符串滞造，如

? var a = {a:1,b:2}

? 結(jié)果：

? JSON.stringify(a)

? "{"a":1,"b":2}"

*/}function get(key,exp)//exp是設(shè)置的過(guò)期時(shí)間{

? var val = localStorage.getItem(key);//獲取存儲(chǔ)的元素var dataobj = JSON.parse(val);//解析出json對(duì)象if(new Date().getTime() - dataobj.time > exp)//如果當(dāng)前時(shí)間-減去存儲(chǔ)的元素在創(chuàng)建時(shí)候設(shè)置的時(shí)間 > 過(guò)期時(shí)間{

? console.log("expires");//提示過(guò)期}else{

? console.log("val="+dataobj.val);

}

}

使用操作如下圖所示：