在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();