HTML5基础（Web Storage）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/jiangguangchao/article/details/53759752

Cookies的弊端

        在html5中，除了增加Canvas之外，还增加了一个非常重要的功能，那就是可以在客户端本地保存数据的Web Storage。
之前我们使用Cookies来保存本地一些数据，但是Cookies存在如下问题：

1. 大小：Cookies的大小被限制在4KB
2. 带宽:：Cookies是随着Http事务一起被发送的，会浪费不必要的带宽
3. 复杂性：要正确操作Cookies是比较复杂的

Web Storage综述

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

sessionStorage

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

localStorage

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

Web Storage使用方法

不论是sessionStorage还是localStorage，都是以键值对的方式存储的数据

sessionStorage

sessionStorage.setItem("message","messageContent");   //保存数据
sessionStorage.getItem("message");                    //读取数据

localStorage

localStorage.setItem("message","messageContent");   //保存数据
localStorage.getItem("message");                    //读取数据