第七章HTML5的数据存储.ppt

;;7.1 Web Storage; 在HTML5中，除了Canvas元素之外，另一个新增的非常重要的功能是可以在客户端本地保存数据的Web Storage功能。Web应用的发展，使得客户端存储使用得也越来越多，而实现客户端存储的方式则是多种多样。 最简单而且兼容性最佳的方案是Cookie，但是作为真正的客户端存储，cookie还是有些不足： 大小：cookies的大小被限制在4KB。 带宽：cookies是随HTTP事物一起发送的，因此会浪费一部分发送cookies时使用的带宽。 复杂性：cookies操作起来比较麻烦；所有的信息要被拼到一个长字符串里面。 对cookies来说，在相同的站点与多事务处理保持联系不是很容易。 在这种情况下，在HTML5中重新提供了一种在客户端本地保存数据的功能，它就是Web Storage功能。 Web Storage功能，顾名思义，就是在Web上存储数据的功能，而这里的存储，是针对客户端本地而言的。它包含两种不同的存储类型：Session Storage和Local Storage。不管是Session Storage还是Local Storage，它们都能支持在同域下存储5MB数据，这相比cookies有着明显的优势。 sessionStorage 将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。Session对象可以用来保存在这段时间内所要求保存在任何数据。 localStorage 将数据保存在客户端本地的硬件设备中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。 这两种不同的存储类型区别在于，sessionStorage为临时保存，而localStorage为永久保存。;下面讲解如何使用WebStorage的API，目前WebStorage的API有如下这些： Length：获得当前webstorage中的数目。 key(n)：返回webstorage中的第N个存储条目。 getItem(key)：返回指定key的存储内容，如果不存在则返回null。注意，返回的类型是String字符串类型。 setItem(key, value)：设置指定key的内容的值为value。 removeItem(key)：根据指定的key，删除键值为key的内容。 clear：清空webstorate的内容。 可以看到，webstorage API的操作机制实际上是对键值对进行的操作。下面是一些相关的应用： 1．数据的存储与获取 在localStorage中设置键值对数据可以应用setItem()，代码如下： localStorage.setItem(key, value); 获取数据可以应用getItem()，代码如下; var val = localStorage.getItem(key); 当然也可以直接使用localStorage的key方法，而不使用setItem和getItem方法，如下： localStorage.key = value; var val = localStorage.key; ;;2．数据的删除和清空 removeItem()用于从Storage列表删除数据代码如下： var val = sessionStorage.removeItem(key); 也可以通过传入数据项的key从而删除对应的存储数据代码如下： var val = sessionStorage.removeItem(1); 说明： 数字1会被转换为string，因为key的类型就是字符串。 clear()方法用于清空整个列表的所有数据，代码如下： sessionStorage.clear(); 同时可以通过使用length属性获取Storage中存储的键值对的个数： var val = sessionStorage.length; 注意： removeItem可以清除给定的key所对应的项，如果key不存在则“什么都不做”；clear会清除所有的项，如果列表本来就是空的就“什么都不做”。 ;【例7-1】 本节通过一个实例来具体看一下sessionStorage和localStorage的区别。本例主要是通过sessionStorage和localStorage对页面的访问量进行计数。当在文本框内输入数据后，分别可以单击“session保存”按钮和“local保存”按钮对数据进行保存，还可以通过“session读取”按钮和“local读取”按钮对数据进行读取。但是两种方法对数据的处理方式不一样，使用sessionS