html5本地缓存
html5离线存储缓存列表可以动态生成
最简单来说，一个离线网络应用程序就是一个URL的列表——HTML，CSS，JavaScript，图片，或者其他类型的资源。离线网络应用程序的主要指向一个叫做名单文件并用于定位网络服务器上的资源列表。用于执行HTML5离线以用程序的网络浏览器将从名单文件中读取URL列表，下载这些资源，将他们在本地缓存，并自动在这些本地副本改变时保持他们更新。当你尝试在没有网络连接时访问网络应用程序，你的网络浏览器将自动切换并使用本地代替。
最新的主流的浏览器中都已添加了对HTML5的offlineStorage功能的支持，HTML5离线存储功能非常强大，它的作用是：在用户没有与因特网连接时，照样可以访问站点或应用，在用户与因特网连接时，自动更新缓存数据，是我们的网站的适应性和应用型更强！
例如一些在线游戏的某些文件可以使用离线存储缓存到本地，这样就不用每次刷新页面都要下载了。对于传统的浏览器缓存是无法控制的，浏览器有自己的缓存规则，我们无法实现缓存什么不缓存什么。但是使用离线存储可以缓存任何内容，包括可以自定义哪些可以被缓存，哪些必须联网才能访问。
离线存储所保存的不是应用中的某些数据，而是站点的某个些文件的副本，即html页面或图片等，而不是仅仅存储一段json或xml。
⑵ html5用什么数据库HTML5数据库
HTML5的5种存储方式详解
介绍
本文主要介绍了前端HTML5的几种存储方式的总结，包括localstorage、localstoragesessionstorage、offlinecache、Websql和IndexedDB。有兴趣的可以了解一下。
开始正文~
在h5之前，cookies主要用于存储。Cookies的缺点是在请求头中携带数据，大小在4k以内。主要领域污染。
主要应用:购物车，客户登录
有IE浏览器的UserData，64k大小，只支持IE浏览器。
目标
存储模式:
存储为键值对，永久存储，除非手动删除，否则永远不会失效。
尺寸:
每个域名500万英镑
支持情况:
注意:IE9localStorage不支持本地文件。你需要把项目发送到服务器才能支持！
常用的API:
GetItem//获取记录
SetIten//创纪录
RemoveItem//删除记录
Key//取Key对应的值
清除//清除记录
存储的内容:
数组，图片，json，样式，脚本。。。(任何可以序列化为字符串的内容都可以存储)
HTML5的localStorageAPI中localStorage的用法与sessionStorage相同。不同之处在于，在页面关闭后，sessionStorage被清除空，而localstorage将始终被保存。
本地缓存应用程序所需的文件
用法:
①配置清单文件。
第页:
清单文件:
清单文件是一个简单的文本文件，它告诉浏览器缓存了什么(以及没有缓存什么)。
清单文件可以分为三个部分:
①缓存清单-该标题下列出的文件将在第一次下载后被缓存。
②网络-此标题下列出的文件需要连接到服务器，不会被缓存。
③回退-该标题下列出的文件指定了无法访问页面时的回退页面(如404页)。
完整演示:
在服务器上:清单文件需要配置正确的MIME类型，即“text/cache-manifest”。
比如Tomcat:
常用的API:
核心是applicationCache对象，它有一个status属性，指示应用程序缓存的当前状态:
0(未缓存):无缓存，即没有与页面相关的应用程序缓存。
1(空闲):空闲，即应用程序缓存没有更新。
2(检查):检查，即下载描述文件并检查更新。
3(下载):下载，即应用缓存正在下载描述文件中指定的资源。
4(UPDATEREADY):更新完成，所有资源都已下载。
5(空闲):废弃，即应用程序缓存的描述文件不再存在，因此页面无法再访问应用程序缓存。
相关事件:
指示应用程序缓存状态的更改:
检查:当浏览器寻找应用程序缓存的更新时触发。
Error:在检查更新或下载资源期间发送错误时触发。
Noupdate:检查描述文件，没有发现变化时触发。
下载:开始下载应用缓存资源时触发。
进度:文件下载应用缓存过程中连续下载触发。
Update:当页面的新应用缓存被下载时触发。
缓存:当应用程序缓存完全可用时触发。
应用程序缓存的三大优势:
①离线浏览
②提高页面加载速度。
③减轻服务器压力。
注意事项:
1.浏览器可能对缓存数据有不同的容量限制(有些浏览器为每个站点设置了5MB的限制)
2.如果清单文件，或者内部列出的某个文件无法正常下载，整个更新过程将被视为失败，浏览器将继续使用所有旧的缓存。
3.引用清单的html必须与清单文件相同，在同一域下。
4.浏览器将自动缓存引用清单文件的HTML文件，如果HTML内容发生更改，则需要更新版本。
6.回退中的资源必须与清单文件相同。
7.更新版本后，在开始新版本前必须刷新一次(页面会再刷一次)。您需要添加监控版本的事件。
8.如果请求的资源在缓存中，即使没有设置manifest属性，也可以从缓存中访问站点中的其他页面。
9.当清单文件改变时，资源请求本身也将触发更新。
离线缓存和传统浏览器缓存的区别:
1.离线缓存是针对整个应用的，浏览器缓存是单个文件。
2.当脱机缓存断开时，页面仍然可以打开，但浏览器缓存不能。
3.离线缓存可以主动通知浏览器更新资源。
关系数据库，通过SQL语句访问
web数据库API不是HTML5规范的一部分，但它是一个独立的规范，它引入了一组使用SQL操作客户端数据库的API。
支持情况:
SQL数据库可以在最新版本的Safari、Chrome和Opera浏览器中工作。
核心方法:
①openDatabase:该方法使用现有数据库或新创建的数据库创建一个数据库对象。
②事务:这种方法使我们能够控制一个事务，并根据这种情况执行提交或回滚。
③executeSql:该方法用于执行实际的Sql查询。
打开数据库:
执行查询操作:
插入数据:
读取数据:
从这些操作可以看出，SQL语句基本上都是用于数据库相关的操作。如果你懂MySQL，这个应该比较好用。
IndexedDB)API(作为HTML5的一部分)对于创建具有丰富本地存储数据的数据密集型离线HTML5Web应用程序非常有用。同时，它也有助于在本地缓存数据，以便传统的在线Web应用程序(如移动Web应用程序)能够更快地运行和响应。
异步API:
在IndexedDB中，大部分操作都不是我们常见的调用方法，返回结果的模式，而是请求-响应的模式，比如打开一个数据库的操作。
这样，当我们打开数据库时，我们实际上返回了一个DB对象，这个对象就在结果中。从上图可以看出，除了结果。还有几个重要的属性，比如onerror、onsuccess、onupgradeneeded(当我们请求打开的数据库版本号与现有数据库版本号不一致时调用)。这类似于我们的ajax请求。在我们发起这个请求之后，我们不确定它什么时候会成功，所以我们需要在回调中处理一些逻辑。
关闭并删除:
数据存储:
indexedDB中没有表的概念，但有objectStore。一个数据库可以包含多个对象存储。ObjectStore是一种灵活的数据结构，可以存储各种类型的数据。也就是说，objectStore相当于一个表，其中存储的每条数据都与一个键相关联。
我们可以使用每个记录中的指定字段作为键(keyPath)，或者使用自动生成的增量数作为键(keyGenerator)，或者不指定它。选择了不同类型的键，objectStore可以存储的数据结构也是如此。
学习从来不是一个人的事。你应该有一个互相监督的伙伴。想学习或者交流前端问题的小伙伴可以私信“学习”小明获取web前端入门资料，共同学习成长！
iH5数据库怎么做？
iH5是一款HTML5设计工具，能够设计制作出PPT、应用原型、数字贺卡、相册、简历、函、广告视频等多种类型的交互内容。
一、注册后开始制作
对于刚开始使用iH5的用户来说，首先是注册一个账户，才能登陆官网平台进行相关的操作。这个比较简单，用户可以自行去注册。
二、关于V币
细心的用户会留意到，某些模板上是没有显示【限时免费】，而是显示类似1V币的字样，是因为某些更为惊艳的模板是设计师精心设计而成，因此想要使用这类更为惊艳的模板需要支付一定的V币。想要充值V币，可以点击右上角个人主页栏目的小箭头，在窗口中点击充值即可对账户进行V币充值。
三、作品预览、发布及分享
在完成H5作品创作后，点击预览按钮，就可以对H5进行预览了。发布作品只需点击【发布】按钮，在弹出的窗口填写好相应的信息，即可完成作品发布。
在发布成功后，可把作品分享给朋友。我们返回个人主页，选择【已发布】，进入已发布的作品栏目，将鼠标移至作品处，点击右上角的分享按钮，在弹出的窗口复制作品链接、保存作品二维码，再把链接或者二维码分享给朋友即可。
js+html5操作sqlite数据库的方法？
建立数据库
db=openDatabase('MyData','','MyDatabase',102400);
执行sql语句
db.transaction(function(tx){
tx.executeSql('sql语句',);}
想用HTML5来写前台调用后台mysql数据库请问该怎么写？
你需要使用中间服务层来与数据库对接，比如Java，PHP，node.js等等语言与数据库交互。html5本身是没办法直连数据库。
⑶ HTML5应用程序缓存Application Cache详解
什么是Application Cache
HTML5引入了应用程序缓存技术，意味着web应用可进行缓存，并在没有网络的情况下使用，通过创建cache manifest文件，可以轻松的创建离线应用。
Application Cache带来的三个优势是：
① 离线浏览
② 提升页面载入速度
③ 降低服务器压力
而且主要浏览器皆以支持Application Cache，就算不支持也不会对程序造成什么影响
离线存储技术
HTML5提出了两大离线存储技术：localstorage与Application Cache，两者各有应用场景;传统还有离线存储技术为Cookie。
经过实践我们任务localstorage应该存储一些非关键性ajax数据，做锦上添花的事情;
Application Cache用于存储静态资源，缓银仍然是干锦上添花的事情;
而cookie只能保存一小段文本(4096字节);所以不能存储大数据，这是cookie与上述缓存技术的差异之一，而因为HTTP是无状态的，服务器为了区分请求是否来源于同一个服务器，需要一个标识字符串，而这个任务就是cookie完成的，这一段文本每次都会在服务器与浏览器之间传递，以验证用户的权限。
所以Application Cache的应用场景不一样，所以使用也不一致。
Application Cache简介
Application Cache的使用要做两方面的工作：
① 服务器端需要维护一个manifest清单
② 浏览器上只需要一个简单的设置即可
#p#副标题#e#
以例子做说明：
CACHE MANIFEST
CACHE:
# 需要缓存的列表
style1.css
1.jpg
01.js
NETWORK:
# 不需要缓存的
4.jpg
FALLBACK:
# 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件*.html /offline.html
2.jpg/3.jpg
复制代码
首先我这里报了一个错：
Application Cache Error event: Manifest fetch failed (404)
这个错误的原因是：manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置，不同的服务器不一样
APPLICATIONCACHE
01.js
02.js
1.jpg
2.jpg
3.jpg
4.jpg
demo.appcache
index.html
style1.css
style2.css
web.config
zepto.js
这样一来便可以离线应用了，这个时候就算断网了，那些文件依旧能访问
这里有一点值得注意，比如这里不带/index.html他会将“applicationcache/”缓存，其实这个就是index.html
manifest 文件可薯哪槐分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连数友接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
如图所示，HTML5定义了几个事件点，但是我们一般不会主动使用js去操作什么，大多数情况下，我们完全依赖浏览器的处理即可。
#p#副标题#e#
尺寸限制
Application Cache的尺寸限制统一在5M，我这里做一个测试：
如所示，两个css文件依旧超过了5M这个时候
Document was loaded from Application Cache with manifest
index.html:1 Application Cache Checking event
index.html:6 GET
index.html:1 Application Cache NoUpdate event
index.html:11 GET
index.html:12 GET
如所示，style2已经不能缓存了，这个会造成什么问题呢?
比如我A频道维护了自己的Application Cache，B频道也维护了自己的，这个时候A频道如果使用达到了一个峰值，会导致B频道所有的缓存失效，所以：
建议Application Cache，存储公共资源，不要存储业务资源
一些问题
由更新机制来说，首次更新manifest时，因为页面加载已经开始甚至已经完成，缓存更新尚未完成，浏览器仍然会使用过期的资源;浏览器是当Application Cache有更新时，该次不会使用新资源，第二次才会使用。这个时候update事件中执行window.reload事件。
window.applicationCache.addEventListener(updateready, function(){
window.location.reload()
});
由上例可以知道，缓存的不只是显示定义的文件，比如上例中的applicationcache/时便会默认保存index.html为映射的数据，并且包含demo.appcache文件，很多时候会遇到一次文件更新线上老是不更新，这个时候随便在manifest配置文件中做一点修改即可更新。
从可用性与易用性来说，Application Cache是值得使用的，但是最好是做静态资源的缓存，真正要实现离线应用还得花更多的功夫呢!
⑷ html5的离线web应用的浏览器和服务器交互的过程要是没有缓存怎么办
html5的离线web应用的浏览器和服务器交互的过程要是没有缓存就需要每次交互都要实时接口调用，增加网络开销。
一、离线存储的作用
1、用户可离线访问应用，这对于无法随时保持联网状态的移动终端用户来说尤其重要
2、用户访问本地的缓存文件，通常意味着更快的访问速度
3、仅仅加载被修改过的资源，避免同一资源对服务器多次的请求，大大降低了对服务器的访问压力
二、实现离线存储
1、在html标签里通过manifest属性引用一个cache.manifest文件，该文件里声明了浏览器需缓存的所有资源文件，如下所示：
<!DOCTYPE html>
<html lang='cn' manifest='cache.manifest'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>离线缓存示例页面</title>
<!-- CSS文件引用 -->
</head>
<body>
<!-- 各种标签 -->
</body>
<!-- 各种脚本文件 -->
</html>
2、关于cache.manifest的定义
CACHE MANIFEST
# 注释：需要缓存的文件，无论在线与否，均从缓存里读取
chched.js
cached.css
# 注释：不缓存的文件，无论缓存中存在与否，均从新获取
NETWORK:
uncached.js
uncached.css
# 注释：获取不到资源时的备选路径，如index.html访问失败，则返回404页面
FALLBACK:
index.html 404.html
⑸ html5 应用程序缓存和浏览器缓存有什么区别
应用程序缓存是会预加载的，保证齐全地供应和保存。浏览器缓存没有这些控制，不能作为程序缓存使用。不幸地，应用程序缓存过于简单，导致效率不彰，预期将会被 Service Worker 取代。
⑹ 如何使用下面的HTML5功能创建离线的网页和应用程序
在这篇文章中，我们将展示如何创建乖巧离线的网页和应用程序使用下面的HTML5功能：
AppCache本地存储文件资源，离线访问它们作为URL
索引型数据库存储结构化数据在本地，你可以访问和查询它
DOM存储在本地存储少量的文字信息，
离线事件来检测，如果你€ 重新连接到网络
离线的'蛋糕'这个词使用的食谱网站的搜索结果。
作为一个开发者，你可以使这些类型的场景相结合的离线技术：AppCache，索引型数据库，DOM存储，WebSockets的（或XHR）。在探索个人的技术，让我们的探讨的好处。
Metro风格的应用程序和网站，离线技术让你来处理连接故障。想象一下，您的用户填写一个表格，他失去网络连接。您的网站或Metro风格的应用程序应该怎么做呢？连接自由发展的心态可以让您的应用程序是否连接到网络或不正确地独立工作。你的应用程序将正常工作。
在更复杂的情况下，Web站点和应用程序允许用户创建新的内容，并存储新的数据，即使应用程序是完全脱机。试想一下，无缝地工作在脱机状态下，如Outlook今天的Outlook Web Access（OWA）的Hotmail或GMail。
离线技术也可以通过本地缓存的资源服务，预缓存将来信息和转移从云（或网络）到客户端设备的处理能力，提高整体性能。信息越多，你€™重新能够缓存在本地，在本地搜索，并计算在本地服务器和用户的体验将更快，需要更少的资源热转印机。
有一个Metro风格的应用程序离线工作的期望高于网站的脱机工作。因为他们使用从商店的自我包含的程序包部署，用户希望他们有某种类型的离线功能（如游戏，书籍，食谱等）。即使这些应用程序是无法创建或访问新的内容，以前的内容应该是可见的（例如联系人，会议，饲料，杂志等）。
本地缓存文件资源使用AppCache
AppCache使您能够创建长寿命的本地缓存下载的文件资源，资源可以访问而离线或使用的同时在线，以提高性能。试想一下，一个三岁的孩子使用一台笔记本电脑，下载一个交互式的Web的游戏（KidsBook）从您的家庭网络。如果应用程序的资源存储在本地，孩子可以继续在车上玩游戏，那里没有网络连接。
如果KidsBook使用AppCache，本场比赛将有缓存必要的资源（的JavaScript，HTML，CSS，音频，视频等）时，先下载后从网络上断开时，播放的游戏。这可以让孩子保持愉悦，即使设备本身没有网络连接。
AppCache创作流程。
要看到如何启用互动网页游戏脱机工作，检查出KidsBook的IE Test Drive网站上的例子。
AppCache使用一个manifest文件，以缓存的内容从网站上指定资源的URI。幕后发生后，浏览器显示网页，它允许在清单文件中定义的资源被下载的缓存。这保证了资源下载到本地机器上，作为一个单位在一个事务中，创建一个本地的缓存。如果一个单一的资源下载失败，没有创建高速缓存。要更新存储在缓存中的内容，在您的服务器更新清单文件。当用户下次访问该网站时，浏览器比较明显的服务器上的文件的缓存副本。如果缓存的舱单副本是不同的服务器副本，新版本更新清单文件中定义的内容高速缓存的使用。
AppCache还允许Internet Explorer和Metro风格的应用程序在脱机状态下使用传统的URL的访问缓存的资源。这可以让你在浏览器窗口中键入一个URL，并没有任何网络连接的情况下访问此信息。此外，脱机页可以解决的URI使用本地缓存的信息。代码示例来看看在HTML5应用程序缓存（“œAppCacheâ）部分中的IE10开发人员指南。
总体而言，AppCache提供了一定的优势HTTP的缓存。HTTP缓存没有吨保证缓存的资源之后将TIF（临时Internet文件）将被清除。此外，HTTP缓存没有€™吨正确地解决在脱机状态下的URL。然而，HTTP缓存可用于优化AppCache的行为，通过指定的缓存资源的生命周期。如果从网站上下载或复制的资源从缓存的本地高速缓存中创建一个新的版本时，这将决定。
Metro风格的应用可以受益于AppCache通过在本地缓存的Web资源的访问的页框，它允许脱机访问的内容。
高速缓存大型本地使用索引型数据库的结构化数据
索引型数据库是一个本地JavaScript对象存储在本地机器上的数据库，允许快速索引和搜索的对象。前面介绍的食谱网站，包括16食谱从父站点中提取的数据库。想象一下，用一个RSS feed，一个WebSocket或XHR连接的，定期更新这个数据库。这将使您的用户能够访问到最新的食谱，即使他们有没有网络连接。
索引型数据库，您可以直接操作和索引的JavaScript对象。使用索引型数据库搜索本地信息的优点是它不会强迫你总是在云中搜索，降低了计算成本。这是假设你€™重新能够维持，是缓存在本地系统中的数据的相关性。
⑺ HTML5应用程序缓存和HTML浏览器缓存有什么区别
新的HTML5规范允许浏览器在连接客户端时预取一些或全部网站资产，如HTML文件、图像、CSS、JavaScript等。对于获取此内容，用户以前没有必要访问此内容。换句话说，应用程序缓存可以预取完全未被访问的页面，从而在常规浏览器缓存中不可用。预取文件可以加速站点的性能，尽管您最初使用带宽下载这些文件。