SQL实践篇（一）：使用WebSQL在H5中存储一个本地数据库

文章目录

  • 简介
  • 本地存储都有哪些？
  • 如何使用WebSQL
    • 打开数据库
    • 事务操作
    • SQL执行
  • 在浏览器端做一个英雄的查询页面
  • 如何删除本地存储
  • 参考文献

简介

WebSQL是一种操作本地数据库的网页API接口，通过它，我们可以操作客户端的本地存储。

WebSQL曾经是H5里很重要的一种技术，但是后来被废弃了，有的浏览器可能仍旧可以正常使用，但是已经不推荐了，而且大多数浏览器，如Chrome，已经直接禁用了WebSQL了，目前流行的替代品，应该是IndexedDB。

所以本节就是兴趣了解下就行。

主要包括以下内容：

  • 本地存储都有哪些？什么是WebSQL？
  • 使用WebSQL的三个核心方法是什么？
  • 使用WebSQL在本地浏览器里创建一个数据库，并对其进行查询和呈现。

本地存储都有哪些？

本地存储是一个很大的概念，其包括了Cookies、Local Storage、Session Storage、WebSQL、IndexedDB。

Cookies是最早的本地存储，是浏览器端提供，并且对服务器和JS开放，不过可以存储的数据总量只有4KB，如果超过了这个限制就会忽略，没法进行保存，所以一般用来记录一些登陆有关的信息之类的。

Local Storage与Session Storage都属于Web Storage。Web Storage跟Cookies类似，区别在于它有更大容量的存储。Local Storage是持久化的本地存储，除非我们主动删除数据，否则会一直保存在本地。Session Storage只存在于Session会话中，就是说只有在同一个Session页面才能使用。当Session会话结束时，数据也会自动释放。

Web SQL与IndexedDB都是最新的HTML5本地缓存技术，相比前面三种来说，其存储功能更强，支持的数据类型也更多，比如说图片、视频等。

Web SQL，准确的说是Web SQL DB API，它其实是一种操作客户端本地数据库的一类API接口，通过它我们可以很方便的实现基于SQL对本地数据库的增删改查。对浏览器来讲，所谓的本地数据库，一般是指SQLite，比如Chrome和Safari会用SQLite实现本地存储。

如果说WebSQL方便我们对RDBMS进行操作，那么IndexedDB就是一种NoSQL，它存储的是key-value型数据，通常可以超过250M，且支持事务。

在这里插入图片描述

可以看到，本地存储是包含了多种存储方式，它可以很方便的将数据存储在客户端中，从而避免重复调用服务器资源。

而WebSQL，其实并不属于是H5规范的一部分，是一个单独的规范，只是浏览器端同时接受了它跟H5规范。当年，主流的浏览器（Chrome、Safari和Firefox）基本都支持WebSQL，可以在js里通过WebSQL来对客户端数据库进行操作。

2023-11-9 14:15:17 不过我查了下，目前多数浏览器基本都关闭了WebSQL。

如何使用WebSQL

怎么检测你的浏览器是否支持WebSQL？

在你的浏览器里，F12打开命令行，执行以下代码：

if (!window.openDatabase) {alert('浏览器不支持WebSQL');
}

或者是打开以下html：

<!DOCTYPE HTML>
<html><head><meta charset="UTF-8"><title>SQL必知必会</title> <script type="text/javascript">                   if (!window.openDatabase) {alert('浏览器不支持WebSQL');}                               </script>                    </head><body><div id="status" name="status">WebSQL Test</div></body>       
</html>

如果浏览器不支持WebSQL，会弹窗提示"浏览器不支持WebSQL"，否则不会有弹窗提示。试了一下，连chrome现在都禁用WebSQL了。

不过出于兴趣，接下来还是简单介绍下WebSQL的使用吧。

打开数据库

如果数据库存在，则会直接打开，返回一个数据库句柄，不存在则会创建。

var db = window.openDatabase(dbname, version, dbdesc, dbsize,function() {});

5个参数分别是数据库名、版本号、描述、数据库大小、创建回调。

比如说我们想要创建一个名为wucai的数据库，版本号为1.0，大小是1024*1024，单位应该是KB：

var db = openDatabase('wucai', '1.0', '王者荣耀数据库', 1024 * 1024);

事务操作

开启事务执行提交或者回滚操作，如下：

transaction(callback, errorCallback, successCallback);

参数分别是：

  • 处理事务的回调函数。一般在里面写SQL语句，会用到ExecuteSQL方法；
  • 执行失败时的回调函数。可缺省；
  • 执行成功时的回调函数，可缺省。

