HTML5 WebStorage

Web前端

1、产生背景

在HTML5中，除了Canvas元素之外，另一个新增的一个重要的功能就是可以在客户端保存数据的WebStorage功能，之前可以使用Cookies在客户端保存诸如用户名密码等简单用户信息，但通过长期使用，人们发现用Cookies储存永久数据存在几个问题：
大小：Cookies的大小被限制在4KB
带宽：Cookies是随HTTP事务一起被发送的，因此会浪费一部分发送Cookies时使用的带宽。
复杂性：要正确的操纵Cookies是很困难的。

针对以上问题，HTML5中，重新提供了一种在客户端本地保存数据的功能。

2、什么是WebStorage

WebStorage功能就是在Web上储存数据的功能，这里的储存是针对客户端本地而言的。具体分两种：sessionStorage和localStorage。

3、WebStroage的分类

WebStorage功能就是在Web上储存数据的功能，这里的储存是针对客户端本地而言的。具体分两种：

1、sessionStorage

将数据保存在session对象中。session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

2、localStorage

将数据保存在客户端本地的硬件设备（硬盘）中，即使浏览器被关闭了，改数据仍然存在，下一次打开浏览器访问网站时仍然可以继续使用。

3、如何使用？

sessionStorage ：

sessionStorage.setItem(key,value);
sessionStorage.getItem(key);

localStorage ：

localStorage.setItem(key,value);
localStorage.getItem(key);

可在谷歌浏览器调试面板中 Application-Storage中看到实时存储的Web Storage 的值。

4、将Web Storage 当作简易数据库使用

//存储数据
var data=new Object;
data.name="zhangsan";
data.email="zhangsan@163.com";
data.tel="13812345678";
var str=JSON.stringify(data);//将Js对象转为字符串
localStorage.setItem(data.name,str);
//提取数据
var objstr=localStorage.getItem("zhangsan");
var obj=JSON.parse(objstr);
//obj.name
//obj.email
//ojb.tel