Web Storsge本地存储

在HTML5中，除了CANVAS元素，另外一个新增的非常重要功能就是可以在本地客户端储存数据的Web Storage功能。
在HTML4 我们是使用的cookies在客户端保存用户名等等一些简单的用户信息。
cookies的缺点：
1）、大小限制在4KB；
2）、带宽浪费；
3）、难以操作；

为了解决这样的一些问题，在HTML5中重新提供了在客户端保存数据的功能，他就是我们的“Web Storage”。

这个小章节我们来简单了解，sessionStorage和localStorage之间的区别，掌握两者的基本用法。

1、sessionStorage临时保存
就是把数据保存在session对象之中。
session就是在打开网站到关闭网站之间要求进行保存的数据。

sessionStorage
临时保存的用法：
sessionStorage.setitme('key','value');
//或者是sessionStorage.key = 'value';
临时数据读取的方法：
变量=sessionStorage.getItem（'key'）
//或者是sessionStorage.key;
2、localStorage永久保存
就是将数据保存在客户端本地的硬件设备至上面，如果浏览器被关闭，这个数据不会丢失，下次打开可以继续使用。这个功能就是我们的localStorage永久保存功能。
localStorage
永久保存数据的方法：
localStorage.setItem（'key','value'）;
//或者
localstorage.key;
读取的方法：
变量=localStorage.getItem（'key'）;
//或者
变量=localStorage.key;

2、实战简单的访客留言板
制作留言板需要使用到的函数有3个
1、saveStorage函数
使用“new Date().getTime()”语句来获取当前的日期和时间戳，然后使用localStorage.setItem将获取到的时间戳作为键值，并将文本框中的数据作为键名进行保存。保存后使用loadStorage函数在页面上显示保存后的数据。
2、loadStorage函数
这个函数取得保存后的所有数据，然后以表格的形式进行显示。
两个重要的属性：
1）、loadStorage.length
所有保存在localStorage中的数据条数。
2）、localStorage.key（index）
想要得到的数据的索引号作为index参数传入，可以得到得到localStorage中与这个索引号对应的数据。
3）、clearStorage函数
将保存在localStorage中的数据全部清除。
用法：localStorage.clear();