本地浏览器Websql数据库操作

前几天看到一个小姐姐问我一个添加修改的我看了一下案例弄了一个出来。。。。

参考案例：HTML5本地数据库(WebSQL)[转] - 狂流 - 博客园 https://www.cnblogs.com/kuangliu/p/4772683.html

增删查改的基本操作：H5-WebSQL的增删改查（Demo） - 壹言——越过山丘才发现无人等候 - CSDN博客 https://blog.csdn.net/vcx08/article/details/81942348

下面是我的代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="websql.aspx.cs" Inherits="websql" %><!DOCTYPE>
<html>
<head>
<!--<script src="http://172.30.204.23:8080/iis/js/jquery/jquery.js" type="text/javascript"></script>-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <!--加入JS的一个框架 -->
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/><!--表格样式-->
<style type="text/css">
/*.table,table tr th, table tr td { border:1px solid #0094ff; }*/
#tab1 th, td,tr {border:1px solid #4cff00;
}
.btn { display: inline-flex;
justify-content: center;
align-items: center;
text-decoration: none; /*for <a> link*/
margin: 2px; border:
1px solid transparent;
border-radius: 4px; padding: .5em 1em;
color: #fff; background-color: #ff0000;
}
.ubtn { display: inline-flex;
justify-content: center;
align-items: center;
text-decoration: none; /*for <a> link*/
margin: 2px; border:
1px solid transparent;
border-radius: 4px; padding: .5em 1em;
color: #fff; background-color: #49ff00;
}</style>
<script type="text/javascript">
function initDatabase() {
var db = getCurrentDb();//初始化数据库
if (!db) {
alert("您的浏览器不支持HTML5本地数据库"); return;
}
db.transaction(function (trans) {//启动一个事务，并设置回调函数
//执行创建表的Sql脚本
trans.executeSql("create table if not exists Demo(id int primary key,uName text null,title text null,types text null)", [],
function (trans, result) {
},
function (trans, message) {//消息的回调函数
alert(message);
});
});
}
//随机数
function RndNum(n) {
var rnd = "";
for (var i = 0; i < n; i++)
rnd += Math.floor(Math.random() * 10);
return rnd;
}//添加
$(function () {
//alert(111);
initDatabase();
$("#btnSave").click(function () {
var txtName = $("#txtName").val();
var txtTitle = $("#txtTitle").val();
//var txtTypes = $("#txtTypes").val();
var txtTypes = $("#sel option:selected").val();
var db = getCurrentDb();
var myDate = new Date();
var num = "";
num += myDate.getYear();
num += myDate.getMonth();
num += myDate.getDate();
num += RndNum(4);
//执行sql脚本，插入数据
if (txtTypes == "1") {
alert("请选择类型！");
} else {
db.transaction(function (trans) {
trans.executeSql("insert into Demo(id,uName,title,types) values(?,?,?,?) ", [num,txtName, txtTitle, txtTypes], function (ts, data) {
}, function (ts, message) {
alert(message);
});
});showAllTheData();
}
});
});
function getCurrentDb() {
//打开数据库，或者直接连接数据库参数：数据库名称，版本，概述，大小
//如果数据库不存在那么创建之
var db = openDatabase("myDb", "1.0", "it's to save demo data!", 2*1024 * 1024);;
return db;
}
//显示所有数据库中的数据到页面上去
function showAllTheData() {
//$("#tblData").empty();
$("#tab1").empty();
var db = getCurrentDb();
db.transaction(function (trans) {
trans.executeSql("select * from Demo ", [], function (ts, data) {
if (data) {
var txtName = data.uName;
var txtTitle = data.title;
var types = data.types;
var strHtml = "";
var dv = document.getElementById("dv");
var reslut = "<table id='tab1'>";
reslut += "<tr><th>id</th><th>姓名</th><th>标题</th><th>类型</th><th>操作</th></tr>";
for (var i = 0; i < data.rows.length; i++) {
//var row = data[i];
// msg = msg + "<tr> <td><input type=\"button\" class=\"btn btn-danger\" name=\"" + results.rows.item(i).id + "\" value=\"delete\" οnclick=\"tests(this.name)\"></td></tr> ";

reslut += "<tr><td>" + data.rows.item(i)['id'] + "</td><td>" + data.rows.item(i)['uName'] + "</td><td>" + data.rows.item(i)['title'] + "</td><td>" + data.rows.item(i)['types'] +
"</td><td><input type=\"button\" class=\"btn \" name=\"" + data.rows.item(i)['id'] + "\" value=\"delete\" οnclick=\"tests(this.name)\"><input type=\"button\" value=\"update\" class=\"ubtn\" id=\"" + data.rows.item(i)['id'] + "\" name=\"" + data.rows.item(i)['id'] + "\" οnclick=\"utests(this.name)\"/></td></tr>";
//<td>" + (i + 1) + "</td>
//appendDataToTable(data.rows.item(i));//获取某行数据的json对象
dv.innerHTML = reslut;
}
}
}, function (ts, message) { alert(message); var tst = message; });
});
}
function appendDataToTable(data) {//将数据展示到表格里面
//uName,title,words
var txtName = data.uName;
var txtTitle = data.title;
var types = data.types;
var strHtml = "";
var dv = document.getElementById("dv");
var data = "<table id='tab1'>";
data += "<tr><th>姓名</th><th>标题</th><th>类型</th></tr>";
data += "<tr><td>" + txtName + "</td><td>" + txtTitle + "</td><td>" + types + "</td></tr>";
//dv.innerHTML = data;
//$("#dv").append(data);;// strHtml += "<tr><th>姓名</th><th>标题</th><th>类型</th></tr>";
/*strHtml += "<tr>";
strHtml += "<th>";
strHtml += "<td>" + txtName + "</td>";
strHtml += "<td>" + txtTitle + "</td>";
strHtml += "<td>" + types + "</td>";
strHtml += "</th>";
strHtml += "</tr>";
$("#tblData").append(strHtml);*/
//tblData.innerHTML = strHtml;
}
//执行事务
function sqlExcute(sql, message) {
var db = getCurrentDb();
db.transaction(
function (trans) {
trans.executeSql(
sql,
[],
function () {//success
alert(message);
},
function (trans, ex) { alert(ex.message) }
);
},
function () { alert("事务执行失败，建议使用谷歌浏览器") },
function () {//success
}
);
};
//删除数据
function tests(mes) {
//alert(mes);
if (confirm("是否删除此用户？id为:" + mes) == true) {
del(mes);
}
showAllTheData();
//showUserInfo();
};
function del(id) {
// var db = getCurrentDb();
//db.transaction(function (trans){//trans.executeSql("delete * from Demo where uNmae='a'");
var sql = "delete from Demo where id = " + id + "";
sqlExcute(sql, "成功删除信息！");
// });
}
//修改数据
function utests(mes) {
//alert(mes);
//showUserInfo();
var uptable = document.getElementById("tab1");
for (var i = 0; i < uptable.rows.length; i++) {
//alert(uptable.rows[i].cells[1].getAttribute("contentEditable"));if (mes == uptable.rows[i].cells[0].innerHTML) {
//alert(uptable.rows[i].cells[1].getAttribute("contentEditable"));
//uptable.rows[i].cells[1].focus();if (uptable.rows[i].cells[1].getAttribute("contentEditable") == null) {
uptable.rows[i].cells[1].setAttribute("contentEditable", "true");
uptable.rows[i].cells[2].setAttribute("contentEditable", "true");
document.getElementById(mes).setAttribute("class", "ubtn");
document.getElementById(mes).setAttribute("value", "save");
uptable.rows[i].cells[1].focus();
}
else {
//alert("ddd");
var sql = "update Demo set uName='" + uptable.rows[i].cells[1].innerHTML + "',title='" + uptable.rows[i].cells[2].innerHTML + "' where id = " + mes + "";
sqlExcute(sql, "成功修改账号信息！");
showAllTheData();
}}
}//showUserInfo();
};
</script>
</head>
<body>
<h1 style="font-size:50px;color:#00ffa1">websql操作</h1>
<div style="width:350px; border:1px solid #4cff00"><tr>
<td>用户名：</td>
<td><input type="text" name="txtName" id="txtName" required/></td>
</tr><br />
<tr>
<td>标&nbsp;&nbsp;&nbsp;题：</td>
<td><input type="text" name="txtTitle" id="txtTitle" required/></td>
</tr><br />
<tr>
<td>分&nbsp;&nbsp;&nbsp;类：</td>
<!--<td><input type="text" name="txtTypes" id="txtTypes" required/></td>-->
<td>
<select id="sel" name="sel" style="width:150px;height:20px; margin-top:20px" >
<option value ="1">--请选择--</option>
<option value ="水果">水果</option>
<option value ="蔬菜">蔬菜</option>
<option value="豆类">豆类</option>
<option value="大米">大米</option>
</select>
</td>
</tr><br /><input type="button" value="添加" id="btnSave"/>
</div>
<hr style="width:350px; color:#b200ff;float:left"/><br />
<input type="button" value="全部数据" onclick="showAllTheData();"/>
<div id="dv">
<table id="tblData"></table>
</div>
<!--<table id="tblData" border="1" style="width=50%">
</table>-->
</body>
</html>

