《chap16本地存储与离线应用》由会员分享，可在线阅读，更多相关《chap16本地存储与离线应用（62页珍藏版）》请在金锄头文库上搜索。
1、第第16章章 本地存储本地存储与离线应用与离线应用1主要内容主要内容1.概述2.localStorage和sessionStorage3.留言板示例4.Storage事件监听5.练习与习题21、概述、概述31、概述、概述-WebStorage有同学可能会问，既然有了cookie本地存储，为什么还要引入WebStorage的概念？41、概述、概述HTML4的本地数据存储方式的本地数据存储方式 会话（Session）跟踪是Web程序中常用的技术，用来跟踪用户的整个会话在传统的Web程序中，通常使用Cookie和Session来存储本地数据。Cookie通过在客户端记录信息确定用户身份，Sessio
2、n通过在服务器端记录信息确定用户身份。5Cookie（小饼干）（小饼干）有时也用其复数形式Cookies，指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）。Cookie是由服务器端生成，发送给User-Agent（一般是浏览器），浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器（前提是浏览器设置为启用cookie）。服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。6Cookie工作原理7Session工作原理8主要用途主要用途服务器可以利
3、用Cookies包含信息的任意性来筛选并经常性维护这些信息，以判断在HTTP传输中的状态。1、Cookies最典型的应用是判定注册用户是否已经登录网站。2、“购物车”之类处理。用户可能会在一段时间内在同一家网站的不同页面中选择不同的商品，这些信息都会写入Cookies，以便在最后付款时提取信息。9Cookie缺陷缺陷1. 数据大小：作为存储容器，cookie的大小限制在4KB左右,这是非常坑爹的，尤其对于现在复杂的业务逻辑需求，4KB的容量除了存储一些配置字段还简单单值信息，对于绝大部分开发者来说真的不知指望什么了。2. 安全性问题：由于在HTTP请求中的cookie是明文传递的（HTTPS不
4、是），带来的安全性问题还是很大的。当多人共用一台计算机时使用Cookie可能会泄露用户隐私，也带来安全问题3. 网络负担：我们知道cookie会被附加在每个HTTP请求中，在HttpRequest 和HttpResponse的header中都是要被传输的，所以无形中增加了一些不必要的流量损失。10WebStorageWebStorage是HTML新增的本地存储解决方案之一，但并不是为了取代cookie而制定的标准。cookie作为HTTP协议的一部分用来处理客户端和服务器通信是不可或缺的，session正是依赖于实现的客户端状态保持。WebStorage的意图在于解决本来不应该cookie做，
5、却不得不用cookie的本地存储。11WebStorageWebStorage功能，就是在Web上存储数据，提供两种类型的API：localStorage和sessionStorage。区别：localStorage在本地永久性存储数据，除非显式将其删除或清空。sessionStorage存储的数据只在会话期间有效，关闭浏览器则自动删除。两个对象都有共同的API。12浏览器的支持浏览器的支持13检检查查浏浏览览器器是是否否支支持持WebStorage-请请打打开开ex3_1.html检测浏览器是否支持14Storage 接口接口interface Storage Storage 接口接口 re
6、adonly attribute unsigned long length; DOMString? key(unsigned long index); getter DOMString getItem(DOMString key); setter creator void setItem(DOMString key, DOMString value); deleter void removeItem(DOMString key); void clear();length:唯一的属性，只读，用来获取唯一的属性，只读，用来获取storage内的键内的键值对数量。值对数量。key：根据：根据inde
7、x获取获取storage的键名的键名getItem：根据：根据key获取获取storage内的对应内的对应valuesetItem：为：为storage内添加键值对内添加键值对removeItem：根据键名，删除键值对：根据键名，删除键值对clear：清空：清空storage对象对象15localStorage和和sessionStorage操作操作localStorage和和sessionStorage都具有相同的操作方法，例如都具有相同的操作方法，例如setItem、getItem和和removeItem等等localStorage和和sessionStorage的方法：的方法：setIt
8、em setItem 存储存储valuevalue 用途：将用途：将valuevalue存储到存储到keykey字段字段 用法：用法：.setItem( key, value) 代码示例：代码示例： sessionStorage.setItem(key, value); sessionStorage.setItem(key, value); localStorage.setItem(site, js8.in); localStorage.setItem(site, js8.in);16也可以通过localStorage.和localStorage的形式访问localstorage数据。例如，下
9、面3条语句都可以在localstorage中存储键名为key、值为value的数据：localStorage.setItem(key, value);localStorage.key = value;localStoragekey = value;注：保存时，不允许重复保存相同的键名，保存后可以修改键值，但不允许修改键名localStorage和和sessionStorage操作操作17getItem获取value用途：获取指定key本地存储的值用法：.getItem(key)代码如下:var value = sessionStorage.getItem(key); var site = lo
10、calStorage.getItem(site);localStorage和和sessionStorage操作操作18也可以通过localStorage.和localStorage的形式访问localstorage数据。例如，下面3条语句都可以获取localstorage中存储的键名为key的数据值到变量value中：var value = localStorage.getItem(key);var value = localStorage.key;var value = localStoragekey;localStorage和和sessionStorage操作操作1920removeIte
11、m删除指定key用途：删除指定key本地存储的值用法：.removeItem(key)代码示例：sessionStorage.removeItem(key); localStorage.removeItem(site);localStorage和和sessionStorage操作操作21clear清除所有的key/value用途：清除所有的key/value用法：.clear()代码示例：sessionStorage.clear(); localStorage.clear();localStorage和和sessionStorage操作操作22232、简单、简单Web留言本留言本如果要保存的数
12、据量比较大的话，使用上述方法会比较麻烦简单Web留言本示例，要求：使用一个多行文本框来输入数据点击按钮时将文本框中的数据保存到localStorage中在表单下部放置一个table元素来显示保存后的数据保存内容时，同时保存当前日期和时间，并将该日期和时间一并显示在p元素中24示例：示例：253、作为简易数据库使用、作为简易数据库使用如如果果想想要要将将WebStorage作作为为数数据据库库来来使使用用的的话话，需需要要考考虑虑几几个问题：个问题：数据库中的表都分为几列，怎样实现对列的管理数据库中的表都分为几列，怎样实现对列的管理怎样实现数据的检索功能怎样实现数据的检索功能实实现现对对列列的的
13、管管理理，可可以以使使用用JSON格格式式（JavaScript object Notation，是是将将JavaScript中中的的对对象象作作为为文文本本形形式式来来保保存存时时使使用的一种格式），获取对象时再通过用的一种格式），获取对象时再通过JSON格式获取格式获取 JSON JSON是一种将对象与字符串可以相互表示的数据转换标准是一种将对象与字符串可以相互表示的数据转换标准JSON.parse:将将JavaScript对对象象表表示示法法的的JSON字字符符串串转转换换为为对象对象(字符串转对象字符串转对象)JSON.stringify:JavaScript json对对象象转转换换
14、为为JavaScript对对象象表示法的表示法的JSON字符串字符串(对象转为字符串对象转为字符串)26示例：客户信息管理网页示例：客户信息管理网页客户的信息分为：姓名、E-Mail地址、电话号码、备注，需要把它们保存在localStorage中，如果输入用户姓名，可以进行检索并获取该客户的所有信息2728小结：为什么比小结：为什么比cookie好好1. 从容量上讲WebStorage一般浏览器提供5M的存储空间，用来存储视频、图片神马的不够，但对于绝大部分操作足矣2.安全性上WebStorage并不作为HTTP header发送的浏览器，所以相对安全3.从流量上讲，因为WebStorage不
15、传送到服务器，所以不必要的流量可以节省，这样对于高频次访问或者针对手机移动设备的网页还是很不错的。292.5 storage事件事件 HTML5提 供 一 个 storage事 件 ， 当 setItem()、 removeItem()或者clear()方法被调用，并且数据真的发生了改变时，storage事件就会被触发。注意，只有数据真的发生了变化，才会触发storage事件。也就是说，如果当前的存储区域是空的，调用clear()是不会触发事件的。或者通过setItem()来设置一个与现有值相同的值，storage事件也是不会被触发的torage事件的。312.5 storage事件事件 Ev
16、ent对象包含如下属性： storageArea，表示存储类型（localstorage或sessionstorage）； key，发生改变的项的key oldValue，发生改变的项的原值 newValue，发生改变的项的新值 url， key改变发生的URL3233二、本地数据库二、本地数据库在HTML5中，大大丰富了客户端本地可以存储的内容，添加了很多功能来将原本必须要保存在服务器上的数据转为保存在客户端本地，从而大大提高了Web应用程序的性能，减轻了服务器端的负担，使Web时代重新回到了“客户端为重，服务器端为轻”的时代数据库的本地存储功能就是其中的代表HTML4中，数据库只能放在服务
17、器端，只能通过服务器来访问数据库，但是在HTML5中，可以像访问本地文件那样轻松的对内置数据库进行直接访问了341、SQLite数据库数据库SQLite，是一款轻型的关系数据库，设计目标是嵌入式系统，目前已经在很多嵌入式产品中使用了它它占用资源非常低，在嵌入式设备中，可能只需要几百K的内存就够了。它能够支持Windows/Linux/Unix等等主流的操作系统，同时能够跟很多程序语言相结合，比如 C#、PHP、Java等比起Mysql、PostgreSQL这两款开源世界著名的数据库管理系统来讲，它的处理速度比他们都快。不像常见的客户不像常见的客户-服务器范例，服务器范例，SQLite引擎引擎不
18、是个程序与之通信的独立进程，而是连接不是个程序与之通信的独立进程，而是连接到程序中成为它的一个主要部分。到程序中成为它的一个主要部分。所以主要的通信协议是在编程语言内的直接所以主要的通信协议是在编程语言内的直接API调用。这在消耗总量、延迟时间和整体调用。这在消耗总量、延迟时间和整体简单性上有积极的作用。简单性上有积极的作用。整个数据库整个数据库(定义、表、索引和数据本身定义、表、索引和数据本身)都都在宿主主机上存储在一个单一的文件中。它在宿主主机上存储在一个单一的文件中。它的简单的设计是通过在开始一个事务的时候的简单的设计是通过在开始一个事务的时候锁定整个数据文件而完成的。锁定整个数据文件而
19、完成的。352、SQLite数据库的使用数据库的使用要使用SQLite，有两个不要的步骤：创建访问数据库的对象使用事务处理使用openDatabase方法创建访问数据库的对象，该方法返回创建后的数据库对象，如果不存在，则创建1、数据库名称。 2、版本号 目前为1.0。3、对数据库的描述。 4、设置数据的大小。5、回调函数(可省略)。36实际访问数据库的时候，还需要调用transaction方法，用来执行事务处理transaction可以防止在对数据库进行访问及执行有关操作的时候受到外界打扰transaction对象的executeSql方法：transaction.executeSql(sql
20、query, ,dataHandler,errorHandle);在executeSql方法中，将SQL语句中所要用到的参数先用“？”代替，然后将这些参数组成数组放在第二个参数中(“update stu set age=?where name=？;”,age,name);第三个参数为执行sql语句成功时调用的回调函数function dataHandler（transaction，results）第二个参数为执行查询操作时返回的查询到的结果集对象第四个参数为执行sql语句出差时调用的回调函数function errorHandler（transaction，errmsg）第二个参数为执行发生错
21、误时的错误文字信息37二、离线存储二、离线存储HTML5离线存储功能非常强大，它的作用是：在用户没有与因特网连接时，照样可以访问站点或应用，在用户与因特网连接时，自动更新缓存数据。在页面中的数据加载时，你可以自己设定一些要缓存的图片、flash、css、js、html等文件，等下次不能联网的情况下，你可以用那些缓存的文件。这就是HTML5的离线应用。38应用程序缓存为应用带来三个优势： 离线浏览 用户可在应用离线时使用它们速度 已缓存资源加载得更快减少服务器负载 浏览器将只从服务器下载更新过或更改过的资源。39 第一步、添加第一步、添加 HTML5 doctype第一件要做的事情是创建一个符合
22、规范的第一件要做的事情是创建一个符合规范的 HTML5 文档。文档。HTML5 doctype 相比于相比于 xhtml 版本的版本的 doctype 而言，要简单明了得多：而言，要简单明了得多：40第二步：配置第二步：配置mime类型类型需要服务器。这里用需要服务器。这里用tomcat服务器来讲解。服务器来讲解。首先要先把以首先要先把以manifest为后缀的文件的为后缀的文件的mime类型配置为类型配置为text/cache-manifest。一讲到一讲到tomcat配置，熟悉的自然就会想到配置，熟悉的自然就会想到web.xml这个文件，在这个文件，在Tomcat安装目录下安装目录下con
23、f子目录的子目录的web.xml文件中文件中加入如下配置加入如下配置就行：就行： manifest text/cache-manifest 41第三步：创建第三步：创建 manifest 文件文件新建一个文本文档并另存名为新建一个文本文档并另存名为 *.manifestcache manifest 文件需要遵循的格式文件需要遵循的格式1.1.首行必须是首行必须是 CACHE MANIFEST CACHE MANIFEST。2.2.其后，每一行列出一个需要缓存的资源文件名。其后，每一行列出一个需要缓存的资源文件名。3.3.可根据需要列出在线访问的白名单。白名单中的所有资可根据需要列出在线访问的白
24、名单。白名单中的所有资源不会被缓存，在使用时将直接在线访问源不会被缓存，在使用时将直接在线访问。声明白名单使。声明白名单使用用 NETWORK NETWORK：标识符。：标识符。4.4.如果在白名单后还要补充需要缓存的资源，可以使用如果在白名单后还要补充需要缓存的资源，可以使用 CACHECACHE：标识符。：标识符。5.5.如果要声明某如果要声明某 URI URI 不能访问时的替补不能访问时的替补 URI URI，可以使用，可以使用 FALLBACKFALLBACK：标识符。：标识符。其后的每一行包含两个其后的每一行包含两个 URI URI，当第一，当第一个个 URI URI 不可访问时，浏
25、览器将尝试使用第二个不可访问时，浏览器将尝试使用第二个 URI URI。6.6.注释要另起一行，以注释要另起一行，以 # # 号开头。号开头。42CACHE MANIFEST #This is a commentCACHE： index.html style.cssNETWORK: search.php login.phpFALLBACK: /api offline.html清清单 4. cache manifest 示例代码示例代码CACHE声明用于缓存index.html和style.css文件。NETWORK声明用于指定无需缓存的文件，比如登录页面。FALLBACK声明，这个声明允许你在
26、资源不可用的情况下，将用户重定向到特定文件，这个示例代码中是offline.html。43第四步：第四步：关联关联 manifest 文件到文件到 html 文档文档manifest 文件和 html 文档都已就绪。唯一需要做的是将 manifest 文件关联到 html 文档。使用 html 元素的 manifest 属性：44u如果 Web 应用程序仅仅是一些静态页面的组合，那么通过 cache manifest 缓存资源文件以后，就可以支持离线访问了u那么在开发支持离线的 Web 应用时，就不能仅仅满足于静态页面的展现，还必需考虑如何让用户在离线状态下也可以操作数据。离线状态时，把数据存
27、储在本地；在线以后，再把数据同步到服务器上。为了做到这一点，开发者首先必须知道浏览器是否在线。45在线状态判断在线状态判断HTML5 提供了两种检测是否在线的方式：提供了两种检测是否在线的方式：navigator.online 和和 online/offline 事件。事件。1.navigator.onLinenavigator.onLine 属性表示当前是否在线。属性表示当前是否在线。如果为如果为 true, 表示在线；如果为表示在线；如果为 false, 表示离线。当网络状态发生变化时，表示离线。当网络状态发生变化时，navigator.onLine 的值也随之变化。的值也随之变化。开发者
28、可以通过读取它的值获取网络状态。开发者可以通过读取它的值获取网络状态。2.online/offline 事件事件当开发离线应用时，通过当开发离线应用时，通过 navigator.onLine 获取网络状态通常是不够的。获取网络状态通常是不够的。开开发者还需要在网络状态发生变化时立刻得到通知，因此发者还需要在网络状态发生变化时立刻得到通知，因此 HTML5 还提供了还提供了 online/offline 事件。事件。当在线当在线 / 离线状态切换时，离线状态切换时，online/offline 事件将触发在事件将触发在 body 元素上，并且沿着元素上，并且沿着 document.body、do
29、cument 和和 window 的顺序冒的顺序冒泡。因此，开发者可以通过监听它们的泡。因此，开发者可以通过监听它们的 online/offline 事件来获悉网络状态。事件来获悉网络状态。46示例：示例：4748在线状态：49切换到离线状态：50处于离线状态：51Tomcat 关闭52在开发支持离线的 Web 应用程序时，开发者通常需要使用以下三个方面的功能：1.离线资源缓存：需要一种方式来指明应用程序离线工作时所需的资源文件。这样，浏览器才能在在线状态时，把这些文件缓存到本地。此后，当用 户离线访问应用程序时，这些资源文件会自动加载，从而让用户正常使用。HTML5 中，通过 cache m
30、anifest 文件指明需要缓存的资源，并支持自动和手动两种缓存更新方式。2.在线状态检测：开发者需要知道浏览器是否在线，这样才能够针对在线或离线的状态，做出对应的处理。在 HTML5 中，提供了两种检测当前网络是否在线的方式。3.本地数据存储：离线时，需要能够把数据存储到本地，以便在线时同步到服务器上。为了满足不同的存储需求，HTML5 提供了 DOM Storage 和 Web SQL Database 两种存储机制。前者提供了易用的 key/value 对存储方式，而后者提供了基本的关系数据库存储功能。53cache manifest工作原理工作原理54如何更新离线存储？如何更新离线存储
31、？当用户本地再次联网的时候，本地的离线存储资源需要检查是否需要更新，这个更新过程，也是通过manifest的更新来控制的，更新了manifest文件，浏览器会自动的重新下载新的manifest文件并在下一次刷新页面的时候进行资源文件的重新请求（第三次刷新替换本地缓存为最新缓存），而且这个请求是全局性的，也就是所有在manifest缓存列表中的文件都会被请求一次，而不是单独请求某个特定修改过的资源文件，因为manifest是不知道哪个文件被修改过了的。55更新缓存更新缓存应用程序可以等待浏览器自动更新缓存，也可以使用 Javascript 接口手动触发更新。1.自动更新（更新manifest文件
32、）浏览器除了在第一次访问 Web 应用时缓存资源外，只会在 cache manifest 文件本身发生变化时更新缓存。而 cache manifest 中的资源文件发生变化并不会触发更新。2手动更新（通过javascript操作） 2.1.开发者也可以使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status 的值，如果是 UPDATEREADY，那么可以调用 window.applicationCache.update() 更新缓存。2.2.清除浏览器缓存56控制离线存储的更新，需要2个步骤，一是更新资源文件
33、，二是更新manifest文件更新manifest文件是不需要修改什么特定内容的，只要是这个文件随意一处被修改，那么浏览器就会感知一个比较好的方式是更新任意一处# 开头的注释即可，其目的只是告诉浏览器这个manifest文件被更新过。57清单 5 手动更新缓存 if (window.applicationCache.status = window.applicationCache.UPDATEREADY) window.applicationCache.update(); 58/*code2，缓存公用方法*/ var EventUtil = / addHandler: function(ele
34、ment, type, handler) / if (element.addEventListener) / element.addEventListener(type, handler, false);/ else if (element.attachEvent) / element.attachEvent(“on” + type, handler);/ else / elementon + type = handler;/ / / ;/ EventUtil.addHandler(applicationCache, “updateready”, function() /缓存更新并已下载，要在
35、下次进入页面生效/ applicationCache.update(); /检查缓存manifest文件是否更新，ps:页面加载默认检查一次。/ applicationCache.s(); /交换到新的缓存项中，交换了要下次进入页面才生效/ location.reload(); /重新载入页面/ );59applicationCache对象对象applicationCache对象提供个了一些方法和事件，管理离线存储的交互过程。通过在firefox8.0的控制台中输入window.applicationCache可以看到这个对象的所 有属性和事件方法。60applicationCache对象触发
36、事件对象触发事件applicationCache.onchecking = function() /检查检查manifest文件是否存在文件是否存在 applicationCache.ondownloading = function() /检查到有检查到有manifest或者或者manifest文件文件 /已更新就执行下载操作已更新就执行下载操作 /即使需要缓存的文件在请求时服务器已经返回过了即使需要缓存的文件在请求时服务器已经返回过了 applicationCache.onnoupdate = function() /返回返回304表示没有更新，通知浏览器直接使用本地文件表示没有更新，通知浏
37、览器直接使用本地文件 applicationCache.onprogress = function() /下载的时候周期性的触发，可以通过它下载的时候周期性的触发，可以通过它 /获取已经下载的文件个数获取已经下载的文件个数 61applicationCache.oncached = function() /下载结束后触发，表示缓存成功下载结束后触发，表示缓存成功 application.onupdateready = function() /第二次载入，如果第二次载入，如果manifest被更新被更新 /在下载结束时候触发在下载结束时候触发 /不触发不触发onchecked alert(本地缓存正在更新中。本地缓存正在更新中。); if(confirm(是否重新载入已更新文件是否重新载入已更新文件) applicationCache.s(); location.reload(); applicationCache.onobsolete = function() /未找到文件，返回未找到文件，返回404或者或者401时候触发时候触发 applicationCache.onerror = function() /其他和离线存储有关的错误其他和离线存储有关的错误 62
