h5离线存储

① h5和css3有哪些新特性

H5的新特性：

1. 用于绘画 canvas 元素。

2. 用于媒介回放的 video 和 audio 元素。

3. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除。

4. 语意化更好的内容元素，比如 article、footer、header、nav、section。

5. 表单控件，calendar、date、time、email、url、search。

② h5特点及新特性

H5的特点是有了很多新的标签，比较实用，写起来方便

③ h5怎么保存到手机,不用网也能打开

1、首先在手机应用中，点击打开【MAKA】图标，如下图所示。

④ 什么是H5技术

HTML5并不是一项技术，而是一个标准。”H5“本应是一个技术合集，却被意会成了一项技术。

HTML，全程为HyperTextMarkupLanguage,中文直意为“超级文本标记语言"从94年由万维网(W3C)发明至今，已逐渐成为了网页标记语言的行业规范，它是构成网页的一种标记编写语言，html目前也历经了5次小大修改，也可以说H5是html的第5代语言。

技术要点：

1、重要标记

<video>标记

定义和用法

</video> 标签定义视频，比如电影片段或其他视频流。

<audio> 标记。

定义和用法

</audio> 标签定义声音，比如音乐或其他音频流。

2、程序接口

除了原先的DOM接口，HTML5增加了更多API,如：

（1）、用于即时2D绘图的Canvas标签；

（2）、 定时媒体回放；

（3）、 离线数据库存储；

（4）、文档编辑；

（5）、 拖拽控制；

（6）、浏览历史管理。

3、元素变化

新的解析顺序新的元素：section, video, progress, nav, meter, time, aside, canvasinput。

元素的新属性：日期和时间，email, url。

新的通用属性：ping, charset, async。

全域属性：id, tabindex, repeat。

移除元素：center, font, strike。

4、控件

就是Html标注的属性里加上runat="server"所构成的控件，至于Html标注和Html控件之间的区别很明显，Html控件是运行于服务器端，Html标注是运行于客户端。

基本Html控件有：

。

自定义的Html控件是根据自己的需求定义。当自主开发效率低，可以从技术社区、源码网站下载需要的控件。比如，需要插入table, image, links 等标签。不必自己开发，可以使用ComponentOne Wijmo Editor等。

5、图表库

.Net图表控件Chart FX相信大家已经非常熟悉了。Chart FX的开发商SoftwareFX推出的一套为HTML5、jQuery和JavaScript开发者设计的免费HTML5图表库——jChartFX！

jChartFX亮点：

（1）、jChartFX充分利用了HTML5，CSS和SVG，让您能够在浏览器提供美观优越的图表和更丰富的最终用户体验。

（2）、jChartFX拥有很多令人振奋的功能，它在无插件纯JavaScript的浏览器上运行，这意味着在提高了网站安全性和速度的同时，最大程度的减少了网站服务器的负荷。

（4）、jChartFX还能够自动整合到jQuery UI ThemeRoller，自动读取并解释jQuery的主题和CSS文件，能够快速适应您的页面布局和设计，无需一行代码。

（4）、jChartFX支持JSON，JSON能够帮助您实现，任何数据源中的数据都可以展现到图表中。

（5）、jChartFX还支持超过40种的2D、3D图表类型，免费的图表控件中支持如此之多的图表展示类型实属难得。

(4)h5离线存储扩展阅读：

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。

1、本地存储特性（Class: OFFLINE & STORAGE）

基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。

2、设备兼容特性 (Class: DEVICE ACCESS)

从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。

HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。

3、连接特性（Class: CONNECTIVITY）

更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。

HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