比如说我们开启一个事务，来创建一个heros数据表，并插入一条数据：

db.transaction(function (tx) {tx.executeSql('CREATE TABLE IF NOT EXISTS heros (id unique, name, hp_max, mp_max, role_main)');tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10000, "夏侯惇", 7350, 1746, "坦克")');
});

SQL执行

使用ExecuteSQL来执行SQL语句，即增删改查。

tx.executeSql(sql, [], callback, errorCallback);

有4个参数，分别是：

  • 要执行的SQL语句；
  • SQL语句中的占位符（？）所对应的参数；
  • 执行SQL成功时的回调函数；
  • 执行SQL失败时的回调函数。

因此，我们创建heros数据表的时候，使用如下命令：

tx.executeSql('CREATE TABLE IF NOT EXISTS heros (id unique, name, hp_max, mp_max, role_main)');

在浏览器端做一个英雄的查询页面

具体步骤如下：

  1. 初始化数据。在 HTML 中设置一个 id 为 datatable 的 table 表格，然后在 JavaScript 中创建 init() 函数，获取 id 为 datatable 的元素。
  2. 创建showData方法。用来展示我们查询出来的一行数据。
  3. 使用openDatabase打开数据库。
  4. 使用transaction执行两个事务。一个是创建heros数据表，并插入5条数据。另一个是对heros表进行查询，并将查询出的结果使用showData进行展示。

完整代码如下，我直接从教程里复制过来了：

<!DOCTYPE HTML>
<html><head><meta charset="UTF-8"><title>SQL必知必会</title> <script type="text/javascript">// 初始化function init() {datatable = document.getElementById("datatable");}// 显示每个英雄的数据function showData(row){var tr = document.createElement("tr");var td1 = document.createElement("td");var td2 = document.createElement("td");var td3 = document.createElement("td");var td4 = document.createElement("td");var td5 = document.createElement("td"); td1.innerHTML = row.id;td2.innerHTML = row.name;td3.innerHTML = row.hp_max;td4.innerHTML = row.mp_max;td5.innerHTML = row.role_main;tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);tr.appendChild(td5);datatable.appendChild(tr);   }// 设置数据库信息var db = openDatabase('wucai', '1.0', '王者荣耀英雄数据', 1024 * 1024);var msg;// 插入数据db.transaction(function (tx) {tx.executeSql('CREATE TABLE IF NOT EXISTS heros (id unique, name, hp_max, mp_max, role_main)');tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10000, "夏侯惇", 7350, 1746, "坦克")');tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10001, "钟无艳", 7000, 1760, "战士")');tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10002, "张飞", 8341, 100, "坦克")');tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10003, "牛魔", 8476, 1926, "坦克")');tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10004, "吕布", 7344, 0, "战士")');msg = '<p>heros数据表创建成功，一共插入5条数据。</p>';document.querySelector('#status').innerHTML =  msg;});// 查询数据db.transaction(function (tx) {tx.executeSql('SELECT * FROM heros', [], function (tx, data) {var len = data.rows.length;msg = "<p>查询记录条数: " + len + "</p>";document.querySelector('#status').innerHTML +=  msg;// 将查询的英雄数据放到 datatable中for (i = 0; i < len; i++){showData(data.rows.item(i));}});});</script></head> <body><div id="status" name="status">状态信息</div><table border="1" id="datatable"></table></body> 
</html>

演示结果如下：

在这里插入图片描述

如何删除本地存储

那如何删除本地存储呢？

直接通过浏览器来删除就可以了，比如在 Chrome 浏览器中找到 Application 中的 Clear storage，然后使用 Clear site data 即可。

在这里插入图片描述

参考文献

  1. 39丨WebSQL：如何在H5中存储一个本地数据库？

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/487951.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

预计2024年之前载人登月！NASA授予马斯克贝索斯公司大单

预计2024年之前载人登月！NASA授予马斯克贝索斯公司大单

来源&#xff1a;小小据外媒报道&#xff0c;当地时间周四&#xff0c;美国宇航局(NASA)宣布选中埃隆马斯克(Elon Musk)旗下美国太空探索技术公司SpaceX、杰夫贝索斯(Jeff Bezos)的蓝色起源公司&#xff08;Blue Origin&#xff09;和Dynetics为其设计和建造月球着陆系统&#…
阅读更多...
java 遗传算法_[原]遗传算法Java实现源代码

java 遗传算法_[原]遗传算法Java实现源代码

