利用HTML+WEBSQL（sqlite）完成创建数据库，完成对数据的增删改查（使用原生JS编写）

您所在的位置：网站首页 › 网页设计怎么操作的 › 利用HTML+WEBSQL（sqlite）完成创建数据库，完成对数据的增删改查（使用原生JS编写）

利用HTML+WEBSQL（sqlite）完成创建数据库，完成对数据的增删改查（使用原生JS编写）

2024-07-12 21:14:32| 来源: 网络整理| 查看: 265

前端和数据

在日常编写一些页面的时候总希望能够把“用户生产”的数据保存下来到数据库中。今天学习了如何用WEBSQL（可以理解为浏览器自带的SQLite数据库）进行数据的保存以及在前端页面中对数据库进行操作。

需要准备

一个支持使用WEBSQL的浏览器，本例使用的是Chrome。首先一上来先把html里的元素写好，以及之后按钮对应的函数名等等

歌曲名：喜欢人数： JS部分初始化和创建数据库 var db = openDatabase("JAY", "1.0", "it's to save jay'songs data!", 1024 * 1024); function initDatabase() { //初始化数据库 var db = getCurrentDb(); if(!db) { alert("对不起，浏览器不支持"); return; } db.transaction(function (trans) { trans.executeSql("create table if not exists Movie(title text null,url text null)", [], function (trans, result) { }, function (trans, message) { alert(message); }); }, function (trans, result) { }, function (trans, message) { }); } //创建数据库 first.onclick =function(){ //打开数据库，或者直接连接数据库参数：数据库名称，版本，概述，大小 if(db!=""){ alert("ok"); } return db; }

首先介绍一下 openDatabase() 方法对应的五个参数： 1.数据库名称 2.版本号 3.描述文本 4.数据库大小 5.创建回调第五个参数，创建回调会在创建数据库后被调用。这里的代码比较简单，主要就是声明了db，创建了这个db（数据库）‘JAY’。此时通过F12查看资源在这里插入图片描述数据库已经被创建完毕，接下来就是创建表。

创建表 second.onclick=function(){ db.transaction(function (context) { context.executeSql('CREATE TABLE song (name VARCHAR,love INT)'); }, function (error) { console.log('创建表失败:[' + error.message + ']'); }, function () { console.log('创建表成功'); }); }

这里的代码就比较显而易见了，transaction的中文意思是事务，这里要进行的就是数据库db的一个事务。具体内容，执行sql语句创建song表，以及设置其对应字段名。失败则返回创建表失败，成功则返回创建表成功。在这里插入图片描述

插入数据创建代码写死的数据 //往表里插入数据 var a="说好不哭"; var b="5461686" third.onclick=function(){ db.transaction(function (context) { context.executeSql('INSERT INTO song (name,LOVE) VALUES (?,?)',[a,b]);//使用占位符的方法，再获取用户输入的信息即可 }, function (error) { console.log('插入数据失败:[' + error.message + ']'); }, function () { console.log('插入数据成功'); }); } 创建用户自己填写的数据 //往表里获取用户输入的数据 insong.onclick=function(){ var song = document.getElementById("inputsong").value; var love = document.getElementById("inputlove").value; db.transaction(function (context) { context.executeSql('INSERT INTO song (name,LOVE) VALUES (?,?)',[song,love]);//使用占位符的方法，再获取用户输入的信息即可 }, function (error) { console.log('插入数据失败:[' + error.message + ']'); }, function () { console.log('插入数据成功'); }); }

这两种方法的原理都是一样的，第二种只是通过dom操作获取到用户输入进来的value值后再通过占位符将sql语句完整后再执行。在这里插入图片描述

查看数据 //查询数据库 query.onclick=function(){ db.transaction(function (context) { context.executeSql('SELECT * FROM song', [], function (context, results) { var items = results.rows; for (i = 0; i console.log('查询数据失败:[' + error.message + ']'); }, function () { console.log('查询数据成功'); }); }

因为不使用框架，使用原生js这个代码稍显笨拙，通过for循环创建对应数量的li标签，把歌名用innerText的方式赋值给li。然后将li标签append到ul中这样即可完成查看数据库中的name的全部数据。在这里插入图片描述

总结

本次的练习主要是把前端页面和数据库练习起来，通过前端页面的元素操作数据库。

【本文地址】

公司简介

联系我们

今日新闻

点击排行

实验室常用的仪器、试剂和: 说到实验室常用到的东西，主要就分为仪器、试剂和耗

不用再找了，全球10大实验: 01、赛默飞世尔科技（热电）Thermo Fisher Scientif

三代水柜的量产巅峰T-72坦: 作者：寞寒最近，西边闹腾挺大，本来小寞以为忙完这

通风柜跟实验室通风系统有: 说到通风柜跟实验室通风，不少人都纠结二者到底是不

集消毒杀菌、烘干收纳为一: 厨房是家里细菌较多的地方，潮湿的环境、没有完全密

实验室设备之全钢实验台如: 全钢实验台是实验室家具中较为重要的家具之一，很多

图片新闻

实验室药品柜的特性有哪些: 实验室药品柜是实验室家具的重要组成部分之一，主要

小学科学实验中有哪些教学: 计算机计算器一般打孔器打气筒仪器车显微镜

实验室各种仪器原理动图讲: 1.紫外分光光谱UV分析原理：吸收紫外光能量，引起分

高中化学常见仪器及实验装: 1、可加热仪器：2、计量仪器：（1）仪器A的名称：量

微生物操作主要设备和器具: 今天盘点一下微生物操作主要设备和器具，别嫌我啰嗦

浅谈通风柜使用基本常识: 　众所周知，通风柜功能中最主要的就是排气功能。在

利用HTML+WEBSQL（sqlite）完成创建数据库，完成对数据的增删改查（使用原生JS编写）

利用HTML+WEBSQL（sqlite）完成创建数据库，完成对数据的增删改查（使用原生JS编写）

今日新闻

点击排行

推荐新闻

图片新闻

专题文章