chap16本地存储与离线应用

1、第16章 本地存储与离线应用1主要内容概述localStorage和sessionStorage留言板示例Storage事件监听练习与习题21、概述31、概述-WebStorage有同学可能会问，既然有了cookie本地存储，为什么还要引入WebStorage的概念？41、概述HTML4的本地数据存储方式 会话（Session）跟踪是Web程序中常用的技术，用来跟踪用户的整个会话在传统的Web程序中，通常使用Cookie和Session来存储本地数据。Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份。5Cookie（小饼干）有时也用其复数形式Coo

2、kies，指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）。Cookie是由服务器端生成，发送给User-Agent（一般是浏览器），浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器（前提是浏览器设置为启用cookie）。服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。6Cookie工作原理7Session工作原理8主要用途服务器可以利用Cookies包含信息的任意性来筛选并经常性维护这些信息，以判断在HTTP传输中的状态。1、Cooki

3、es最典型的应用是判定注册用户是否已经登录网站。2、“购物车”之类处理。用户可能会在一段时间内在同一家网站的不同页面中选择不同的商品，这些信息都会写入Cookies，以便在最后付款时提取信息。9Cookie缺陷1. 数据大小：作为存储容器，cookie的大小限制在4KB左右,这是非常坑爹的，尤其对于现在复杂的业务逻辑需求，4KB的容量除了存储一些配置字段还简单单值信息，对于绝大部分开发者来说真的不知指望什么了。2. 安全性问题：由于在HTTP请求中的cookie是明文传递的（HTTPS不是），带来的安全性问题还是很大的。当多人共用一台计算机时使用Cookie可能会泄露用户隐私，也带来安全问题3

4、. 网络负担：我们知道cookie会被附加在每个HTTP请求中，在HttpRequest 和HttpResponse的header中都是要被传输的，所以无形中增加了一些不必要的流量损失。10WebStorageWebStorage是HTML新增的本地存储解决方案之一，但并不是为了取代cookie而制定的标准。cookie作为HTTP协议的一部分用来处理客户端和服务器通信是不可或缺的，session正是依赖于实现的客户端状态保持。WebStorage的意图在于解决本来不应该cookie做，却不得不用cookie的本地存储。11WebStorageWebStorage功能，就是在Web上存储数据，

5、提供两种类型的API：localStorage和sessionStorage。区别：localStorage在本地永久性存储数据，除非显式将其删除或清空。sessionStorage存储的数据只在会话期间有效，关闭浏览器则自动删除。两个对象都有共同的API。12浏览器的支持13检查浏览器是否支持WebStorage-请打开ex3_1.html检测浏览器是否支持14Storage 接口interface Storage Storage 接口 readonly attribute unsigned long length; DOMString? key(unsigned long index);

6、getter DOMString getItem(DOMString key); setter creator void setItem(DOMString key, DOMString value); deleter void removeItem(DOMString key); void clear();length:唯一的属性，只读，用来获取storage内的键值对数量。key：根据index获取storage的键名getItem：根据key获取storage内的对应valuesetItem：为storage内添加键值对removeItem：根据键名，删除键值对clear：清空stora

7、ge对象15localStorage和sessionStorage操作localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等localStorage和sessionStorage的方法：setItem 存储value 用途：将value存储到key字段 用法：.setItem( key, value) 代码示例： sessionStorage.setItem(key, value); localStorage.setItem(site, js8.in);16也可以通过localStorage.和localStora

8、ge的形式访问localstorage数据。例如，下面3条语句都可以在localstorage中存储键名为key、值为value的数据：localStorage.setItem(key, value);localStorage.key = value;localStoragekey = value;注：保存时，不允许重复保存相同的键名，保存后可以修改键值，但不允许修改键名localStorage和sessionStorage操作17getItem获取value用途：获取指定key本地存储的值用法：.getItem(key)代码如下:var value = sessionStorage.getI

9、tem(key); var site = localStorage.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和sessionStora

