html5+css3【5】

本地储存

在html5中除了canvas元素，另一个新增的非常重要功能就是可以在本地客户端储存数据的webstorage功能。
在HTML4中我们是使用的cookies在客户端保存用户名等等一些简单的用户信息。
cookies的缺点：

• 1.大小限制在4kb；
• 2.带宽浪费；
• 3.难以操作；

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

sessionStorage 临时保存

session就是在打开网站到关闭网站之间要求 进行保存的数据。
用法：

sessionstorage.setitme（'key','value'）;或sessionStorage.key='value';

临时数据读取方法：

变量=sessionstorage.getitem('key')；或sessionstorage.key；		

localstorage 永久保存

永久保存就是将数据保存在客户端本地的硬件设备上面，如果浏览器被关闭，这个数据不会丢失，下次打开可以继续使用，这个功能就是我们的localstorage永久保存功能。
永久保存数据的方法：

localstorage.setItem（'key','value'）;或localstorage.key;

读取的方法

变量=localstorage.getItem('key');或 变量=localstorage.key;

实战：制作一个简单的留言板

制作留言板需要使用到的函数有3个
1、saveStorage函数
使用“new Date().getTime()”语句来获取当前的日期和时间戳，然后使用localstorage.setitem将获取到的时间戳作为键值，并将文本框中的数据作为键名进行保存。保存后使用loadstorage函数在页面上显示保存后的数据。
2.loadStorage函数
这个函数取得保存后的所有数据，然后以表格的形式进行显示。
两个重要属性

- loadstorage.length
 所有保存在localstorage中的数据条数
 - localstorage.key(index)
想要得到的数据的索引号作为index参数传入，可以得到localstorage中与这个索引号对应的数据。

3.clearStorage函数
将保存在localstorage中的数据全部清除。
用法：localstorage.clear（）；