Web SQL

1.Web SQL的兼容性与基本特点

1.1 兼容性

Web SQL的兼容性并不是特别理想，仅chrome ，safari，opera 10.5+等浏览器支持。

归咎其原因，主要是因为 Web SQL Database API 实际上并不包含在 HTML5 规范之中。它是一个独立的规范，它引入了一套使用 SQL 操作客户端数据库的 API。其规范已经被停止更新了，所以大多数浏览器并不支持。

1.2 主要特点
Web SQL相对于 sessionStorage ,locationStorage最大的优势：

能方便的进行对象存储
能进行大量的数据的处理

2.Web SQL的核心方法

Web SQL Database 规范中定义的三个核心方法：

openDatabase：这个方法使用现有数据库或新建数据库来创建数据库对象
transaction：这个方法允许我们根据情况控制事务提交或回滚
executeSql：这个方法用于执行真实的 SQL 查询

3.Web SQL的基本代码实现

3.1 创建或打开数据库

  openDatabase(databasename,version,description,size);

几个参数意义分别是：
1. 数据库名称。
2. 版本号。
3.对数据库的描述。
4.设置数据的大小。
5.回调函数(可省略)。
初次调用时创建数据库，以后就是建立连接了。

//创建web SQL数据库
//Chrome 和 Opera 和Safari 支持,其余大多数不支持(web SQL已经被废弃)
var mydb = {};
mydb.createDB = function(){mydb.dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });if (!mydb.dataBase) {console.log("数据库创建失败！");} else {console.log("数据库创建成功！");}
};

3.2 定义数据表内容和格式

“create table if not exists stu (存储名存储格式，存储名存储格式…… ) values(？,？,…….)” []

//创建数据表
mydb.createTable=function() {mydb.dataBase.transaction( function(tx) {tx.executeSql("create table if not exists stu (name TEXT, sex INT, number REAL UNIQUE, chinese FLOAT, math FLOAT, english FLOAT, science FLOAT,sum FLOAT,average FLOAT)",[],function(tx,result){ console.log('创建stu表成功'); },function(tx, error){ console.log('创建stu表失败:' + error.message);});});
};

3.3 添加一项表格数据

//添加信息
mydb.insert = function (obj,add_flag) {mydb.dataBase.transaction(function (tx) {tx.executeSql("insert into stu(name,sex,number, chinese,math,english,science,sum,average) values(?,?,?,  ?,?,?,?,?,?)",[obj.username, obj.sex, obj.number, obj.chinese,obj.math,obj.english,obj.science,obj.sum,obj.average],function (){console.log('添加数据成功');},function (tx, error) {console.log('添加数据失败: ' + error.message);});})
};

3.4 根据 number/id 删除一项数据

//删除数据
mydb.delete = function (number) {mydb.dataBase.transaction(function (tx) {tx.executeSql("delete from stu where number= ?",[number],function (tx, result) {console.log('删除完成');},function (tx, error) {console.log('删除失败: ' + error.message);});});
};

3.5 根据 number/id 查询某一项数据

