浅谈localStorage、sessionStorage、cookie

这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战 !

简述:

在H4中，本地存储以cookie的方式进行。浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie,session等跟服务端进行数据交互。cookie和session都是用来跟踪浏览器用户身份的会话方式，cookie保存在浏览器端，session保存在服务器端。但是，通过长期的使用，你会发现，用cookie存储永久数据存在以下几个问题：

1. 大小：cookie的大小被限制在4KB。
2. 带宽：cookie是随HTTP事务一起被发送的，因此会浪费一部分发送cookie时使用的带宽。
3. 复杂性：要正确的操纵cookie是很困难的。
4. 针对这些问题，在HTML5中，重新提供了一种在客户端本地保存数据的功能，它就是Web Storage。

针对这些问题，在HTML5中，重新提供了一种在客户端本地保存数据的功能，它就是Web Storage。

具体来说，Web Storage又分为两种：

sessionStorage

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

1，临时存储，只作用与当前标签页 2，存储的数据一般为5MB 3，仅在客户端（即浏览器）中保存，不参与和服务器的通信 4，只能存储字符串数据

localStorage

将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

1. 保存数据到本地 localStorage.setItem('Author', 'local');(第一个参数是保存的变量名，第二个是赋给变量的值)
2. 从本地存储获取数据localStorage.getItem('Author');
3. 从本地存储删除某个已保存的数据 localStorage.removeItem('Author');
4. 清除所有保存的数据 localStorage.clear();

这两者的区别在于，sessionStorage为临时保存，而localStorage为永久保存。

到目前为止，Firefox3.6以上、Chrome6以上、Safari 5以上、Pera10.50以上、IE8以上版本的浏览器支持sessionStorage与localStorage的使用。