第7章HTML5的数据存储.ppt
《第7章HTML5的数据存储.ppt》由会员分享,可在线阅读,更多相关《第7章HTML5的数据存储.ppt(34页珍藏版)》请在三一文库上搜索。
1、,本章要求:,第7章 HTML5的数据存储,Web Storage的基本概念 sessionStorage和localStorage两者之间的区别 sessionStorage和localStorage的使用方法 使用sessionStorage和localStorage进行复杂数据的存储 sessionStorage和localStorage进行JavaScript对象的存储 使用transactoin方法进行事务的处理,主要内容,1. Web Storage 2. Web SQL数据库 3. 跨文档消息通信 4. 综合实例简单的Web留言本,第7章 HTML5的数据存储,7.1 Web S
2、torage,7.1.1 Web Storage简介 7.1.2 WebStorage的API 7.1.3 两种不同存储类型的实例计数器 7.1.4 JSON对象的存数实例用户信息卡,在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以在客户端本地保存数据的Web Storage功能。Web应用的发展,使得客户端存储使用得也越来越多,而实现客户端存储的方式则是多种多样。 最简单而且兼容性最佳的方案是Cookie,但是作为真正的客户端存储,cookie还是有些不足: 大小:cookies的大小被限制在4KB。 带宽:cookies是随HTTP事物一起发送的,因此会浪费一部分
3、发送cookies时使用的带宽。 复杂性:cookies操作起来比较麻烦;所有的信息要被拼到一个长字符串里面。 对cookies来说,在相同的站点与多事务处理保持联系不是很容易。 在这种情况下,在HTML5中重新提供了一种在客户端本地保存数据的功能,它就是Web Storage功能。 Web Storage功能,顾名思义,就是在Web上存储数据的功能,而这里的存储,是针对客户端本地而言的。它包含两种不同的存储类型:Session Storage和Local Storage。不管是Session Storage还是Local Storage,它们都能支持在同域下存储5MB数据,这相比cookie
4、s有着明显的优势。 sessionStorage 将数据保存在session对象中。所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。Session对象可以用来保存在这段时间内所要求保存在任何数据。 localStorage 将数据保存在客户端本地的硬件设备中,即使浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可以继续使用。 这两种不同的存储类型区别在于,sessionStorage为临时保存,而localStorage为永久保存。,7.1.1 Web Storage简介,下面讲解如何使用WebStorage
5、的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数据
6、的存储与获取 在localStorage中设置键值对数据可以应用setItem(),代码如下: localStorage.setItem(“key“, “value); 获取数据可以应用getItem(),代码如下; var val = localStorage.getItem(“key“); 当然也可以直接使用localStorage的key方法,而不使用setItem和getItem方法,如下: localStorage.key = “value“; var val = localStorage.key;,7.1.2 WebStorage的API,HTML5存储是基于键值对(key/val
7、ue)的形式存储的,每个键值对称为一个项(item)。 存储和检索数据都是通过指定的键名,键名的类型是字符串类型。值可以是包括字符串、布尔值、整数,或者浮点数在内的任意JavaScript支持的类型。但是,最终数据是以字符串类型存储的。 调用结果是将字符串value设置到sessionStorage中,这些数据随后可以通过键key获取。调用setItem()时,如果指定的键名已经存在,那么新传入的数据会覆盖原先的数据。调用getItem()时,如果传入的键名不存在,那么会返回null,而不会抛出异常。,2数据的删除和清空 removeItem()用于从Storage列表删除数据代码如下: va
8、r val = sessionStorage.removeItem(key); 也可以通过传入数据项的key从而删除对应的存储数据代码如下: var val = sessionStorage.removeItem(1); 说明: 数字1会被转换为string,因为key的类型就是字符串。 clear()方法用于清空整个列表的所有数据,代码如下: sessionStorage.clear(); 同时可以通过使用length属性获取Storage中存储的键值对的个数: var val = sessionStorage.length; 注意: removeItem可以清除给定的key所对应的项,如果
9、key不存在则“什么都不做”;clear会清除所有的项,如果列表本来就是空的就“什么都不做”。,【例7-1】 本节通过一个实例来具体看一下sessionStorage和localStorage的区别。本例主要是通过sessionStorage和localStorage对页面的访问量进行计数。当在文本框内输入数据后,分别可以单击“session保存”按钮和“local保存”按钮对数据进行保存,还可以通过“session读取”按钮和“local读取”按钮对数据进行读取。但是两种方法对数据的处理方式不一样,使用sessionStorage方法时,如果关闭了浏览器,这个数据就丢失了下一次打开浏览器,点
10、击读取数据按钮时,读取不到任何数据。使用localStorage方法时,即使浏览器关闭了,下次打开浏览器时仍然能够读取保存的数据。但是,数据保存是按不同的浏览器分别进行的,也就是说,如果打开别的浏览器,是读取不到在这个浏览器中保存的数据的。实现本例的具体步骤如下: (1)首先,需要准备一个用来保存数据的网页。在本例网页中,在页面上放置的控件如表所示7-1所示。 表7-1 Web Storage示例的页面中元素,7.1.3 两种不同存储类型的实例计数器,该实例的HTML页面代码如下。 要保存的数据: session计数: local计数:,(2)在javascript脚本中分别使用了sessio
11、nStorage和localStorage两种方法。这两种方法都是当用户在input文本框中输入内容时“session保存”按钮和“local保存”按钮对数据进行保存,通过“session读取”按钮和“local读取”按钮对数据进行读取。实现的代码如下。 function getE(ele) /自定义一个getE()函数 /返回并调用document对象的getElementById方法输出变量 return document.getElementById(ele); var text_1 = getE(text-1), /声明变量并为其赋值 mag = getE(msg_1), btn_1
12、= getE(btn-1), btn_2 = getE(btn-2), btn_3 = getE(btn-3), btn_4 = getE(btn-4); btn_1.onclick = saveSessionStorage; btn_2.onclick = loadSessionStorage; btn_3.onclick = saveLocalStorage; btn_4.onclick = loadLocalStorage; function saveSessionStorage() sessionStorage.setItem(msg,text_1.value + session);
13、function loadSessionStorage() mag.innerHTML = sessionStorage.getItem(msg); function saveLocalStorage() localStorage.setItem(msg,text_1.value + local); function loadLocalStorage() mag.innerHTML = localStorage.getItem(msg); ,(3)最后,通过三元运算符来定义记录页面的次数,然后通过setItem方法对数据进行保存,代码如下。 var local_count = localSto
14、rage.getItem(a_count)?localStorage.getItem(a_count):0; getE(local_count).innerHTML = local_count; localStorage.setItem(a_count,+local_count+1); var session_count = sessionStorage.getItem(a_count)?sessionStorage.getItem(a_count):0; getE(session_count).innerHTML = session_count; sessionStorage.setItem
15、(a_count,+session_count+1);,本例在Opera10浏览器中的运行结果如图7-1所示。 图7-1 Opera10浏览器中的WebStorage示例,虽然HTML5 Web Storage规范允许将任意类型的对象保存为键值对形式,实际情况却是一些浏览器将数据限定为文本字符串类型。不过,既然现代浏览器原生支持JSON,这就解决了这个问题。JSON格式是Javascript Object Notation的缩写,是将Javascript中的对象作为文本形式来保存时使用的一种格式。 JSON是一种将对象与字符串可以相互表示的数据转换标准。JSON一直是通过HTTP将对象从浏览器
16、传送到服务器一种常用格式。现在,可以通过序列化复杂对象将JSON数据保存在Storage中,以实现复杂数据类型的持久化。,7.1.4 JSON对象的存数实例用户信息卡,【例7-2】 该实例中,将用户的信息使用JSON格式进行保存。使用JSON的格式作为文本保存来保存对象,获取该对象时再通过JSON格式来获取,可以保存和读取具有复杂结构的数据。本例实现的具体过程如下。 (1)编写显示页面用的HTML代码部分。在该页面中,除了输入数据用的文本框与显示数据用的p元素之外,还放置了“保存”与“按姓名查询”按钮,点击“保存按钮”来保存数据,点击“按姓名查询”按钮来查询用户信息,实现的代码如下。 姓名:
17、EMAIL: 电话号码: 备注: 查询:: ,(2)在HTML页面中调用saveStorage函数来对数据实现保存,在这个函数中首先从各输入文本框中获取数据,然后创建对象,将获取的数据作为对象的属性进行保存。为了将数据保存在一个对象中,使用new Object语句创建了一个对象,将各种数据保存在该对象的各个属性中,为了将对象转换成JSON格式的文本数据,使用了JSON对象的stringify方法。该方法的使用方法如下。 var str = JSON.stringify(data); 该方法接受一个参数data,该参数表示要转换成JSON格式文本数据的对象。这个方法的作用是将对象转换成JSON格
18、式的文本数据,并将其返回。 最后将文本数据保存在localStorage中,实现的代码如下。 function saveStorage() var data = new Object; data.name = document.getElementById(name).value; data.email = document.getElementById(email).value; data.tel = document.getElementById(tel).value; data.memo = document.getElementById(memo).value; var str = J
19、SON.stringify(data); localStorage.setItem(data.name,str); alert(“数据已保存。“); ,(3)在HTML页面中调用findStorage函数,对数据进行查询。在该函数中,首先从localStorage中,将查询用的姓名作为键值,获取对应的数据。将获取的数据转换成JSON对象。该函数的关键是使用JSON对象的parse方法,将从localStorage中获取的数据转换成JSON对象。该方法的使用方法如下。 var data = JSON.parse(str); 该方法接受一个参数str,此参数表示从localStorage中取得的数
20、据,该方法的作用是将传入的数据转换为JSON对象,并且将该对象返回。 在取得JSON对象的各个属性值之后,创建要输出的内容,最后将要输出的内容在页面上输出。实现的代码如下。 function findStorage(id) var find = document.getElementById(find).value; var str = localStorage.getItem(find); var data = JSON.parse(str); var result = “姓名: “ + data.name + ; result += “EMAIL: “ + data.email + ; r
21、esult += “电话号码: “ + data.tel + ; result += “备注: “ + data.memo + ; var target = document.getElementById(id); target.innerHTML = result; ,用户信息卡分为姓名、E-mail地址、电话号码、说明这几列,把它们保存在localStorage中。在查询中以用户的姓名进行检索,可以获取这个用户的所有联系信息。用户信息卡的运行效果如下7-2所示。 图7-2 使用JSON对象实现的用户信息卡,7.2 Web SQL数据库,7.2.1 Web SQL数据库简介 7.2.2 We
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML5 数据 存储
链接地址:https://www.31doc.com/p-3407577.html