10、ge操作1920removeItem删除指定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留言本如果

11、要保存的数据量比较大的话，使用上述方法会比较麻烦简单Web留言本示例，要求：使用一个多行文本框来输入数据点击按钮时将文本框中的数据保存到localStorage中在表单下部放置一个table元素来显示保存后的数据保存内容时，同时保存当前日期和时间，并将该日期和时间一并显示在p元素中24示例：253、作为简易数据库使用如果想要将WebStorage作为数据库来使用的话，需要考虑几个问题：数据库中的表都分为几列，怎样实现对列的管理怎样实现数据的检索功能实现对列的管理，可以使用JSON格式（JavaScript object Notation，是将JavaScript中的对象作为文本形式来保存时使用

12、的一种格式），获取对象时再通过JSON格式获取 JSON是一种将对象与字符串可以相互表示的数据转换标准JSON.parse:将JavaScript对象表示法的JSON字符串转换为对象(字符串转对象)JSON.stringify:JavaScript json对象转换为JavaScript对象表示法的JSON字符串(对象转为字符串)26示例：客户信息管理网页客户的信息分为：姓名、E-Mail地址、电话号码、备注，需要把它们保存在localStorage中，如果输入用户姓名，可以进行检索并获取该客户的所有信息2728小结：为什么比cookie好1. 从容量上讲WebStorage一般浏览器提供5M

13、的存储空间，用来存储视频、图片神马的不够，但对于绝大部分操作足矣2.安全性上WebStorage并不作为HTTP header发送的浏览器，所以相对安全3.从流量上讲，因为WebStorage不传送到服务器，所以不必要的流量可以节省，这样对于高频次访问或者针对手机移动设备的网页还是很不错的。29这并不意味着WebStorage可以取代cookie，而是有了WebStorage后cookie能只做它应该做的事情了作为客户端与服务器交互的通道，保持客户端状态。所以仅仅作为本地存储解决方案WebStorage是优于cookie的。302.5 storage事件 HTML5提供一个storage事件，

14、当setItem()、removeItem()或者clear()方法被调用，并且数据真的发生了改变时，storage事件就会被触发。注意，只有数据真的发生了变化，才会触发storage事件。也就是说，如果当前的存储区域是空的，调用clear()是不会触发事件的。或者通过setItem()来设置一个与现有值相同的值，storage事件也是不会被触发的torage事件的。312.5 storage事件 Event对象包含如下属性： storageArea，表示存储类型（localstorage或sessionstorage）； key，发生改变的项的key oldValue，发生改变的项的原值 n

15、ewValue，发生改变的项的新值 url， key改变发生的URL3233二、本地数据库在HTML5中，大大丰富了客户端本地可以存储的内容，添加了很多功能来将原本必须要保存在服务器上的数据转为保存在客户端本地，从而大大提高了Web应用程序的性能，减轻了服务器端的负担，使Web时代重新回到了“客户端为重，服务器端为轻”的时代数据库的本地存储功能就是其中的代表HTML4中，数据库只能放在服务器端，只能通过服务器来访问数据库，但是在HTML5中，可以像访问本地文件那样轻松的对内置数据库进行直接访问了341、SQLite数据库SQLite，是一款轻型的关系数据库，设计目标是嵌入式系统，目前已经在很多

16、嵌入式产品中使用了它它占用资源非常低，在嵌入式设备中，可能只需要几百K的内存就够了。它能够支持Windows/Linux/Unix等等主流的操作系统，同时能够跟很多程序语言相结合，比如 C#、PHP、Java等比起Mysql、PostgreSQL这两款开源世界著名的数据库管理系统来讲，它的处理速度比他们都快。不像常见的客户-服务器范例，SQLite引擎不是个程序与之通信的独立进程，而是连接到程序中成为它的一个主要部分。所以主要的通信协议是在编程语言内的直接API调用。这在消耗总量、延迟时间和整体简单性上有积极的作用。整个数据库(定义、表、索引和数据本身)都在宿主主机上存储在一个单一的文件中。它