【Title】[原]遗传算法Java实现源代码【Date】2013-04-07【Abstract】以前学习遗传算法时&#xff0c;用Java实现的遗传算法程序&#xff0c;现整理分享出来。【Keywords】wintys、遗传、算法、algorithm、种群、基因、个体、进化、染色体、适应度、Rosenbrock【Environment】W…
阅读更多...
理解进化的五座“桥”

理解进化的五座“桥”

来源&#xff1a;原理古往今来&#xff0c;达尔文是不是最具革命性的科学家之一&#xff1f;如果革命指的是把一个已经公认的学说颠倒过来&#xff0c;那挑战者还有很多&#xff0c;至少包括牛顿、爱因斯坦和量子力学的奠基者。这些物理学家超群绝伦的智慧能量&#xff0c;可能…
阅读更多...
【AI】【机器人】AI与机器人的42个终极问题与解答

【AI】【机器人】AI与机器人的42个终极问题与解答

来源&#xff1a;产业智能官 未来智能实验室的主要工作包括&#xff1a;建立AI智能系统智商评测体系&#xff0c;开展世界人工智能智商评测&#xff1b;开展互联网&#xff08;城市&#xff09;云脑研究计划&#xff0c;构建互联网&#xff08;城市&#xff09;云脑技术和企业图…
阅读更多...
With you With me

With you With me

With you With me 回来了&#xff0c;一起从零开始... 据说每一个敢说从零开始的都特么是个大牛&#xff08;for example hiphop-Man欧阳靖&#xff09;... 这些年的时间多有自己问自己&#xff0c;你特么到底在迷茫什么&#xff0c;想不通就去撞墙啊&#xff01;&#xff01;…
阅读更多...
志澄观察：卫星互联网——太空经济新动力

志澄观察：卫星互联网——太空经济新动力

图1 卫星互联网的组成来源&#xff1a;远望智库 引 言2020年04月20日国家发改委首次明确&#xff0c;将卫星互联网列入我国新型基础设施的范围&#xff0c;这项重大的战略决策&#xff0c;大大鼓舞了我国商业航天行业的信心。另一方面&#xff0c;2020年3月27日,在发展低…
阅读更多...
一文读懂电磁学发展史[图文版]

一文读懂电磁学发展史[图文版]

来源&#xff1a;电子万花筒电磁学或称电动力学或经典电动力学。之所以称为经典&#xff0c;是因为它不包括现代的量子电动力学的内容。电动力学这样一个术语使用并不是非常严格&#xff0c;有时它也用来指电磁学中去除了静电学、静磁学后剩下的部分&#xff0c;是指电磁学与力…
阅读更多...
人机智能既不是人类智能，也不是人工智能

人机智能既不是人类智能，也不是人工智能

来源&#xff1a;人机与认知实验室从前&#xff0c;一个教授&#xff0c;去一个穷乡僻壤里头坐船过江&#xff0c;就问船上的船工&#xff1a;你学点数学没有&#xff1f;没有。你学点物理没有&#xff1f;没有。那懂不懂计算机啊&#xff1f;不懂。教授感叹这三样都不会&#…
阅读更多...
赛博朋克之后的科幻建筑是什么样的？

赛博朋克之后的科幻建筑是什么样的？

来源&#xff1a;苇草智酷粗略地浏览一下 tumblr 或 Pinterest 论坛的兴趣推送&#xff0c;你会发现我最近痴迷于科幻作品美学。更具体地说&#xff0c;我一直在想&#xff0c;在过去35年甚至更久时间里流行的设计美学——赛博朋克&#xff08;Cyberpunk&#xff09;之后&#…
阅读更多...
牛客网java_牛客网java

牛客网java_牛客网java

1&#xff1a;下列代码运行的结果是什么&#xff1f;public classP {public static int abc 123;static{System.out.println("P is init");}}public class S extendsP {static{System.out.println("S is init");}}public classTest {public static voidma…
阅读更多...
AMD 和 Intel 之战：CPU 哪家强？

AMD 和 Intel 之战：CPU 哪家强？

来源&#xff1a;嵌入式资讯精选作者 | Paul Alcorn译者 | 弯月&#xff0c;责编 | 郭芮以下为译文&#xff1a;不论是选游戏CPU还是桌面应用的CPU&#xff0c;我们只有两种选择&#xff1a;AMD或者英特尔。两家都有各自的粉丝&#xff0c;所以想买CPU的人很难获得中肯的建议&a…
阅读更多...
issubclass在python中的意思_python基础之类的isinstance与issubclass、反射

