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本身是没办法直连数据库。