HTML5本地存储——Web SQL Database

基于 HTML5 中的 Web SQL Database 来构建应用程序

前端HTML5几种存储方式的总结

<!DOCTYPE HTML>

<html>

<head>

    <script type="text/javascript">

        var msg;

        // 可以有多个数据库，但无法遍历，

        // 包括空字符串在内的所有字符串都可以作为有效地数据库名称，数据库名称区分大小写，且可以比较。

        // 一个数据库只能有一个版本号

        // 一个显示名字（displayName），

        // 数据库将要保存数据的大小（estimatedSize，以字节为单位 )

        // 一个可选的回调函数（createionCallback，如果数据库没有被创建，这个函数将会被调用 )

        var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

        // 方法 transaction() 和 readTransaction() 有一个到三个参数，

        // 后两个参数为可选的，分别表示错误回调函数和成功回调函数。

        // transaction() 方法为 read/write 模式，readTransaction() 方法为只读模式；

        db.transaction(function (tx) {

               tx.executeSql('CREATE TABLE IF NOT EXISTS ques (id unique, log)');

               tx.executeSql('INSERT INTO ques (id, log) VALUES (4, "foobar")');

               tx.executeSql('INSERT INTO ques (id, log) VALUES (3, "logmsg")');

               msg = '<p>Log message created and row inserted.</p>';

            document.querySelector('#status').innerHTML =   msg;

        },function(){alert('e');},function(){alert('s');});

        // executeSql这个函数具有四个参数：

        // 表示查询的字符串（sqlStatement）；

        // 插入到查询语句中问号所在处的字符串数据（arguments)；

        // 一个可选的成功时执行函数（callback）；

        // 一个可选的失败时执行函数（errorCallback）。

        // 查询结果是一个对象

        // 插入数据库，insertId 代表这个行号；如果插入多行数据，insertId 代表插入数据的最后一行行号。

        // 改变的行数用 rowsAffected 表示，没有改变 rowsAffected 为 0，“SELECT”语句，rowsAffected 就为 0.

        // rows 为一个 SQLResultSetRowList 对象，代表数据库按顺序返回的行。如果没有返回任何行，则这个对象为空。

        db.transaction(function (tx) {

            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {

                var len = results.rows.length, i;

                     msg = "<p>Found rows: " + len + "</p>";

                     document.querySelector('#status').innerHTML +=   msg;

                for (i = 0; i < len; i++){

                       msg = "<p><b>" + results.rows.item(i).log + "</b></p>";

                       document.querySelector('#status').innerHTML +=   msg;

                }

             }, null);

        });

    </script>

</head>

<body>

    <div id="status" name="status">Status Message</div>

</body>

</html>

HTML5 webSQL

Web SQL的更多相关文章

  1. HTML5教程之html 5 本地数据库（Web Sql Database）

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

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

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

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

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

  4. web sql database数据存储位置

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

  5. 阿伦学习html5 之Web SQL Database

    不知道什么情况, W3C不再维护web SQL Database规范,但是大多浏览器都支持了! Web SQL Database规范页面有着这样的声明 Web SQL Database 规范中定义的三 ...

  6. localStorage, localforage, web sql三者的比较

    最近的项目中用到了前端存储,最初选用的是localStorage,这个是html5里面新增的API,用法很简单.setItem getItem clear. 值得注意的是,localStorage中存 ...

  7. 【HTML5】HTML5本地数据库（Web Sql Database）

    Web Sql数据库简介 Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库. Web SQL数据库的浏览器支持情况 Web SQL 数 ...

  8. Web持久化存储Web SQL、Local Storage、Cookies（常用）

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

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

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

  10. Web SQL Database实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. “双十一”购物狂欢节，电商运营和商业智能（BI）才是绝配

         百年前,人们获取信息的方式是通过报纸.书籍:十年前,人们获取信息的方式是通过传统PC互联网:而如今,在4G网络高速发展的浪潮下,伴随着移动智能终端的普及,人们获取信息的方式已经逐渐转向了移动 ...

  2. 在windows下使用cmd命令行对java文件进行编译和执行

    windows下利用cmd命令行可以调用jdk里的javac.exe和java.exe对java文件进行编译和执行,前提是jdk已成功安装并正确配置相关环境变量 相关配置链接:java基础学习总结—— ...

  3. .Net内存优化的几点经验

    以前从来没有想过.Net开发居然存在内存无法释放的问题,总是认为GC给我处理好了一切.现在GIS二次开发结合三维球开发,没有想到存在如此严重的内存增长,很快内存就不够用了,导致系统各种不稳定.球体和三 ...

  4. python 上传下载文件

    server.py #!/usr/bin/env python # -*- coding:utf- -*- import SocketServer import os class MySocketSe ...

  5. 安装GRID时跑root.sh脚本报错（ORA-27091: unable to queue I/O）

    在安装GRID过程中,运行root.sh脚本时报如下信息: Adding Clusterware entries to upstart CRS-2672: Attempting to start 'o ...

  6. 查看PostgreSQL版本,编译器版本号

    [postgres@localhost bin]$ ./psql -h localhostpsql (9.4.5)Type "help" for help. postgres=# ...

  7. HTML_css样式表 样式属性 格式布局

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  8. Java基础(46)：选择排序的Java封装（完整可运行）

    1 package lsg.ap.select; import java.util.Random; public class SelectSort { //选择排序 /** *@author: 梁山广 ...

  9. poj: 1207

    好吧这题竟然还有先大后小的可能,能不这么恶心下吗.. #include <iostream> #include <stdio.h> #include <string.h& ...

  10. <c:if>标签的使用

    <c:if>标签用来在页面中实现条件化的判断功能.它的主要目的就是替换Java脚本中的if语句,来实现页面内容的条件化输出功能.这个标签所进行的判读主要是依据表达式来进行的,如果该表达式的 ...