HTML5的Web存儲涉及兩部分內容，一是數(shù)據(jù)存儲，支持更多本地存儲方案；二是文件讀取，支持了File API。
1. 本地存儲
Web應用中數(shù)據(jù)存儲有兩種方式：一是Web服務器，二是客戶端存儲，也就是本地存儲。
HTML5出現(xiàn)之前，本地存儲只有一種方式：cookie。但是，cookie有著明顯的缺點，存儲數(shù)據(jù)量少，會被攜帶到HTTP請求上增加傳輸開銷......HTML5提供兩種新的本地存儲方式：localStorage和sessionStorage。
- localStorage：長期將數(shù)據(jù)保持到某個用戶的計算機上，無論當前網頁是否被打開。如果切換用戶，或者同一個用戶登錄另一臺計算機，將無法取得原來的數(shù)據(jù)。
- sessionStorage：臨時保持針對一個窗口的數(shù)據(jù)。也就是說，一旦用戶關閉窗口，或者打開一個新標簽訪問同一個網頁，將無法取得原來的數(shù)據(jù)。
下面再進一步講解著兩種storage知識。
(1) cookie，localStorage和sessionStorage
| cookie | localStorage | sessionStorage | |
|---|---|---|---|
| 生命周期 | 默認保存在瀏覽器內存中，瀏覽器關閉時清除cookies；如果設置expires屬性值，將把cookies保存在硬盤中，有效期為expires的值 | 沒有時間限制，一直保存在本地計算機上 | 關閉瀏覽器窗口或關閉瀏覽器時就會清空 |
| 作用域 | 同源 | 同源 | 只能在當前窗口共享 |
| 存儲大小 | 4K左右 | 5M或更大 | 5M或更大 |
(2) 方法
localStorage和sessionStorage提供的方法一樣，和存儲相關的方法有setItem()，getItem()，removeItem()，clear()。下面就增刪改查操作做個簡單實例：
//存儲簡單數(shù)據(jù)，鍵為user_name，值為nicole
localStorage.setItem("user_name", "nicole");
localStorage.setItem("user_age", 30);
//存儲對象
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"));
//將存儲的對象數(shù)據(jù)轉為對象使用
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"));
-------------------------------------------------------------------------------------------------------
//控制臺打印結果為:
user_name:nicole
user_age:30
user_obj:{"city":"hangzhou","country":"China"}
nicole_2
null
null
同時，支持storage事件響應存儲變化。一旦數(shù)據(jù)發(fā)生變化，如增加，減少，修改，即會觸發(fā)storage事件。如下面例子：
<body>
<button onclick="add()">Add</button>
<script>
//監(jiān)聽數(shù)據(jù)改變
window.addEventListener("storage", function () {
console.log("update...");
}, false);
function add() {
localStorage.setItem("item", "newItem");
}
</script>
</body>
打開兩個同樣的頁面，在其中一個頁面點擊Add按鈕，向localStorage添加一條新數(shù)據(jù)，然后查看另外一個頁面控制臺，會發(fā)現(xiàn)打印出update...信息。這說明，storage事件被觸發(fā)。
2. 文件處理
前面《新標簽和新屬性》一節(jié)提到過，<input type="file" onchange="readFile(this.files)">可以打開文件選擇對話框，那么，選擇文件之后呢？HTML5還提供了File API從硬盤上提取文件，交給網頁中運行的JavaScript。
HTML5 File API只能讀取文件，不能修改或創(chuàng)建文件。讀取文件有四種形式：readAsText()，readAsBinaryString()，readAsDataURL()（可以將二進制圖片內容轉成base64的格式），readAsArrayBuffer()，最常用的是第一種。參考下面例子（將選擇的文件內容以字符串方式顯示在頁面上）：
<body>
<!-- 隱藏原生的標準上傳控件，隱式觸發(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) {
// 默認是文件數(shù)組
var file = files[0];
// 將文件內容轉換為長字符串，并觸發(fā)reader.onload事件
reader.readAsText(file);
}
//處理文件的對象，F(xiàn)ileReader實例
var reader = new FileReader();
//異步取得文件內容
reader.onload = function (e) {
var fileContent = document.getElementById("fileContent");
fileContent.textContent = e.target.result;
}
</script>
</body>
HTML5也支持一次讀取多個文件，使用multiple屬性。
<input type="file" id="fileInput" onchange="readFile(this.files)" multiple/>
下一節(jié)：HTML5簡明教程（五）離線應用
