HTML5 程序设计第10章.ppt

;第10章 本地存储 ;本章知识点;10.1 概述 ;10.1.1 HTML4的本地数据存储方式 ;1．Cookie ;Cookie存在如下缺陷 ;2．Session（会话） ;10.1.2 HTML5本地存储技术概述 ;1．localstorage ;2．sessionstorage ;3．web SQL数据库 ;4．IndexedDB ;10.2 localstorage ;10.2.1 浏览器对localstorage的支持情况 ;【例10-1】 ;单击按钮check将调用check()函数。check()函数的定义代码如下 ;提示 ;10.2.2 使用localstorage保存数据 ;【例10-2】 ;单击按钮check将调用setItem()函数。setItem()函数的定义代码如下： ;10.2.3 获取localstorage中的数据 ;【例10-3】 ;【例10-4】 ;使用localstorage记录用户访问网页的次数 ;10.2.4 删除localstorage中的数据 ;10.2.5 storage事件 ;【例10-5】 ;接上 ;接上 ;浏览【例10-5】的界面 ;提示 ;10.3 sessionstorage ;10.3.1 判断浏览器是否支持sessionstorage ;【例10-6】 ;提示 ;10.3.2 使用sessionstorage保存数据 ;【例10-7】 ;10.3.3 获取sessionstorage中的数据 ;【例10-8】 ;10.3.4 删除sessionstorage中的数据 ;10.4 webSQL Database API ;10.4.1 判断浏览器是否支持webSQL Database API ;【例10-9】 ;10.4.2 新建数据库 ;【例10-10】 ;10.4.3 执行SQL语句 ;1．创建表语句CREATE TABLE ;CREATE TABLE语句用于创建表 ;【例10-11】 ;DROP TABLE语句 ;2．插入数据表语句INSERT ;【例10-12】 ;UPDATE语句 ;DELETE语句 ;3．查询数据表语句SELECT ;transaction()函数 ;t.executeSql()函数有4个参数 ;【例10-13】 ;接上;定义一个“查询表t”按钮 ;定义一个p标签，用于显示查询结果 ;显示表t的内容 ;10.5 IndexedDB ;10.5.1 数据库的相关概念 ;1．数据库 ;2．数据库管理系统 ;一个数据库管理系统应具备如下功能 ;数据库管理系统在计算机系统中的地位 ;3．数据库系统 ;4．NoSQL数据库 ;10.5.2 判断浏览器是否支持IndexedDB ;【例10-14】 ;check()函数 ;10.5.3 创建和打开数据库 ;request.onerror ;提示 ;request.onsuccess ;创建IndexedDB数据库MyTestDatabase ;10.5.4 创建对象存储空间ObjectStore ;IndexedDB数据库提供键的选项 ;createObjectStore()方法 ;onupgradeneeded事件 ;【例10-15】 ;create()方法 ;【例10-16】 ;getinfo ()方法 ;div元素info ;获取对象存储空间信息 ;10.5.5 创建索引 ;例如 ;【例10-17】 ;提示 ;10.5.6 事务 ;1．transaction()方法 ;事务对象支持下面3种事件 ;下面的代码演示如何定义和使用事务 ;从事务中获得相关的对象存储空间对象 ;2．插入数据 ;【例10-18】 ;insert ()方法 ;2．查询数据;【例10-19】 ;get()方法 ;div元素info的定义代码 ;获取id=110的记录 ;3．删除数据 ;【例10-20】 ;deletedata()方法 ;10.5.7 游标 ;【例10-21】 ;insert ()方法 ;接上;1．遍历对象存储空间中的数据;使用下面的方法可以访问游标对象中的数据 ;【例10-22】 ;query ()方法 ;使用游标遍历对象存储空间employees中的数据 ;2．指定查询数据的范围 ;（1）匹配等于指定键值的记录 ;（2）匹配小于指定键值的记录 ;（3）匹配大于指定键值的记录 ;（4）匹配指定范围内的记录 ;【例10-23】 ;query ()方法 ;接上;使用游标查询指定范围内的记录 ;3．游标的顺序 ;游标顺序选项包括下面4种情况 ;【例10-24】 ;单击“查询数据”按钮，如图10-11所示