客户端持久化解决方案: Web SQL

Web SQL 提供了一组使用 SQL 操作客户端数据库的 APIs, 不是 HTML5 规范的一部分,是一个独立的规范.

核心方法

  • openDatabase: 打开或新建数据库,返回数据库对象。
  • transaction: 打开一个事务,从而可以执行提交或者回滚。
  • executeSql: 执行实际的 SQL 查询。

打开/创建数据库

// window.openDatabase(dbName, version, description, dbSize, [createCallback]);
// 注: 数据库创建时才会触发回调
var db = openDatabase('mydb', '1.0', 'Test DB', 2*1024*1024, function() { console.log('db created..')});

创建数据库之后,就可以通过executeSql创建表,进而执行CRUD操作.

创建表

var db = openDatabase(dbName);
db.transaction(function(transaction) {////开启事务,在回调中执行sql
transaction.executeSql('CREATE TABLE IF NOT EXISTS user (id unique, name)');
});

插入数据

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
});

读取数据

db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg; for (i = 0; i < len; i++){
alert(results.rows.item(i).log );
} }, null);
});

客户端持久化解决方案: Web SQL的更多相关文章

  1. 客户端持久化解决方案:indexedDB

    客户端持久化解决方案:indexedDB indexedDB适合大量的结构化的数据存储:打开数据库和获取数据对象都是异步的: 需要开启事务,访问的objectStore都要是在开启的事务中. 数据库结 ...

  2. Web持久化存储Web SQL、Local Storage、Cookies(常用)

    在浏览器客户端记录一些信息,有三种常用的Web数据持久化存储的方式,分别是Web SQL.Local Storage.Cookies. Web SQL 作为html5本地数据库,可通过一套API来操纵 ...

  3. 客户端数据持久化解决方案: localStorage

    客户端数据持久化解决方案: localStorage localStorage主要用来替代cookie,解决cookie读写困难.容量有限的问题. localStorage有以下几个特点 localS ...

  4. HTML5客户端数据存储机制Web Storage和Web SQL Database

    引言 html5本地存储可以选择两种方式,一种是本地存储,一种是sqlite. 比如开发html5的购物车功能,就可以考虑选择其中之一,进行本地存储与操作. 又或者保存用户登录信息,可以使用local ...

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. struts2开发经验小结(method="{1}"等)

    这里的{1}表示接收前面action里通过通配符传来的值,例如你配置的是<action name="*Crud" class="example.Crud" ...

  2. webStorm 列编辑

    webStorm可以像Sublime一样使用列编辑,只是区别在于webStorm只可以编辑连续列表. 按住alt键鼠标选择一列,然后输入文字就会编辑多行,这个功能很赞,比较实用

  3. php微信公众帐号发送红包

    开发框架为we7 所需参数:appid,appSecret,MchId,API密钥 <?php /** * 微信红包的类 * */ CLASS WXHongBao { private $mch_ ...

  4. Update与Mysql、Sqlsever中的随机数

    批量修改数据库中的字段为随机数时 Mysql中的写法: )--取1-50的随机数 Sqlsever中的写法: update t set col=ABS(CHECKSUM(NEWID()))%50+1 ...

  5. 一个简单的倒计时js插件

    接收的参数end是必须传的,格式是/分隔的日期字符串,start是可选的,不传就是从现在开始倒计时,callback也是可选的,到倒计时接收时执行自定义的函数. countdown({ 'end':' ...

  6. HttpClient post 请求实例

    所需jar包: commons-codec-1.3.jar commons-httpclient-3.0.jar commons-logging-1.1.1.jar /** * */ package ...

  7. linux系统监控常用工具

    linux系统监控常用工具 一.系统核心工具包(coreutils) 1./bin/df 报告系统的磁盘空间用量 df -h  显示磁盘分区fdisk -l 2./bin/uname 显示系统信息 u ...

  8. codevs1040 统计单词个数

    题目描述 Description 给出一个长度不超过200的由小写英文字母组成的字母串(约定;该字串以每行20个字母的方式输入,且保证每行一定为20个).要求将此字母串分成k份(1<k<= ...

  9. 数据结构--队列之C数组实现

    队列是一种限定操作的线性表,它只能在表的一段插入,另外一段取出.所以也称为先进先出数据结构(FIFO---First In First Out) C代码如下: #include<stdio.h& ...

  10. 浅谈JNDI的使用

    原文:http://www.weicoop.com/web/article/52.html 关于什么是JNDI的概念这里不做解释,本文作为初学者根据所了解到内容做些总结,主要内容如下: 1.JNDI使 ...