一、本地存儲(chǔ)
在過(guò)去的web開(kāi)發(fā)中菩收，對(duì)于開(kāi)發(fā)交互式的程序，我們經(jīng)常使用cookie來(lái)滿足狀態(tài)存儲(chǔ)的需求鲸睛。但是這種方式有很多缺點(diǎn)娜饵，首先就是大小和數(shù)量的限制，一般cookie被限制在4k左右官辈，所以嚴(yán)格來(lái)說(shuō)cookie不算本地存儲(chǔ)技術(shù)箱舞，因?yàn)槊看伟l(fā)送http請(qǐng)求都要帶上cookie,如果數(shù)據(jù)太多會(huì)嚴(yán)重影響傳輸性能，所以cookie有很多的不足拳亿，于是html5中為本地存儲(chǔ)定義了新的內(nèi)容webstorge.
1. WebStorge
瀏覽器中內(nèi)置了兩個(gè)已經(jīng)實(shí)例化好的對(duì)象分別是：
- SessionStorage(僅在單個(gè)回話范圍內(nèi)有效)
- localStorage（持久化的本地存儲(chǔ)）
2. localStorage和sessionStorage的屬性和方法
| Name | Description |
|---|---|
| Length | 獲取存儲(chǔ)的鍵值對(duì)的數(shù)量 |
| remainingSpace | 獲取存儲(chǔ)空間剩余空間的大小(非標(biāo)準(zhǔn)晴股，僅IE8.0+支持) |
| setItem(key, value) | 將value值存儲(chǔ)到本地的key字段 |
| removeItem(key) | 刪除指定key本地存儲(chǔ)的值 |
| getItem(key) | 獲取指定key本地存儲(chǔ)的值 |
| clear() | 刪除localStorage中存儲(chǔ)的所有數(shù)據(jù) |
| key(index) | 根據(jù)索引獲取一個(gè)指定位置的鍵名 |
3. 簡(jiǎn)單的應(yīng)用例子說(shuō)明 localStorage和sessionStorage兩者的區(qū)別
- SessionStorage(關(guān)閉窗口再次打開(kāi)會(huì)淸0)
<script type="text/javascript">
if (sessionStorage.count)
{
sessionStorage.count=Number(sessionStorage.count) +1;
}
else
{
sessionStorage. count=1;
}
document.write("您訪問(wèn)該網(wǎng)站的次數(shù)為：" + sessionStorage.count);
</script>
- localStorage（關(guān)閉窗口，再次打開(kāi)繼續(xù)上次計(jì)數(shù)）
<script type="text/javascript">
if (localStorage.count)
{
localStorage.count=Number(localStorage.count) +1;
}
else
{
localStorage.count=1;
}
document.write("您訪問(wèn)該網(wǎng)站的次數(shù)為："+ localStorage.count);
</script>
4.使用JSON對(duì)象存取數(shù)據(jù)
我們經(jīng)常通過(guò)引入json對(duì)象肺魁，結(jié)構(gòu)化保存數(shù)據(jù)电湘，讀取數(shù)據(jù)，極大地方便使用localStorage對(duì)象保存多個(gè)字段數(shù)據(jù)額操作万搔。
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用JSON對(duì)象存取數(shù)據(jù)</title>
<script type="text/javascript" src="objectStorage.js"></script>
</head>
<body>
<h3>使用JSON對(duì)象存取數(shù)據(jù)</h3>
<h4>填寫(xiě)待存取信息到表格中</h4>
<table>
<tr><td>NAME:</td><td><input type="text" id="user"></td></tr>
<tr><td>E-mail:</td><td><input type="text" id="mail"></td></tr>
<tr><td>Telephone:</td><td><input type="text" id="tel"></td></tr>
<tr><td></td><td><input type="button" value="保存" onclick="saveStorage();"></td></tr>
</table>
<hr>
<h4>檢索已經(jīng)存入localStorage的json對(duì)象胡桨，并且展示原始信息</h4>
<p>
<input type="text" id="find">
<input type="button" value="檢索" onclick="findStorage('msg');">
</p>
<!--以下代碼用于顯示被檢索到的信息 -->
<p id ="msg"></p>
</body>
</html>
js
// JavaScript Document
function saveStorage(){
//創(chuàng)建一個(gè)js對(duì)象，用于存放當(dāng)前從表單獲得的數(shù)據(jù)
var data = new Object;
//將對(duì)象的屬性值名依次和用戶輸入的屬性值關(guān)聯(lián)起來(lái)
data.user=document.getElementById("user").value;
data.mail=document.getElementById("mail").value;
data.tel=document.getElementById("tel").value;
//創(chuàng)建一個(gè)json對(duì)象瞬雹，讓其對(duì)應(yīng)html文件中創(chuàng)建的對(duì)象的字符串?dāng)?shù)據(jù)形式
var str = JSON.stringify(data);
//將json對(duì)象存放到localStorage上昧谊，key為用戶輸入的NAME，value為這個(gè)json字符串
localStorage.setItem(data.user,str);
console.log("數(shù)據(jù)已經(jīng)保存! 被保存的用戶為:"+data.user);
}
//從localStorage中檢索用戶輸入的名稱對(duì)應(yīng)的json字符串酗捌，然后把json字符串解析為一組信息呢诬， 并且打印到指定位置
function findStorage(find){
//獲得用戶的輸入，是用戶希望檢索的名字
var requiredPersonName = document.getElementById("find").value;
//以這個(gè)檢索的名字來(lái)查找local Storage,得到了json字符串
var str=localStorage.getItem(requiredPersonName);
//解析這個(gè)json字符串得到Object對(duì)象
var data= JSON.parse(str);
//從Object對(duì)象中分離出相關(guān)屬性值胖缤，然后構(gòu)造要輸出的HTML內(nèi)容
var result="NAME:"+data.user+'<br>';
result+="E-mail:"+data.mail+'<br>';
result+="Telephone:"+data.tel+'<br>';
//取得頁(yè)面上要輸出的容器
var target = document.getElementById(id);
target.innerHTML = result;
}
