HTML5跨平台开发基础与实战 王寅峰电子任务9 使用HTML5数据存储.ppt

《HTML5跨平台开发基础与实战 王寅峰电子任务9 使用HTML5数据存储.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、跨平台HTML5实战软件学院王寅峰任务9使用HTML5数据存储学习目标【知识目标】了解HTML5数据存储的特点和优点；重点掌握HTML5的本地存储方法；掌握HTML5中拖拽功能的实现。【技能目标】能结合前面内容开发网页；能在网页采用离线存储功能；能设计支持离线注册的在线游戏。引例描述在传统的HTML中，站点的访问和应用均需要依赖用户端与因特网保持连接，一旦离线，则只能浏览过去历史记录。HTML5离线存储功能非常强大，可以让用户在离线后照样可以访问站点或应用，并在用户再一次连接因特网时自动更新缓存数据。任务陈述本任务为LocalStorage（本地储存）的经典案例-注册登入。结合HT

2、ML5+CSS+jQuery技术，需要设计一个主要功能有登入、注册、查看登入账号和密码，以及光标自动进入控件的功能。实施步骤如下：第一步：编辑UI界面（用户界面），排版布局；第二步：实现注册，登入，查看，光标事件的功能的逻辑；第三步：实现界面跳转。1本地存储2拖曳文件3JQuery的基本结构知识准备1HTML5本地存储1HTML5本地存储HTML5提供了两种在客户端存储数据的新方法：localStorage（没有时间限制的数据存储）sessionStorage（针对一个session会话的数据存储）在HTML5中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。在不影响网站性能的情况

3、下存储大量数据。对于不同的网站，数据存储于不同位置，并且一个网站只能访问其自身的数据。在HTML5中存取大量数据使用JavaScript来完成。1HTML5本地存储在使用localStorage或sessionStorage方法之前，我们需要检测浏览器是否支持Web本地存储的API。目前在IE8+，Firefox，Chrome，Opera和Safari5上都支持这个特性。可以使用JavaScript检测浏览器是否支持，关键代码如下：if(typeof(Storage)!=="undefined"){//浏览器支持！//浏览器支持本地存储时执行这里的代码}else{//浏览器不支持时执行这里的代

4、码}1HTML5本地存储localStorage方法localStorage方法存储的数据没有时间限制，可以一直储存在本地之中，采用的是key-value（键值）方式保存。如下示例代码所示，通过localStorage方法保存数据于key（键值）savedVar中，使用document.write()方法输出保存的内容:1HTML5本地存储localStorage方法刷新访问次数1HTML5本地存储SessionStorage方法SessionStorage方法针对一个session会话进行数据存储。当用户关闭浏览器窗口后，数据会被删除。1HTML5本地存储SessionStorage方法刷新

5、访问次数1HTML5本地存储本地存储之应用缓存HTML5的缓存特性使用户可以离线浏览网站或应用内容。HTML5的ApplicationCache应用程序缓存为应用和网站带来三个优势：离线浏览速度减少服务器负载1HTML5本地存储本地存储之应用缓存应用实例：例如一网站中包含下列文件：main.htmltheme.csslogo.gifmain.jslogin.asp1HTML5本地存储创建main.manifest文件，文件内容如下代码所示：CACHEMANIFEST#2013-06-01v1.0.0#这是注释，可以通过上面注释时间和版本号以便使用JavaScript对缓存更新/main.htm

6、l/theme.css/logo.gif/main.js#缓存的文件列表NETWORK:login.asp#不被缓存的列表1HTML5本地存储本地存储之应用缓存添加了cachemanifest文件后，还需要修改“main.html”，把标签的manifest属性设置为“main.manifest”。修改后的“main.html”代码如下。......修改后，当用户在线访问“main.html”时，浏览器会缓存“main.html”、“theme.css”、

7、“logo.gif”和“main.js”文件；而当用户离线访问时，这个Web应用也可以正常使用了。2拖曳文件2拖曳文件拖拽文件功能在日常生活中非常普遍，如将文件拖拽进邮件附件中，或者上传文件时拖拽。2拖曳文件在以往HTML标准中，拖拽功能的实现需要使用大量复杂的JavaScript代码来实现这一功能，在HTML5中，原生提供了拖拽功能的API。主要技术：1.HTML5Drag&Drop拖拽功能AP