4、网页多媒体特性(Class: MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能，与网站自带的APPS，摄像头，影音功能相得益彰。

5、三维、图形及特效特性（Class: 3D, Graphics & Effects）

基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。

6、性能与集成特性（Class: Performance & Integration）

没有用户会永远等待Loading——HTML5会通过XMLHttpRequest2等技术，解决以前的跨域等问题，帮助您的Web应用和网站在多样化的环境中更快速的工作。

7、CSS3特性(Class: CSS3)

在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。

参考资料来源：中国经济网-传3·15曝光恶意App H5技术或成解决方案

参考资料来源：中国新闻网-H5发展势头不减：得朋友圈者得天下

⑤ HTML5离线存储有优势吗

我给你举例说下离线存储的作用。比如用HTML5做一个手机应用，用户使用的时候如果网络状况不佳，连接不上服务器，在没使用离线存储的情况下，应用是否就开天窗了？这样对于用户体验来讲肯定不舒服，我们至少得告诉用户连接失败的信息。
但是既然都没连接上，又如何把没连接上的信息告诉用户？
这个时候我们就用离线存储技术，将上次成功访问的数据保存下来，并且里面包含了下次调用这些存储数据时自动判断是否连接成功，如果不成功则显示失败的消息。
既然现在已经能显示失败的信息了，那为什么不干脆再多点有用的信息，这样就能让应用在离线状态下也能展现丰富的内容。
那既然都到这步了，我们为啥不可以把用户在离线状态下的某些操作(肯定是失败的)过程记录下来，等下次连接成功后实现操作的目的。
例如QQ空间，微博，微信，糗事网络，还有网络知道的客户端都是利用这样的离线存储，当然不一定是html5的，不过原理一样。离线状态下，你也能看到内容，只是不能更新内容，不过能将你更新内容的操作记录下来，待下次连接上了就能马上更新。

手机纯手打，给过吧？

⑥ 求教。H5怎么另存到桌面

可以离线保存，只不过不能用秀堂，而需要用意派才行。你可以先用意派H5编辑器制作好一个H5，然后将它导出成一个html压缩包，这样就可以离线播放或部署到本地服务器上了。需要注意的是，如果你的H5里用了评论、表单等这些功能，也是不支持导出的哦。

⑦ html5离线存储有几种方式

h5之前，存储主要是用cookies。cookies缺点有在请求头上带着数据，大小是4k之内。主Domain污染。

目标
解决4k的大小问题
解决请求头常带存储信息的问题
解决关系型存储的问题
跨浏览器

1.本地存储localstorage
存储方式：
以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。

大小：
每个域名5M

⑧ html5 如何更新离线缓存

需要服务器。这里用tomcat服务器来讲解。
首先要先把.manifest后缀的文件 的mine类型配置为text/cache-manifest。
一讲到tomcat配置，熟悉的朋友自然就会想到web.xml这个文件，没错，在文件中加入如下配置就行：
1 <mime-mapping>
2 <extension>manifest</extension>
3 <mime-type>text/cache-manifest</mime-type>
4 </mime-mapping>
然后写一个xxx.manifest文件，xxx是你自己取的一个名字。这个文件的格式是这样的：
CACHE MANIFEST

#version 1.5

CACHE:
MyTest.html
CSS/main.css
Javascript/bwH5LS.js
exp-calif-logo.gif
第一行是必须的，它标识这是manifest的配置文件。
#version 1.5
这句是注释，没实际的作用，我在这里只是想让浏览器更新缓存文件。因为当这个manifest文件与原来一样的时候，浏览器是不会去重新加载缓存文件的，所以我们可以通过这个注释，一方面修改版本号，另一方面让浏览器更新缓存。
CACHE:
这行指示出下面的文件是要缓存的。示例中，缓存了当前页面：MyTest.html，以及一些css和js文件 还有图片。
还有几个关键字示例中没提到，就是
NETWORK:
FALLBACK:
NETWORK 指不想缓存的页面；FALLBACK 是指请求的文件 没有找到或该文件的服务器没有响应时的替代方案，比如我们想请求某个嵌套页面，但这个页面的服务器连接不上了，那么我可以转向另外一个指定的页面。
这是第二步，第三步，只要在<html>标签中加上manifest的位置就行了：
<html manifest="NAME.manifest">
到这里，就可以实现简单的离线应用了。
那些缓存的文件放在哪呢？
在chrome上测试，发现它是按自己的机制来分块保存这些文件的，所以我没找不到完整的文件。保存的数据在：
C:\Users\jasonling\AppData\Local\Google\Chrome\User Data\Default 里面，具体怎么存，笔者还不了解。
火狐上的文件也是按它自己的机制来存的，不过笔者本人用sqlite打开后，找到了缓存文件的具体信息：