17、的简单的设计是通过在开始一个事务的时候锁定整个数据文件而完成的。352、SQLite数据库的使用要使用SQLite，有两个不要的步骤：创建访问数据库的对象使用事务处理使用openDatabase方法创建访问数据库的对象，该方法返回创建后的数据库对象，如果不存在，则创建1、数据库名称。 2、版本号 目前为1.0。3、对数据库的描述。 4、设置数据的大小。5、回调函数(可省略)。36实际访问数据库的时候，还需要调用transaction方法，用来执行事务处理transaction可以防止在对数据库进行访问及执行有关操作的时候受到外界打扰transaction对象的executeSql方法：tran

18、saction.executeSql(sqlquery, ,dataHandler,errorHandle);在executeSql方法中，将SQL语句中所要用到的参数先用“？”代替，然后将这些参数组成数组放在第二个参数中(“update stu set age=?where name=？;”,age,name);第三个参数为执行sql语句成功时调用的回调函数function dataHandler（transaction，results）第二个参数为执行查询操作时返回的查询到的结果集对象第四个参数为执行sql语句出差时调用的回调函数function errorHandler（transact

19、ion，errmsg）第二个参数为执行发生错误时的错误文字信息37二、离线存储HTML5离线存储功能非常强大，它的作用是：在用户没有与因特网连接时，照样可以访问站点或应用，在用户与因特网连接时，自动更新缓存数据。在页面中的数据加载时，你可以自己设定一些要缓存的图片、flash、css、js、html等文件，等下次不能联网的情况下，你可以用那些缓存的文件。这就是HTML5的离线应用。38应用程序缓存为应用带来三个优势： 离线浏览 用户可在应用离线时使用它们速度 已缓存资源加载得更快减少服务器负载 浏览器将只从服务器下载更新过或更改过的资源。39 第一步、添加 HTML5 doctype第一件要做

20、的事情是创建一个符合规范的 HTML5 文档。HTML5 doctype 相比于 xhtml 版本的 doctype 而言，要简单明了得多：40第二步：配置mime类型需要服务器。这里用tomcat服务器来讲解。首先要先把以manifest为后缀的文件的mime类型配置为text/cache-manifest。一讲到tomcat配置，熟悉的自然就会想到web.xml这个文件，在Tomcat安装目录下conf子目录的web.xml文件中加入如下配置就行： manifest text/cache-manifest 41第三步：创建 manifest 文件新建一个文本文档并另存名为 *.manife

21、stcache manifest 文件需要遵循的格式1.首行必须是 CACHE MANIFEST。2.其后，每一行列出一个需要缓存的资源文件名。3.可根据需要列出在线访问的白名单。白名单中的所有资源不会被缓存，在使用时将直接在线访问。声明白名单使用 NETWORK：标识符。4.如果在白名单后还要补充需要缓存的资源，可以使用 CACHE：标识符。5.如果要声明某 URI 不能访问时的替补 URI，可以使用 FALLBACK：标识符。其后的每一行包含两个 URI，当第一个 URI 不可访问时，浏览器将尝试使用第二个 URI。6.注释要另起一行，以 # 号开头。42CACHE MANIFEST #T

22、his is a commentCACHE： index.html style.cssNETWORK: search.php login.phpFALLBACK: /api offline.html清单 4. cache manifest 示例代码CACHE 声明用于缓存 index.html 和 style.css 文件。NETWORK 声明用于指定无需缓存的文件，比如登录页面。 FALLBACK 声明，这个声明允许你在资源不可用的情况下，将用户重定向到特定文件，这个示例代码中是 offline.html。43第四步：关联 manifest 文件到 html 文档manifest 文件和 h

