云栖社区()为您免费提供html5数据相关的问答和话题，同时为你提供html5 本地数据库，html5 数据库，html5连接mysql数据库，html5连接数据库，html5调用mysql数据库等，云栖社区以分享专业、优质、高效的技术为己任，帮助技术人快速成长与发展!404 Not Found
404 Not Found
nginx/1.6.2html5sql is a light JavaScript module that makes working with the HTML5
Web Database a whole lot easier.
Its primary function is to provides a
structure for the SEQUENTIAL processing of SQL
statements within a single transaction.
This alone greatly simplifies
the interaction with the database however it doesn't stop there.
other smaller features have been included to make things easier, more
natural and more convenient for the programmer.
Core Features
Provide the capability to sequentially process SQL in many
different forms:
As a single SQL statement string.
As an array of SQL statement strings.
As an array of SQL statement objects (if you want to inject
data into the SQL or get a callback after each SQL statement is
processed)
As a string containing multiple SQL statements, each of
which ends in a semicolon.
From a completely separate file containing SQL statements.
Provide a framework for controlling the version of a database.
If you have tried using an HTML5 web database you know how
complex it can be.
Especially when you are setting it up your
tables in the beginning.
Well you will be happy to know this
is no more.
To show you what I mean and illustrate the power of this
module, take a look at this example:
Say you want to set up a table and insert a bunch of rows
into this table. If you are using html5sql you would just
put all the statements necessary to create your table into
a separate file, which for this example we will name
Setup-Tables.SQL.
This file would probably look something
like this:
CREATE TABLE example (id INTEGER PRIMARY KEY, data TEXT);
INSERT INTO example (data) VALUES ('First');
INSERT INTO example (data) VALUES ('Second');
INSERT INTO example (data) VALUES ('Third');
CREATE TABLE example2 (id INTEGER PRIMARY KEY, data TEXT);
INSERT INTO example2 (data) VALUES ('First');
INSERT INTO example2 (data) VALUES ('Second');
INSERT INTO example2 (data) VALUES ('Third');
With html5sql, to sequentially call these SQL statements and
create your table(s) all you would need to do is open your
database and then add a snippet of code like this:
$.get('Setup-Tables.SQL',function(sqlStatements){
html5sql.process(
//This is the text data from the SQL file you retrieved
sqlStatements,
function(){
// After all statements are processed this function
will be called.
function(error){
// Handle any errors here
With the the jQuery get function your list of SQL statements
is retrieved from your separate file, split into individual
statements and processed sequentially in the order they appear.
While this is just a simple example it illustrates how much
easier this module can make using an html5sql database.
Performance
While all this sounds great, you may be wondering if
performance suffers when SQL statements are processed
sequentially.
The answer, as far as I can tell, is not that
For example, html5sql was able to create a table and sequentially
insert 10,000 records into that table varying amounts of time
but averaging somewhere between 2 and 6 seconds using the
Google Chrome browser on my desktop.
This test leads me to
believe large data sets should be handled by html5sql
quite well.
At its very core, SQL is designed to be a sequentially
processed language.
Certain statements must be processed before
other statements.
For example, a table must be created before
data is inserted into it.
Conversely, JavaScript is a very
asynchronous, event driven language.
This asynchronous nature
is very present in the HTML5 client side database spec and
introduces a high degree of complexity for the programmer.
It is for this reason that this module was written.
This library was written with the understanding that the W3C
has ceased to maintain the spec for the Web SQL Database.
though they have withdrawn from the spec, because webkit has
incorporated it the number if internet users with a compatible
browser is still significant, expecially on mobile devices.
While this module decreases the complexity of using an HTML5
SQL database, it does not attempt to simplify the SQL itself.
This is intentional.
SQL is a powerful language and attempts
to simplify it seem to only decrease it power and utility. In
my experience, a better option is to just learn SQL better
so it becomes more natural. An excellent resource for learning
SQL is the .
Goals for the future
I would like to continue to expand this library and incorporate
more ideas to help programmers use HTML5 web databases.
Eventually I would love to see this library used by everyone
who wishes to utilize the HTML5 Web Database.开发/数据库
软件与服务//
25 个超棒的HTML5 & JavaScript 游戏引擎开发库
　　就像在汽车中，引擎完成主要的工作，使汽车看起来不可思议。游戏引擎同理，游戏开发者完成细节的工作，使游戏看起来真实、吸引人眼球。游戏引擎负责其余的事情。早期，游戏开发者通常从草图做起，花费高昂，且不容易获利。为了让游戏开发更加简单容易，主要的开发者开始授权他们的基本游戏引擎，如 Unreal。而且，随着手机和平板游戏的出现，所需预算比以前更少，对 JAVASCRIPT 和HTML5 游戏引擎的需求大增。
　　如果你是一个游戏开发者，并且正在寻找一个可以与 JavaScript 和 HTML5 无缝工作的游戏引擎。尽管市面上有很多免费和付费的游戏引擎，让专业的游戏开发者满意的游戏引擎肯定需要包含独特的东西。游戏开发者对完美游戏引擎的追求永远不会停止。
　　下面将介绍最好的html5和javascript游戏引擎列表，每个游戏引擎有每个人想要的特性。每个游戏引擎有他自己的优缺点，这样你可以根据你自己的需求做选择，我确定这个列表中有你在寻找的游戏引擎
　　1) Canvas Engine
　　Canvas Engine 提供创建html5视频游戏的平台，创建html5游戏，它会运行在所有的现代浏览器，平板电脑和智能手机上。
　　2) HTML5 Quintus
　　Quintus 是另一个容易使用，适用于移动设备和桌面的javascript html5游戏引擎。 Quintus有一个模块引擎，通过它你可以仅仅引用你需要的模块，并在，在一个页面上，可以运行多个实例。
　　3) Turbulenz
　　Trubulenz 是一个开源的用来创建使用高级技术和web服务的HTML5游戏引擎。引擎库使用支持游戏代码数据快速迭代的优化后的javascritp实现。
　　4) Squarepig
　　这是一个非常容易使用的游戏引擎，它适合新手去创建他们第一个web 游戏，也适合有经验的程序猿创建示例和原型。
　　5) Akihabara
　　Akihabara 是一个html5游戏引擎，同样也是一组用javascript创建运行在浏览器中的不依赖falsh技术的马赛克风格的8/16位游戏的库和工具。
　　6) GoGoMakePlay
　　GMP 是免费的、快速的Javascript游戏引擎，它轻巧而简便易懂。 如果你想要做一些基于精灵的2-D游戏，GMP是很棒的选择。它可以很容易的进行大多数复古风格的游戏设计。它也可以像sudoku一样制作拼图游戏。
　　7) Traffic Cone
　　Traffic Cone支持多人游戏，目前只提供客户端支持，所以你需要提供自己的服务器。为了在不久之后提供更多支持，我们正积极致力于Traffic Cone服务端的开发工作。
　　8) Collie
　　Collie是一个Javascript库，它有助于让HTML5创建高度优化的动画和游戏。 Collie可以在PC 和移动平台上运行HTML 5 canvas 和 DOM。
　　Collie可以稳定地使用渲染管线处理多个对象，并且支持一些有益的特性包括动画精灵和用户事件。它稳定支持iOS和Android，并且为每一个平台优化渲染。 视网膜屏幕也可以轻易地响应。
　　9) Gamejs
　　GameJs是一个基于HTML canvas元素的轻量级库。特别值得一提的是，它的绘画函数为游戏开发者提供各种各样的有用模块，并且还在不断扩充之中。
　　10) Atom
　　11) Jest
　　Jest 是另一个强大的javascript游戏框架，它使用画布元素来创建基于javascript HTML5的游戏。
　　使用画布元素来创建基于javascript HTML5的游戏
　　12) Jawsjs
　　Jawsjs是一个由HGTML5驱动的2D游戏库，最初只支持画布，而目前它已经可以通过相同的API支持基于精灵的普通DOM
　　13) Objects.js
　　objects.js是一个用来创建高性能(和大型)游戏和应用的框架，使用javascript。
　　14) Play Craftlabs
　　Playcraft具备了一个完整的HTML5游戏引擎工作集，提供了你在建立游戏并直接发布到市场上的每一件工具。这是一个独一无二的引擎，当编写游戏时你可以轻松地将其转换到许多不同平台上，包括Facebook，简朴的老式网站，以及一些本机化的Android和iOS应用。
　　15) Gladiusjs
　　Gladius是一个3D游戏引擎，全部用JavaScript编写，设计于在浏览器上跑的。该引擎包括了一个功能核心集，这对于所有游戏是通用的，并且还模拟了游戏回环、消息、任务、定时器等。像空间变换这样的通用组件也在内核中提供了。而绘图和物理学这样的特殊功能也作为游戏扩展封装起来并设计于运行在内核之上。一个通用的扩展集将作为工程的一部分被维护着，并且该引擎的一个强大设计目标就是支持第三方扩展。
　　16) Impactjs
　　Impact 提供炫酷的方式来创建javascript 和HTML5 游戏，且支持桌面和移动端浏览器。 Impact 运行于所有支持HTML5的浏览器: Firefox, Chrome, Safari, Opera 并且(瞧!) 甚至是IE9(译者注：我也是醉了)。当然也包括爱疯、爱破的塔尺和艾派德。
　　17) Craftyjs
　　Crafty是另一个javascript上的有用的库。
　　18) Enchantjs
　　另一个用的很多的用于建立HTML5游戏和APP的javascript框架。其用于在HTML5和JS上开发简单游戏和应用。
　　19) Doodle-js
　　一个用于HTML5 Canvas上的JavaScript动漫库
　　20) Frozen
　　Froze是一个开源 HTML5 游戏引擎，其通过工具化模块化实现易用、快速开发。
　　21) Withpulse
　　Withplus用于建立 2D javascript 游戏和绘图引擎。 定期使用最新的HTML5 技术扩展建立。
　　22) Melonjs
　　melonJS 诞生于我们对Javascript的一腔热血以及过去诸多实验之中, 并且当时苦于没有一个简单、免费、独立的库来支持游戏开发。虽然这个引擎还在开发中，但是已经允许大家轻松地创建一些好玩的哟西了。
　　23) GameQueryjs
　　gameQuery 是一个易于使用的jQuery 插件版引擎，通过增加一些简单的游戏相关类来帮助js游戏开发。如果你懂得使用jQuery那么你几乎不用问怎么使用gameQuery!
　　24) jsGamesoup
　　一个使用Javascript和开放网页技术来制作游戏的免费软件框架。
　　25) Clay
　　通过clay.io创建HTML5游戏将非常简单。
关键词：HTML5 , JavaScript,Web,Java
责任编辑：容心
All Rights Reserved, Copyright , .cn渝ICP证B2-号 如有意见请与我们联系 powered by 天极内容管理平台CMS4i
京公网安备84号Html5本地存储和本地数据库
一、本地存储由来的背景
众所周知Html4时代Cookie的大小、格式、存储数据格式等限制，网站应用如果想在浏览器端存储用户的部分信息，那么只能借助于Cookie。但是Cookie的这些限制，也就导致了Cookie只能存储一些ID之类的标识符等简单的数据，复杂的数据就更别扯了。
下面是Cookie的限制：
1, 大多数浏览器支持最大为 4096 字节的 Cookie。
2, 浏览器还限制站点可以在用户计算机上存储的 Cookie 的数量。大多数浏览器只允许每个站点存储 20 个 Cookie；如果试图存储更多 Cookie，则最旧的 Cookie 便会被丢弃。
3, 有些浏览器还会对它们将接受的来自所有站点的 Cookie 总数作出绝对限制，通常为 300 个。
4, Cookie默认情况都会随着Http请求发送到后台服务器，但并不是所有请求都需要Cookie的，比如：js、css、图片等请求则不需要cookie。
Html5的设计者们，一开始就为Html5能成为富客户端做好了准备。为了破解Cookie的一系列限制，Html5通过JS的新的API就能直接存储大量的数据到客户端浏览器，而且支持复杂的本地数据库，让JS简直就是逆天了。Html5支持两种的WebStorage，一种是永久性的本地存储（localStorage），另外一种是会话级别的本地存储（sessionStorage）。
二、会话级别的本地存储：sessionStorage
在Html5中增加了一个Js对象：sessionStorage；通过此对象可以直接操作存储在浏览器中的会话级别的WebStorage。存储在sessionStorage中的数据首先是Key-Value形式的，另外就是它跟浏览器当前会话相关，当会话结束后，数据会自动清除，跟未设置过期时间的Cookie类似。
sessionStorage提供了四个方法来辅助我们进行对本地存储做相关操作。
（1）setItem(key,value)：添加本地存储数据。两个参数，非常简单就不说了。
（2）getItem(key):通过key获取相应的Value。
（3）removeItem(key):通过key删除本地数据。
（4）clear():清空数据。
&script type="text/javascript"&
//添加key-value 数据到 sessionStorage
sessionStorage.setItem("demokey", "");
//通过key来获取value
var dt = sessionStorage.getItem("demokey");
alert(dt);
//清空所有的key-value数据。
//sessionStorage.clear();
alert(sessionStorage.length);
对于JS的学习和调试必须得有Chrome的调试工具辅助才能事半功倍。当然Chrome也是我最喜爱的Web开发辅助工具，非常简单F12快捷键就立即打开工具了，包括IE也是这个快捷键。通过下图就可以查看当前浏览器中的sessionStorage数据。
三、永久本地存储：localStorage
在最新的JS的API中增加了localStorage对象，以便于用户存储永久存储的Web端的数据。而且数据不会随着Http请求发送到后台服务器，而且存储数据的大小机会不用考虑，因为在HTML5的标准中要求浏览器至少要支持到4MB.所以，这完全是颠覆了Cookie的限制，为Web应用在本地存储复杂的用户痕迹数据提供非常方便的技术支持。那接下里分别介绍一下localStorage的常用的方法，当然基本上跟sessionStorage是一致的。
localStorage提供了四个方法来辅助我们进行对本地存储做相关操作。
（1）setItem(key,value)：添加本地存储数据。两个参数，非常简单就不说了。
（2）getItem(key):通过key获取相应的Value。
（3）removeItem(key):通过key删除本地数据。
（4）clear():清空数据。
&script type="text/javascript"&
//添加key-value 数据到 sessionStorage
localStorage.setItem("demokey", "");
//通过key来获取value
var dt = localStorage.getItem("demokey");
alert(dt);
//清空所有的key-value数据。
//localStorage.clear();
alert(localStorage.length);
四、逆天了本地数据库
虽然Html5已经提供了功能强大的localStorage和sessionStorage，但是他们两个都只能提供存储简单数据结构的数据，对于复杂的Web应用的数据却无能为力。逆天的是Html5提供了一个浏览器端的数据库支持，允许我们直接通JS的API在浏览器端创建一个本地的数据库，而且支持标准的SQL的CRUD操作，让离线的Web应用更加方便的存储结构化的数据。接下里介绍一下本地数据的相关API和用法。
操作本地数据库的最基本的步骤是：
第一步：openDatabase方法：创建一个访问数据库的对象。
第二步：使用第一步创建的数据库访问对象来执行transaction方法，通过此方法可以设置一个开启事务成功的事件响应方法，在事件响应方法中可以执行SQL.
第三步：通过executeSql方法执行查询，当然查询可以是：CRUD。
接下来分别介绍一下相关的方法的参数和用法。
（1）openDatabase方法：
//Demo：获取或者创建一个数据库，如果数据库不存在那么创建之
var dataBase = openDatabase(“student”, “1.0”, “学生表”, 1024 * 1024, function () { });
openDatabase方法打开一个已经存在的数据库，如果数据库不存在，它还可以创建数据库。几个参数意义分别是：
1，数据库名称。
2，数据库的版本号，目前来说传个1.0就可以了，当然可以不填；
3，对数据库的描述。
4，设置分配的数据库的大小（单位是kb）。
5，回调函数(可省略)。
初次调用时创建数据库，以后就是建立连接了。
（2）db.transaction方法可以设置一个回调函数，此函数可以接受一个参数就是我们开启的事务的对象。然后通过此对象可以进行执行Sql脚本，跟下面的步骤可以结合起来。
（3）通过executeSql方法执行查询。
ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
参数说明：
qlQuery：需要具体执行的sql语句，可以是create、select、update、delete；
value1,value2..]：sql语句中所有使用到的参数的数组，在executeSql方法中，将s&语句中所要使用的参数先用“?”代替，然后依次将这些参数组成数组放在第二个参数中
ataHandler：执行成功是调用的回调函数，通过该函数可以获得查询结果集；
4,errorHandler：执行失败时调用的回调函数；
下面是一个综合的例子，可以看一下：
src="Scripts/jquery-1.5.1.js" type="text/javascript"&&
type="text/javascript"&
function initDatabase() {
var db = getCurrentDb();
if(!db) {alert("您的浏览器不支持HTML5本地数据库");return;}
db.transaction(function (trans) {
trans.executeSql("create table if not exists Demo(uName text null,title text null,words text null)", [], function (trans, result) {
}, function (trans, message) {
}, function (trans, result) {
}, function (trans, message) {
$(function () {
initDatabase();
$("#btnSave").click(function () {
var txtName = $("#txtName").val();
var txtTitle = $("#txtTitle").val();
var txtWords = $("#txtWords").val();
var db = getCurrentDb();
db.transaction(function (trans) {
trans.executeSql("insert into Demo(uName,title,words) values(?,?,?) ", [txtName, txtTitle, txtWords], function (ts, data) {
}, function (ts, message) {
alert(message);
showAllTheData();
function getCurrentDb() {
var db = openDatabase("myDb", "1.0", "it's to save demo data!", 1024 * 1024); ;
function showAllTheData() {
$("#tblData").empty();
var db = getCurrentDb();
db.transaction(function (trans) {
trans.executeSql("select * from Demo ", [], function (ts, data) {
if (data) {
for (var i = 0; i & data.rows. i++) {
appendDataToTable(data.rows.item(i));
}, function (ts, message) {alert(message);var tst =});
function appendDataToTable(data) {
var txtName = data.uN
var txtTitle = data.
var words = data.
var strHtml = "";
strHtml += "&tr&";
strHtml += "&td&"+txtName+"&/td&";
strHtml += "&td&" + txtTitle + "&/td&";
strHtml += "&td&" + words + "&/td&";
strHtml += "&/tr&";
$("#tblData").append(strHtml);
&用户名：&
& type="text" name="txtName" id="txtName" required/&&
& type="text" name="txtTitle" id="txtTitle" required/&&
& type="text" name="txtWords" id="txtWords" required/&&
type="button" value="保存" id="btnSave"/&
type="button" value="展示所哟数据" onclick="showAllTheData();"/&
id="tblData"&
执行的效果如图：
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：49122次
排名：千里之外
原创：10篇
转载：50篇
(2)(2)(1)(3)(2)(2)(1)(2)(1)(1)(1)(3)(4)(1)(28)(5)(1)