HTML5的数据存储

《HTML5的数据存储》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、本章要求：第7章HTML5的数据存储WebStorage的基本概念sessionStorage和localStorage两者之间的区别sessionStorage和localStorage的使用方法使用sessionStorage和localStorage进行复杂数据的存储sessionStorage和localStorage进行JavaScript对象的存储使用transactoin方法进行事务的处理主要内容1.WebStorage2.WebSQL数据库3.跨文档消息通信4.综合实例——简单的Web留

2、言本第7章HTML5的数据存储7.1WebStorage7.1.1WebStorage简介7.1.2WebStorage的API7.1.3两种不同存储类型的实例——计数器7.1.4JSON对象的存数实例——用户信息卡在HTML5中，除了Canvas元素之外，另一个新增的非常重要的功能是可以在客户端本地保存数据的WebStorage功能。Web应用的发展，使得客户端存储使用得也越来越多，而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie，但是作为真正的客户端存储，cookie还是

3、有些不足：大小：cookies的大小被限制在4KB。带宽：cookies是随HTTP事物一起发送的，因此会浪费一部分发送cookies时使用的带宽。复杂性：cookies操作起来比较麻烦；所有的信息要被拼到一个长字符串里面。对cookies来说，在相同的站点与多事务处理保持联系不是很容易。在这种情况下，在HTML5中重新提供了一种在客户端本地保存数据的功能，它就是WebStorage功能。WebStorage功能，顾名思义，就是在Web上存储数据的功能，而这里的存储，是针对客户端本地而言的。它包含两种不

4、同的存储类型：SessionStorage和LocalStorage。不管是SessionStorage还是LocalStorage，它们都能支持在同域下存储5MB数据，这相比cookies有着明显的优势。sessionStorage将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。Session对象可以用来保存在这段时间内所要求保存在任何数据。localStorage将数据保存在客户端本地的硬件设

5、备中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。这两种不同的存储类型区别在于，sessionStorage为临时保存，而localStorage为永久保存。7.1.1WebStorage简介下面讲解如何使用WebStorage的API，目前WebStorage的API有如下这些：Length：获得当前webstorage中的数目。key(n)：返回webstorage中的第N个存储条目。getItem(key)：返回指定key的存储内容，如果不存在则返回null。注意

6、，返回的类型是String字符串类型。setItem(key,value)：设置指定key的内容的值为value。removeItem(key)：根据指定的key，删除键值为key的内容。clear：清空webstorate的内容。可以看到，webstorageAPI的操作机制实际上是对键值对进行的操作。下面是一些相关的应用：1．数据的存储与获取在localStorage中设置键值对数据可以应用setItem()，代码如下：localStorage.setItem("key","value);获取数据可

7、以应用getItem()，代码如下;varval=localStorage.getItem("key");当然也可以直接使用localStorage的key方法，而不使用setItem和getItem方法，如下：localStorage.key="value";varval=localStorage.key;7.1.2WebStorage的APIHTML5存储是基于键值对（key/value）的形式存储的，每个键值对称为一个项（item）。存储和检索数据都是通过指定的键名，键名的类型是字符串类型。值可以

8、是包括字符串、布尔值、整数，或者浮点数在内的任意JavaScript支持的类型。但是，最终数据是以字符串类型存储的。调用结果是将字符串value设置到sessionStorage中，这些数据随后可以通过键key获取。调用setItem()时，如果指定的键名已经存在，那么新传入的数据会覆盖原先的数据。调用getItem()时，如果传入的键名不存在，那么会返回null，而不会抛出异常。2．数据的删除和清空removeItem()用于从Stora