//查询数据
mydb.search = function (number) {mydb.dataBase.transaction(function (tx) {tx.executeSql("select * from stu where number = ?", [number],function (tx, result) {//执行成功的回调函数if(result.rows.length == 0){console.log('该信息不存在');}else {console.log('查询成功');}},function (tx, error) {console.log('查询失败: ' + error.message);});});
};

3.6 根据 number/id 更新某一项数据

//更新数据
mydb.update = function (obj) {mydb.dataBase.transaction(function (tx) {tx.executeSql("update stu set " + "name=?,sex=?,chinese=?,math=?,english=?,science=?,sum=?,average=? where number= ? ",[obj.username,obj.sex,obj.chinese,obj.math,obj.english,obj.science,obj.sum,obj.average,obj.number],function (tx, result) {console.log('更新成功');},function (tx, error) {console.log('更新失败: ' + error.message);});});
};

3.7 删除整个数据表内容

//删除数据表内容
mydb.dropTable = function () {mydb.dataBase.transaction(function (tx) {tx.executeSql('drop table stu');});
};

4.在使用中需要注意的事项

4.1
测试过程中，发现在查询和更新方法中，返回总是查询成功或更新成功（尽管数据并不存在）。这样便不能用回调函数来判断数据是否真的存在。
还好在回调函数的参数result.rows可以看到其数组大小

     function (tx, result) {//执行成功的回调函数if(result.rows.length == 0){console.log('该信息不存在');}else {console.log('查询成功');}}

根据其数组的大小便可判断数据是否存在（对于避免重复输入同一number的学生起到了至关重要的作用）。

4.2
还有一点我们的数据表到底存放在电脑的哪里呢？
拥有电脑洁癖个性的我肯定要把它放入回收站了！

chrome一般存放在C:\Users\AppData\Local\Google\Chrome\User Data\Default\databases 下

4.3
关于第3小节内的最后一个方法 mydb.dropTable()；并不能删除其表格，只是单纯的删除了其表格内容。（数据库方面个人不是特别懂，请谅解）

总结

Web SQL操作很方便，其缺点就是兼容性太差了。其次在网上也看到其安全性并不是十分高。下一章我将分析IndexedDB的特点和使用。那么到底哪个更加有优势呢？

Web存储——Web SQL的使用(一)相关推荐

jQuery web存储详解
写在本章开始前: 第十七章作为独立的一章,涉及到jQuery的方方面面,是篇幅很长的一章.为了更新客户端存储(本章),特跳过十七章.(十七章将在本章完成后继续更新,望大家关注.) web应用允许 ...
web安全学习-sql注入-针对mysql的攻击
文章目录 1. 前言补充:读取客户端本地文件到服务端mysql数据库补充:利用全局日志写shell 补充:修改mysql的root密码补充:配置远程登录补充:低权限下读文件补充:高版本mys ...
Web安全Day1 - SQL注入实战攻防
声明:文中所涉及的技术.思路和工具仅供以安全为目的的学习交流使用,任何人不得将其用于非法用途以及盈利等目的,否则后果自行承担! 本专题文章导航 1.Web安全Day1 - SQL注入实战攻防 http ...
Web安全性测试—SQL注入
Web安全性测试-SQL注入因为要对网站安全性进行测试,所以,学习了一些sql注入的知识. 在网上看一些sql注入的东东,于是想到了对网站的输入框进行一些测试,本来是想在输入框中输入<scri ...
适合0基础的web开发系列教程-web 存储
HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web ...
【阿里云大学课程】前端必知——HTML5新特性完整视频教程（音频、视频、画布、web存储、动画……）...
HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定,其设计目的是为了在移动设备上支持多媒体. 本课程中,你将学习到下列这些HTML5新特性(点击下列课时立即学习): ...
web存储机制localStorage和sessionStorage
https://www.cnblogs.com/yaoyuqian/p/7901052.html web存储包括两种:sessionStorage 和 localStorage(都是限定在文档源级别, ...
js客户端存储之Web存储
WEB存储客户端存储有几种方式,WEB存储就是其中一种.最初作为H5的一部分被定义成API形式,后来被剥离出来作为独立的标准.所描述的API包含localStorage对象和sessionStora ...
【HTML5】Web存储、通信、地理位置
Web存储 cookie 存储在浏览器中,每次浏览器向服务器发送请求都需要携带cookie.一般情况下,cookie是产生于服务器端,保存于客户端,但是我们也可以通过js来产生cookie.(cook ...
HTML5 本地存储 Web Storage
Web Storage Web Storage 是一项非常重要,并且很实用的技术,已经被大多数浏览器(包括IE8)所支持, 在HTML4时代, 虽然cookie无处不在,但cookie仍然有自己的硬伤 ...

Web存储——Web SQL的使用(一)