23、tml 文档都已就绪。唯一需要做的是将 manifest 文件关联到 html 文档。使用 html 元素的 manifest 属性：44如果 Web 应用程序仅仅是一些静态页面的组合，那么通过 cache manifest 缓存资源文件以后，就可以支持离线访问了那么在开发支持离线的 Web 应用时，就不能仅仅满足于静态页面的展现，还必需考虑如何让用户在离线状态下也可以操作数据。离线状态时，把数据存储在本地；在线以后，再把数据同步到服务器上。为了做到这一点，开发者首先必须知道浏览器是否在线。45在线状态判断HTML5 提供了两种检测是否在线的方式：navigator.online 和 onli

24、ne/offline 事件。1.navigator.onLinenavigator.onLine 属性表示当前是否在线。如果为 true, 表示在线；如果为 false, 表示离线。当网络状态发生变化时，navigator.onLine 的值也随之变化。开发者可以通过读取它的值获取网络状态。2.online/offline 事件当开发离线应用时，通过 navigator.onLine 获取网络状态通常是不够的。开发者还需要在网络状态发生变化时立刻得到通知，因此 HTML5 还提供了 online/offline 事件。当在线 / 离线状态切换时，online/offline 事件将触发在 bo

25、dy 元素上，并且沿着 document.body、document 和 window 的顺序冒泡。因此，开发者可以通过监听它们的 online/offline 事件来获悉网络状态。46示例：4748在线状态：49切换到离线状态：50处于离线状态：51Tomcat 关闭52在开发支持离线的 Web 应用程序时，开发者通常需要使用以下三个方面的功能：1.离线资源缓存：需要一种方式来指明应用程序离线工作时所需的资源文件。这样，浏览器才能在在线状态时，把这些文件缓存到本地。此后，当用 户离线访问应用程序时，这些资源文件会自动加载，从而让用户正常使用。HTML5 中，通过 cache manifest

26、 文件指明需要缓存的资源，并支持自动和手动两种缓存更新方式。2.在线状态检测：开发者需要知道浏览器是否在线，这样才能够针对在线或离线的状态，做出对应的处理。在 HTML5 中，提供了两种检测当前网络是否在线的方式。3.本地数据存储：离线时，需要能够把数据存储到本地，以便在线时同步到服务器上。为了满足不同的存储需求，HTML5 提供了 DOM Storage 和 Web SQL Database 两种存储机制。前者提供了易用的 key/value 对存储方式，而后者提供了基本的关系数据库存储功能。53cache manifest工作原理54如何更新离线存储？当用户本地再次联网的时候，本地的离线存

27、储资源需要检查是否需要更新，这个更新过程，也是通过manifest的更新来控制的，更新了manifest文件，浏览器会自动的重新下载新的manifest文件并在下一次刷新页面的时候进行资源文件的重新请求（第三次刷新替换本地缓存为最新缓存），而且这个请求是全局性的，也就是所有在manifest缓存列表中的文件都会被请求一次，而不是单独请求某个特定修改过的资源文件，因为manifest是不知道哪个文件被修改过了的。55更新缓存应用程序可以等待浏览器自动更新缓存，也可以使用 Javascript 接口手动触发更新。1.自动更新（更新manifest文件）浏览器除了在第一次访问 Web 应用时缓存资源

28、外，只会在 cache manifest 文件本身发生变化时更新缓存。而 cache manifest 中的资源文件发生变化并不会触发更新。2手动更新（通过javascript操作） 2.1.开发者也可以使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status 的值，如果是 UPDATEREADY，那么可以调用 window.applicationCache.update() 更新缓存。2.2.清除浏览器缓存56控制离线存储的更新，需要2个步骤，一是更新资源文件，二是更新manifest文件更新manifes

29、t文件是不需要修改什么特定内容的，只要是这个文件随意一处被修改，那么浏览器就会感知一个比较好的方式是更新任意一处# 开头的注释即可，其目的只是告诉浏览器这个manifest文件被更新过。57清单 5 手动更新缓存 if (window.applicationCache.status = window.applicationCache.UPDATEREADY) window.applicationCache.update(); 58/*code2，缓存公用方法*/ var EventUtil = / addHandler: function(element, 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(applicationCa