运行效果图：

f12 浏览器查看数据库：

哈哈写得不好，如有什么错误，请留言告知。

转载于:https://www.cnblogs.com/maoye520/p/10723608.html

本地浏览器Websql数据库操作相关推荐

数字天堂HBuilder+MUI（一）websql数据库操作
随着HTML5的越来越火,进行移动应用开发的前端框架也随着火了一把,刚好最近在使用HBuilder+MUI框架进行开发,正好抽空写一些相关的功能操作,很多东西也是慢慢摸索的过程,有写的不好的地方欢迎指 ...
mysql 浏览器操作_火车浏览器脚本编辑器操作MYSQL数据库
火车浏览器脚本编辑器操作数据库方便的数据管理,如果火车浏览器脚本调用本地文件夹TXT文本,始终觉得有点麻烦: 1.当多个脚本同时使用一个文件夹下文本时,麻烦 2.已发布和未发布,区分不方便,如果本地 ...
jupyter配置到服务器_服务器端jupyter notebook映射到本地浏览器的操作
1.远程服务器上安装jupyter notebook(配置jupyter_notebook_config.py文件) sudo pip install jupyter 2.远程服务器(8890端口,没 ...
使用RDS for MySQL数据库（本地连接、数据库迁移、JDBC操作）
一.阿里云RDS介绍什么是阿里云数据库RDS 阿里云关系型数据库(Relational Database Service,简称RDS)是一种稳定可靠.可弹性伸缩的在线数据库服务.基于阿里云分布式文件 ...
安卓本地轻量级数据库操作框架 greenDao3.2.2 详细教程附带Demo①——集成环境，开辟难题。
欢迎安卓本地轻量级数据库操作框架 greenDao3.2.2 学习之旅. 本套框架博客系列博客目录: 第一篇:认识 greenDao3.2.2 框架,集成环境,开辟难题. 第二篇:简单的进行增.删. ...
python操作本地浏览器webbrowser
python操作本地浏览器webbrowser webbrowser是python3自带的库,可以直接用import webbrowser导入. webbrowser的使用 import webbro ...
apache2.4.9 开启path_info访问_【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6）...
新建项目打开VS2015,找到菜单项[文件->新建->项目],打开向导对话框: 注意我们的选择项: 运行平台:.NET FrameWork 4.5 项目模板:ASP.NET Web Ap ...
搭建阿里云Linux版服务器+使用docker安装EMQ、Node-RED、MySQL+本地Navicat访问数据库(增删改查)——详细流程
搭建阿里云Linux版服务器+使用docker安装EMQ.Node-RED.MySQL+本地Navicat访问数据库云服务器基础搭建注册云服务器 XShell简介部署EMQ 部署docker 物 ...
toad导入数据_配置toad进行导入导出数据库操作
最近需要对oracle进行导入导出操作,于是研究使用toad进行导入导出oracle数据库操作,现稍作记录. oracle的导入导出不管是否使用toad还是pl/sql工具进行操作,实际上最终都是通过 ...

本地浏览器Websql数据库操作

本地浏览器Websql数据库操作相关推荐

最新文章

热门文章