HTML5的Web存儲(chǔ)涉及兩部分內(nèi)容判呕，一是數(shù)據(jù)存儲(chǔ)，支持更多本地存儲(chǔ)方案已卸；二是文件讀取佛玄，支持了File API硼一。
1. 本地存儲(chǔ)
Web應(yīng)用中數(shù)據(jù)存儲(chǔ)有兩種方式：一是Web服務(wù)器累澡，二是客戶(hù)端存儲(chǔ)，也就是本地存儲(chǔ)般贼。
HTML5出現(xiàn)之前愧哟，本地存儲(chǔ)只有一種方式：cookie奥吩。但是，cookie有著明顯的缺點(diǎn)蕊梧，存儲(chǔ)數(shù)據(jù)量少霞赫，會(huì)被攜帶到HTTP請(qǐng)求上增加傳輸開(kāi)銷(xiāo)......HTML5提供兩種新的本地存儲(chǔ)方式：localStorage和sessionStorage。
- localStorage：長(zhǎng)期將數(shù)據(jù)保持到某個(gè)用戶(hù)的計(jì)算機(jī)上肥矢，無(wú)論當(dāng)前網(wǎng)頁(yè)是否被打開(kāi)端衰。如果切換用戶(hù)，或者同一個(gè)用戶(hù)登錄另一臺(tái)計(jì)算機(jī)甘改，將無(wú)法取得原來(lái)的數(shù)據(jù)旅东。
- sessionStorage：臨時(shí)保持針對(duì)一個(gè)窗口的數(shù)據(jù)。也就是說(shuō)十艾，一旦用戶(hù)關(guān)閉窗口抵代，或者打開(kāi)一個(gè)新標(biāo)簽訪問(wèn)同一個(gè)網(wǎng)頁(yè)，將無(wú)法取得原來(lái)的數(shù)據(jù)忘嫉。
下面再進(jìn)一步講解著兩種storage知識(shí)荤牍。
(1) cookie，localStorage和sessionStorage
| cookie | localStorage | sessionStorage | |
|---|---|---|---|
| 生命周期 | 默認(rèn)保存在瀏覽器內(nèi)存中庆冕，瀏覽器關(guān)閉時(shí)清除cookies康吵；如果設(shè)置expires屬性值，將把cookies保存在硬盤(pán)中愧杯，有效期為expires的值 | 沒(méi)有時(shí)間限制涎才，一直保存在本地計(jì)算機(jī)上 | 關(guān)閉瀏覽器窗口或關(guān)閉瀏覽器時(shí)就會(huì)清空 |
| 作用域 | 同源 | 同源 | 只能在當(dāng)前窗口共享 |
| 存儲(chǔ)大小 | 4K左右 | 5M或更大 | 5M或更大 |
(2) 方法
localStorage和sessionStorage提供的方法一樣，和存儲(chǔ)相關(guān)的方法有setItem()力九，getItem()耍铜，removeItem()，clear()跌前。下面就增刪改查操作做個(gè)簡(jiǎn)單實(shí)例：
//存儲(chǔ)簡(jiǎn)單數(shù)據(jù)棕兼，鍵為user_name，值為nicole
localStorage.setItem("user_name", "nicole");
localStorage.setItem("user_age", 30);
//存儲(chǔ)對(duì)象
var obj = {city: "hangzhou", country: "China"};
localStorage.setItem("user_obj", JSON.stringify(obj));
//讀取數(shù)據(jù)
console.log("user_name:" + localStorage.getItem("user_name"));
console.log("user_age:" + localStorage.getItem("user_age"));
console.log("user_obj:" + localStorage.getItem("user_obj"));
//將存儲(chǔ)的對(duì)象數(shù)據(jù)轉(zhuǎn)為對(duì)象使用
var read_obj = JSON.parse(localStorage.getItem("user_obj"));
//修改數(shù)據(jù)
localStorage["user_name"] = "nicole_2";
console.log(localStorage.getItem("user_name"));
//刪除數(shù)據(jù)
localStorage.removeItem("user_name");
console.log(localStorage.getItem("user_name"));
//清空所有數(shù)據(jù)
localStorage.clear();
console.log(localStorage.getItem("user_age"));
-------------------------------------------------------------------------------------------------------
//控制臺(tái)打印結(jié)果為:
user_name:nicole
user_age:30
user_obj:{"city":"hangzhou","country":"China"}
nicole_2
null
null
同時(shí)抵乓，支持storage事件響應(yīng)存儲(chǔ)變化伴挚。一旦數(shù)據(jù)發(fā)生變化，如增加灾炭，減少茎芋，修改，即會(huì)觸發(fā)storage事件蜈出。如下面例子：
<body>
<button onclick="add()">Add</button>
<script>
//監(jiān)聽(tīng)數(shù)據(jù)改變
window.addEventListener("storage", function () {
console.log("update...");
}, false);
function add() {
localStorage.setItem("item", "newItem");
}
</script>
</body>
打開(kāi)兩個(gè)同樣的頁(yè)面田弥，在其中一個(gè)頁(yè)面點(diǎn)擊Add按鈕，向localStorage添加一條新數(shù)據(jù)铡原，然后查看另外一個(gè)頁(yè)面控制臺(tái)偷厦，會(huì)發(fā)現(xiàn)打印出update...信息商叹。這說(shuō)明，storage事件被觸發(fā)只泼。
2. 文件處理
前面《新標(biāo)簽和新屬性》一節(jié)提到過(guò)剖笙，<input type="file" onchange="readFile(this.files)">可以打開(kāi)文件選擇對(duì)話框，那么请唱，選擇文件之后呢弥咪？HTML5還提供了File API從硬盤(pán)上提取文件，交給網(wǎng)頁(yè)中運(yùn)行的JavaScript十绑。
HTML5 File API只能讀取文件酪夷，不能修改或創(chuàng)建文件。讀取文件有四種形式：readAsText()孽惰，readAsBinaryString()晚岭，readAsDataURL()（可以將二進(jìn)制圖片內(nèi)容轉(zhuǎn)成base64的格式），readAsArrayBuffer()勋功，最常用的是第一種坦报。參考下面例子（將選擇的文件內(nèi)容以字符串方式顯示在頁(yè)面上）：
<body>
<!-- 隱藏原生的標(biāo)準(zhǔn)上傳控件，隱式觸發(fā)提交操作-->
<button onclick="readFileBtn()">read a file</button>
<input type="file" style="display: none" id="fileInput" onchange="readFile(this.files)"/>
<div id="fileContent"></div>
<script>
function readFileBtn() {
var fileInput = document.getElementById("fileInput");
//觸發(fā)fileInput元素的onchange事件
fileInput.click();
}
function readFile(files) {
// 默認(rèn)是文件數(shù)組
var file = files[0];
// 將文件內(nèi)容轉(zhuǎn)換為長(zhǎng)字符串狂鞋，并觸發(fā)reader.onload事件
reader.readAsText(file);
}
//處理文件的對(duì)象片择，F(xiàn)ileReader實(shí)例
var reader = new FileReader();
//異步取得文件內(nèi)容
reader.onload = function (e) {
var fileContent = document.getElementById("fileContent");
fileContent.textContent = e.target.result;
}
</script>
</body>
HTML5也支持一次讀取多個(gè)文件，使用multiple屬性骚揍。
<input type="file" id="fileInput" onchange="readFile(this.files)" multiple/>
下一節(jié)：HTML5簡(jiǎn)明教程（五）離線應(yīng)用
