HTML5简明教程（四）Web存储
HTML5的Web存储涉及两部分内容，一是数据存储，支持更多本地存储方案；二是文件读取，支持了File API。
1. 本地存储
Web应用中数据存储有两种方式：一是Web服务器，二是客户端存储，也就是本地存储。
HTML5出现之前，本地存储只有一种方式：cookie。但是，cookie有着明显的缺点，存储数据量少，会被携带到HTTP请求上增加传输开销......HTML5提供两种新的本地存储方式：localStorage和sessionStorage。
- localStorage：长期将数据保持到某个用户的计算机上，无论当前网页是否被打开。如果切换用户，或者同一个用户登录另一台计算机，将无法取得原来的数据。
- sessionStorage：临时保持针对一个窗口的数据。也就是说，一旦用户关闭窗口，或者打开一个新标签访问同一个网页，将无法取得原来的数据。
下面再进一步讲解着两种storage知识。
(1) cookie，localStorage和sessionStorage
| cookie | localStorage | sessionStorage | |
|---|---|---|---|
| 生命周期 | 默认保存在浏览器内存中，浏览器关闭时清除cookies；如果设置expires属性值，将把cookies保存在硬盘中，有效期为expires的值 | 没有时间限制，一直保存在本地计算机上 | 关闭浏览器窗口或关闭浏览器时就会清空 |
| 作用域 | 同源 | 同源 | 只能在当前窗口共享 |
| 存储大小 | 4K左右 | 5M或更大 | 5M或更大 |
(2) 方法
localStorage和sessionStorage提供的方法一样，和存储相关的方法有setItem()，getItem()，removeItem()，clear()。下面就增删改查操作做个简单实例：
//存储简单数据，键为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));
//读取数据
console.log("user_name:" + localStorage.getItem("user_name"));
console.log("user_age:" + localStorage.getItem("user_age"));
console.log("user_obj:" + localStorage.getItem("user_obj"));
//将存储的对象数据转为对象使用
var read_obj = JSON.parse(localStorage.getItem("user_obj"));
//修改数据
localStorage["user_name"] = "nicole_2";
console.log(localStorage.getItem("user_name"));
//删除数据
localStorage.removeItem("user_name");
console.log(localStorage.getItem("user_name"));
//清空所有数据
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事件响应存储变化。一旦数据发生变化，如增加，减少，修改，即会触发storage事件。如下面例子：
<body>
<button onclick="add()">Add</button>
<script>
//监听数据改变
window.addEventListener("storage", function () {
console.log("update...");
}, false);
function add() {
localStorage.setItem("item", "newItem");
}
</script>
</body>
打开两个同样的页面，在其中一个页面点击Add按钮，向localStorage添加一条新数据，然后查看另外一个页面控制台，会发现打印出update...信息。这说明，storage事件被触发。
2. 文件处理
前面《新标签和新属性》一节提到过，<input type="file" onchange="readFile(this.files)">可以打开文件选择对话框，那么，选择文件之后呢？HTML5还提供了File API从硬盘上提取文件，交给网页中运行的JavaScript。
HTML5 File API只能读取文件，不能修改或创建文件。读取文件有四种形式：readAsText()，readAsBinaryString()，readAsDataURL()（可以将二进制图片内容转成base64的格式），readAsArrayBuffer()，最常用的是第一种。参考下面例子（将选择的文件内容以字符串方式显示在页面上）：
<body>
<!-- 隐藏原生的标准上传控件，隐式触发提交操作-->
<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");
//触发fileInput元素的onchange事件
fileInput.click();
}
function readFile(files) {
// 默认是文件数组
var file = files[0];
// 将文件内容转换为长字符串，并触发reader.onload事件
reader.readAsText(file);
}
//处理文件的对象，FileReader实例
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/>
下一节：HTML5简明教程（五）离线应用
微信公众号：
