第8章本地存储.pptVIP

;本章介绍HTML 5中与本地存储相关的两个策要内容——Web Storage与本地数据库 Web Storage存储机制是对HTML 4中cookies存储机制的一个改善 HTML 5中不再使用cookies，转而使用改良后的Web Storage存储机制 本地数据库 是HTML 5中新增的一个功能;cookies储存永久数 据存在以下几个问题： □大小：cookies的大小被限制在4KB。 ., □带宽：cookies是随HTTP事务一起被发送的，因此会浪费一部分发送cookies时使用的 带宽。 □复杂性：要正确地操纵cookies是很困难的。 在这种情况下，在HTML 5中重新提供了一种在客户端本地保存数据的功能，它就是 Web Storage功能。 Web Storage功能，顾名思义，就是在Web上储存数据的功能，而这里的储存，是针对客 户端本地而言的;Web Storage又分为两种: sessionStorage 将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到 浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用 来保存在这段时间内所要求保存的任何数据。 localStorage 将数据保存在客户端本地的硬件设备（通常指硬盘，但也可以是其他硬件设备）中，即 使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用;!DOCTYPE html head meta charset=UTF-8 titleWeb Storage示例/title script type=text/javascript src=script.js/script /head body h1Web Storage 示例/h1 p id=msg/p input type=text id=input input type=button value=保存数据 onclick=saveStorage(input); input type=button value=读取数据 onclick=loadStorage(msg); /body /html;但是两种方法对数据的处理方式不一样，使用sessionStorage方法时，如果关闭了浏览器， 这个数据就丢失了，下一次打开浏览器，点击读取数据按钮时，读取不到任何数据。 使用localStorage方法时，即使浏览器关闭了，下次打开浏览器时仍然能够读取被保存的 数据。但是，数据保存是按不同的浏览器分别进行的，也就是说，如果打开别的浏览器，是 读取不到在这个浏览器中保存的数据的;我们来看一下读取数据部分。下面是读写数据时使用的基本方法。 sessionStorage 保存数据：sessionStorage.setltem (key,value) 读取数据：变量=sessionStorage.getItem(key) localStorage 保存数据：localStorage.setltem (key,value), 读取数据：变量=localStorage.getltem(key) 保存时不允许重复保存相同的键名。保存后可以修改键值，伹不允许修改键名（只能重 新取键名，然后再保存键值）。 script.js脚本文件中的内容如代码清单8-2所示;//sessionStorage示例 function saveStorage(id) { var target = document.getElementById(id); var str = target.value; sessionStorage.setItem(message,str); //或sessionStorage.message=str; } function loadStorage(id) { var target = document.getElementById(id); var msg = sessionStorage.getItem(message); //或var msg=sessionStorage.message; target.innerHTML = msg; };//localStorage示例 function saveStorage(id) { var target = document.getElementById(id); var str = target.value; localStorage.setItem(messag