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事件。如下面例子：

Add

打开两个同样的页面，在其中一个页面点击Add按钮，向localStorage添加一条新数据，然后查看另外一个页面控制台，会发现打印出update...信息。这说明，storage事件被触发。

2. 文件处理

前面《新标签和新属性》一节提到过，可以打开文件选择对话框，那么，选择文件之后呢？HTML5还提供了File API从硬盘上提取文件，交给网页中运行的JavaScript。

HTML5 File API只能读取文件，不能修改或创建文件。读取文件有四种形式：readAsText()，readAsBinaryString()，readAsDataURL()（可以将二进制图片内容转成base64的格式），readAsArrayBuffer()，最常用的是第一种。参考下面例子（将选择的文件内容以字符串方式显示在页面上）：

read a file

HTML5也支持一次读取多个文件，使用multiple属性。

下一节：HTML5简明教程（五）离线应用

更多高阶内容，可移步《小专栏-娜姐聊前端》。