客户端持久化解决方案: 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. activiti 部署在oracle多用户下不能自动建表问题的解决!

    在activiti配置文件中的SpringProcessEngineConfiguration的配置项中添加<property name= "databaseSchema" ...

  2. 【ecos学习1】wmware运行redboot[方法一]--脚本实现配置

    背景: 远程服务器Ubuntu生成软盘镜像,通过Mac下wmware运行. 1- 环境及版本: uname -a 2.6.38-8-generic #42-Ubuntu SMP Mon Apr 11 ...

  3. 字符排序(hdoj1106)

    Problem Description 输入一行数字,如果我们把这行数字中的‘5’都看成空格,那么就得到一行用空格分割的若干非负整数(可能有些整数以‘0’开头,这些头部的‘0’应该被忽略掉,除非这个整 ...

  4. python socket编程学习笔记2

     server.py: [服务端步骤]: 1.创建socket对象 2.将socket绑定到指定地址(bind) 3.监听连接请求(listen) 4.等待客户请求(accept) 5.处理请求(服务 ...

  5. SQL Server 创建索引的 5 种方法

    前期准备: create table Employee (            ID int not null primary key,            Name nvarchar(4),  ...

  6. OSChina技术导向:Java图表框架JFreeChart

    JFreeChart主要用来各种各样的图表,这些图表包括:饼图.柱状图(普通柱状图以及堆栈柱状图).线图.区域图.分布图.混合图.甘特图以及一些仪表盘等等.             JavaDoc文档 ...

  7. HTML标签实现图片滚动显示

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. 查看实时公网ip

    icanhazip.com 使您在任何地方知道你的公网IP地址 icanhazip.com 使你在任何地方知道你的公网IP地址 icanhazip.com 使你在任何地方知道你的公网IP地址 ican ...

  9. sql 中的 indexOf 与 lastIndexOf

    DECLARE @Name NVARCHAR (50)SET @Name = '12345.67890ABCDE.FGHIJKLMNOPQRSTUVWXYZTest' DECLARE @Positio ...

  10. grep 和 sed:linux经常使用工具 &amp; 基本正則表達式

    grep 见链接:http://www.cyberciti.biz/faq/grep-regular-expressions/ sed參考文章:http://www.thegeekstuff.com ...