issubclass在python中的意思_python基础之类的isinstance与issubclass、反射

一 isinstance(obj,cls)和issubclass(sub,super)isinstance(obj,cls)检查是否obj是否是类 cls 的对象class Foo:passobj Foo()print(isinstance(obj,Foo))issubclass(sub, super)检查sub类是否是 super 类的派生类class Foo:passclass Bar(Foo):passprint(issubclass(Bar,Foo)…
阅读更多...
华为的汽车芯片布局

华为的汽车芯片布局

来源&#xff1a;电子发烧友综合报道&#xff0c;内容参考自雷锋网、IT之家、CnBeat&#xff0c;转载请注明以上来源由于政策扶持&#xff0c;新能源汽车发展迅速&#xff0c;华为也开始进军新能源汽车市场&#xff0c;最近动作频繁&#xff0c;例如联合意法半导体研发汽车芯片…
阅读更多...
大热下的 GNN 研究面临哪些“天花板”？未来的重点研究方向又在哪？

大热下的 GNN 研究面临哪些“天花板”？未来的重点研究方向又在哪？

作为脱胎于图论研究的热门研究领域&#xff0c;图神经网络&#xff08;GNN&#xff09;与经典的 WL 算法有诸多相似之处。众所周知&#xff0c;强大的 WL 算法对于聚合函数的单射性质有很强的要求&#xff0c;那么强大的 GNN 应该具备哪些性质呢&#xff1f;研究大热下&#xf…
阅读更多...
java将一个对象赋值给另一个对象_java一个对象赋值给另一个对象，支持平铺类和层级类间的互转...

java将一个对象赋值给另一个对象_java一个对象赋值给另一个对象，支持平铺类和层级类间的互转...

场景&#xff1a;将一个层级类对象(领域驱动model对象)转换为平铺类对象(view)src对象&#xff0c;(红框为子对象)target对象(平铺对象)代码思路&#xff0c;先递归反射遍历出所有字段&#xff0c;存到一个map里&#xff0c;再递归赋值给target对象缺陷&#xff1a;不同子对象间…
阅读更多...
新基建的内涵、意义和隐忧 ，基于互联网大脑模型的分析

新基建的内涵、意义和隐忧 ，基于互联网大脑模型的分析

2020年4月20日上午&#xff0c;国家发改委召开4月份例行新闻发布会&#xff0c;首次就“新基建”概念和内涵作出正式的解释。“新型基础设施是以新发展理念为引领&#xff0c;以技术创新为驱动&#xff0c;以信息网络为基础&#xff0c;面向高质量发展需要&#xff0c;提供数字…
阅读更多...
罗兰贝格84页白皮书：一文看懂中国ICT产业新黄金十年

罗兰贝格84页白皮书：一文看懂中国ICT产业新黄金十年

来源&#xff1a;智东西中国信息和通信技术产业&#xff08;下称“ICT产业”&#xff09;蓬勃发展的黄金三十年&#xff0c;展现出了强大的市场吸引力与发展潜能。从上个世纪九十年代至今&#xff0c;ICT产业收入规模增长了340倍&#xff0c;保持双位数增长&#xff0c;领先全球…
阅读更多...
2020年五大虚拟现实和增强现实趋势

2020年五大虚拟现实和增强现实趋势

来源&#xff1a;AR工业应用2019年是VR/AR增长的一年&#xff0c;用户戴上VR头显就可以沉浸在计算机生成的环境中&#xff0c;VR在设计、营销、教育、培训和零售领域都有大量的需求。AR则通过屏幕或头显将计算机图像叠加到用户的真实世界视图上&#xff0c;预计2020年全球在XR技…
阅读更多...
【实战练习】通过docker部署jenkins

【实战练习】通过docker部署jenkins

jenkins官网 &#xff1a;https://jenkins.io/拉取jenkins Official Jenkins Docker image[rootip-172-31-16-58 ec2-user]# docker pull jenkins/jenkinsUsing default tag: latestlatest: Pulling from jenkins/jenkins06b22ddb1913: Pull complete336c28b408ed: Pull comp…
阅读更多...
linux hive mysql_Linux下的Hive与Mysql安装

linux hive mysql_Linux下的Hive与Mysql安装

一&#xff0c;安装MySQLsudo apt-get install mysql-server mysql-client1). 建立数据库hive&#xff0c;create database hive;2). 创建用户hivecreate user ‘hive’’%’ identified by ‘hive’;3).创建hive用户,并授权grant all on hive.* to hive’%’ identified by ‘…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023