<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
window.onload = function () {
var one = document.getElementById('one'); if (window.openDatabase) {
var dataBase = openDatabase("student", "1.0", "学生表", 1024*1024, function() { });
dataBase.transaction(function (fx) {
//创建一个表
fx.executeSql(
"create table if not exists stu (id REAL UNIQUE, name TEXT)",
[],
function () { //表创建成功
alert("表创建成功");
},
function () { //表创建失败
alert("表创建失败");
}
); //插入数据
fx.executeSql(
"insert into stu (id, name) values(?, ?)",
[1, "张三"],
function () { //表创建成功
alert("数据插入成功");
},
function () { //表创建失败
alert("数据插入失败");
}
); //更新数据
fx.executeSql(
"update stu set name = ? where id = ?",
["李四", 1],
function () { //表创建成功
alert("数据更新成功");
},
function () { //表创建失败
alert("数据更新失败");
}
); //查询数据
fx.executeSql(
"select * from stu",
[],
function (fx, result) { //表创建成功
// alert(result.rows.length);
for(var i = 0; i < result.rows.length; i++) {
one.innerHTML = result.rows.item(i)['name'];
}
alert("数据查询成功");
},
function () { //表创建失败
alert("数据查询失败");
}
); //删除数据
fx.executeSql(
"delete from stu where id=?",
[1],
function (fx, result) { //表创建成功
one.innerHTML = "";
},
function () { //表创建失败
alert("删除失败");
}
); //删除表
fx.executeSql(
"drop table stu",
[],
function (fx, result) { //表创建成功
alert("表删除成功");
},
function () { //表创建失败
alert("表删除失败");
}
); })
}
}
</script>
</head>
<body>
<p id="one">测试</p>
</body>
</html>

html ---- web sql 例子的更多相关文章

  1. HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

  2. [转]HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

  3. (转)HTML 5离线存储之Web SQL

    原文:http://developer.51cto.com/art/201106/267357.htm HTML 5离线存储之Web SQL 2011-06-07 15:14 kkun kkun的博客 ...

  4. HTML5本地存储——Web SQL Database与indexedDB

    虽然在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数 ...

  5. 关于web浏览器的Web SQL和IndexedDB

    虽然在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数 ...

  6. Web SQL与indexedDB

    虽然在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数 ...

  7. HTML5教程之html 5 本地数据库(Web Sql Database)

    HTML5的Web SQL Databases(html5 本地数据库)的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的.今天,我们一起来了解HTM ...

  8. HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  9. web sql database数据存储位置

    Q1: 数据存储在哪儿? Web Storage / Web SQL Database / Indexed Database 的数据都存储在浏览器对应的用户配置文件目录(user profile di ...

随机推荐

  1. Android笔记---使用HttpClient发送POST和GET请求

    在Android上发送 HTTP 请求的方式一般有两种, HttpURLConnection 和 HttpClient,关于HttpURLConnection的使用方法能够參考HTTP之利用HttpU ...

  2. Acceptor-Connector模式一(Acceptor的工作)V2.0

    前言:ACE Acceptor-Connector模式 首先这样的模式肯定是面向连接的TCP/IP协议. 无论是什么场景.差点儿面向连接的通信程序总是由一端主动发起连接,一端监听等待对方的连接. 这就 ...

  3. TCP/IP协议分析(推荐)

    一;前言 学习过TCP/IP协议的人多有一种感觉,这东西太抽象了,没有什么数据实例,看完不久就忘了.本文将介绍一种直观的学习方法,利用协议分析工具学习TCP/IP,在学习的过程中能直观的看到数据的具体 ...

  4. SDUTOJ 2804求二叉树的深度

    #include<iostream> #include<stdlib.h> #include<string.h> using namespace std; char ...

  5. PDF快速创建目录

    很多从网上直接下载的PDF电子书目录都不全,因此搜索资料又加以改化,总结了一个自己手动快速创建目录的办法,分享给大家. 百度搜索PDF电子书的目录或者直接从PDF拷贝到Notepad++等编辑器,使用 ...

  6. 【leetcode】118. Pascal&#39;s Triangle

    @requires_authorization @author johnsondu @create_time 2015.7.23 19:54 @url [Pascal's Triangle](http ...

  7. LeetCode226 InvertBinaryTree Java题解

    题目: Invert a binary tree. 4 / \ 2 7 / \ / \ 1 3 6 9 to 4 / \ 7 2 / \ / \ 9 6 3 1 解答: 遍历每个节点  直接交换他们的 ...

  8. linux的用户、群组

    1.      用户及passwd文件 1)      掌握/etc/passwd文件的功能:存储所有用户的相关信息,该文件也被称为用户信息数据库(Database). 2)      /etc/pa ...

  9. Maven的配置地址

    http://howtodoinjava.com/tools/eclipse/how-to-import-maven-remote-archetype-catalogs-in-eclipse/ htt ...

  10. centos7.2 开发 部署 .net core

    1.centos7.2 安装 nginx官方文档:http://nginx.org/en/linux_packages.html#mainline 创建nginx.repo 文件 Pre-Built ...