html 5 本地数据库（Web Sql Database）

基于HTML5的Web DataBase 可以让你在浏览器中进行数据持久地存储管理和有效查询，假设你的离线应用程序有需要规范化的存储功能

本文讲述如何使用核心方法openDatabase、transaction、executeSql

1.新建一个网页，比如：test.html 内容如下：

[html] view plaincopy

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>web sql database</title>
<script type='text/javascript' src='jquery-1.4.3.js'></script>
<script type="text/javascript">
$(function(){
if (!window.openDatabase) {
alert("不支持");
}
else {
initDB();
createTables();
}
function initDB(){
var shortName = 'localDB';
var version = '1.0';
var displayName = 'localDB table';
var maxSize = 655350; // in bytes
//window.openDatabase("数据库名字", "版本","数据库描述",数据库大小);
localDB = window.openDatabase(shortName, version, displayName, maxSize);
}
function createTables(){
var query = 'CREATE TABLE IF NOT EXISTS user(id INTEGER NOT NULL, username TEXT NOT NULL);';
try {
localDB.transaction(function(transaction){
transaction.executeSql(query, [], null, null);
});
}
catch (e) {
console.log("create table failed");
alert("建表失败");
return;
}
}
});
function btnClick(){
var username = $("#username").val();
try {
localDB.transaction(function(transaction){
transaction.executeSql("insert into user(id,username) values(?,?)", [1,username]);
});
}
catch (e) {
console.log("insert into failed");
alert("插入失败");
return;
}
console.log("insert into success");
//alert("insert into success");
}
function btnSelect(){
localDB.transaction(function(tx) {
tx.executeSql("select * from user", [],
function(tx, result) {
$("#result").empty();
for(var i = 0; i < result.rows.length; i++){
$("#result").append('<b>' +result.rows.item(i)['id']+"------" +result.rows.item(i)['username']+ '</b><br />');
}
}, function(){
alert("error");
});
});
}
</script>
</head>
<body>
<div id="my" style="height:100px;width:200px;border:1px solid red;">
<input type="text" name="username" id="username" value=""/>
<br/>
<button onclick="btnClick()">insert</button>
</div>
<div id="my1" style="height:300px;width:200px;border:1px solid red;">
<button onclick="btnSelect()">select</button>
<div id="result" style="height:300px;width:200px;border:1px solid blue;">
</div>
</div>
</body>
</html>

2.注意引入js文件哦

3.已经ok，直接打开网页浏览 ,用谷歌浏览器，然后按 F12键查看 Application --Web SQL 下面有新建的数据库以及表

html 5 本地数据库（Web Sql Database）相关推荐

HTML5中的本地数据库-Web SQL Database
html5增加新的特性,那就是增加了本地存储!改善用户体验,或许html5会带着我们走进新的互联网时代. 下面看看怎样操作web 数据库吧!!首先新建数据库! var db = window.ope ...
HTML5本地存储——Web SQL Database
在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
HTML5 API详解（17）:Web SQL DataBase本地数据库
Web SQL Database是一个已经废弃的规范,但是鉴于除了IE和Firefox,其他浏览器都已经实现了Web SQL Database,并且它还具有一些HTML5 Storage所不具有的特性 ...
HTML5开发 Web SQL Database 本地数据库
Web Database 介绍 Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库.Safari.Chrome.Firefox.Oper ...
HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
HTML5客户端数据存储机制Web Storage和Web SQL Database
引言 html5本地存储可以选择两种方式,一种是本地存储,一种是sqlite. 比如开发html5的购物车功能,就可以考虑选择其中之一,进行本地存储与操作. 又或者保存用户登录信息,可以使用local ...
Web SQL Database 之 SQLite语法
Web SQL Database 之 SQLite语法目录(?)[+] 转自:http://www.cnblogs.com/helloandroid/articles/2150272.html id ...
html中使用sql数据库,Web Sql数据库的使用详解|HTML5
HTML5中的Web Sql数据库在实际应用中并不是很多,本人只看到w3schools这种教学网才用到websql,目前也只有Webkit(Safari,SafariMobile和Chrome)和Op ...
web sql database数据存储位置
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Q1: ...

html 5 本地数据库（Web Sql Database）

html 5 本地数据库（Web Sql Database）相关推荐

最新文章

热门文章