HTML5程序设计-本地存储.pdf

HTML5基础教程（第2版） 授课教师： 职务： 第10章 本地存储 课程描述 传统Web应用程序将大 多数据都存储在Web服 务器端的数据库中，本 地存储的能力很弱。而 频繁地访问数据库服务 器获取数据，不但会增 加网络流量，而且影响 应用程序的效率。 HTML5的本地存储能力 得到了很大的提高，不 但可以像传统Web应用 程序那样将数据存储在 文件中，而且还支持本 地的轻型数据库。 本章知识点 10.1 概述 10.2 localstorage 10.3 sessionstorage 10.4 webSQL Database API 10.5 IndexedDB 10.1 概述 p 10.1.1 HTML4的本地数据存储方式 p 10.1.2 HTML5本地存储技术概述 10.1.1 HTML4的本地数据存储方式 在传统的Web程序中，通常使用 Cookie和Session来存储本地 数据。 1．Cookie Cookie存在如下缺陷  Cookie的数据大小是由限制的，大多数 浏览器只支持最大为 4096 字节的 Cookie。有时不能满足需求。  客户端可以禁用或清空Cookie，从而影 响程序的功能。  当多人共用一台计算机时使用Cookie可 能会泄露用户隐私，带来安全问题。 2．Session （会话） 10.1.2 HTML5本地存储技术概述 1．localstorage 2．sessionstorage 3．web SQL数据库 4．IndexedDB 1．localstorage localstorage类似于Cookie，用于持久化 的本地存储。但localstorage没有有效期， 除非主动删除数据，否则数据是永远不会 过期的。localstorage的存储能力也远大 于Cookie，可以存储多达5MB的数据。 2．sessionstorage p sessionstorage类似于Session，用于本 地存储一个会话（session）中的数据， 这些数据只有在同一个会话中的页面才 能访问并且当会话结束后数据也随之销 毁。因此sessionStorage不是一种持久 化的本地存储。 3．webSQL数据库 除了使用localstorage将数据存储在 本地文件中，HTML5甚至支持本地的 web SQL数据库。传统的Web应用程序 都 使用脚本语言访问Web服务器上 的数据库，但 访问服务器会产生网 络流量，而且需要等待服务器的响应。 操作本地数据库无疑大大提升了 HTML5的本地数据存储能力。 4．IndexedDB pIndexedDB是一种轻量级NoSQL数据库。NoSQL是 非关系型的数据库，NoSQL是Not Only SQL的缩 写，意即反SQL运动，是一项全新的数据库革命 性运动。 pHTML5支持两种不同类型的数据库，给了用户跟 多的选择，足以应对各种需求的Web应用程序。 10.2localstorage p10.2.1 浏览器对localstorage的支持情 况 p10.2.2 使用localstorage保存数据 p10.2.3 获取localstorage中的数据 p10.2.4 删除localstorage中的数据 p10.2.5 storage事件 10.2.1 浏览器对localstorage的支持情况 p在JavaScript中可以使用window.localStorage 属性检测浏览器对localstorage的支持情况。 如果window.localStorage等于True，则表明当 前浏览器支持localstorage；否则