本地浏览器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\" onclick=\"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\" onclick=\"tests(this.name)\"><input type=\"button\" value=\"update\" class=\"ubtn\" id=\"" + data.rows.item(i)['id'] + "\" name=\"" + data.rows.item(i)['id'] + "\" onclick=\"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 浏览器查看数据库：

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

本地浏览器Websql数据库操作的更多相关文章

H5操作WebSQL数据库
HTML代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...
【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
html5 浏览器端数据库
为什么使用浏览器端数据库:随着浏览器的处理能力不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少用户等待从服务器获取数据的时间. 一.localStorage — 本地存储可 ...
web本地存储-WebSQL
Web SQL数据库API实际上未包含在HTML 5规范之中,它是一个独立的规范,它引入了一套使用SQL操作客户端数据库的API.W3C 官方在 2011 年 11 月声明已经不再维护 Web SQL ...
ajax调用WebService实现数据库操作
首先说下测试环境和思路: 前端收集数据转换成json格式传输到后端,处理并存入数据库 1.数据库操作: [WebMethod] public string InsertPoint(string dat ...
ASP.NET实现二维码 ASP.Net上传文件 SQL基础语法 C# 动态创建数据库三（MySQL） Net Core 实现谷歌翻译ApI 免费版 C#发布和调试WebService ajax调用WebService实现数据库操作 C# 实体类转json数据过滤掉字段为null的字段
ASP.NET实现二维码 using System;using System.Collections.Generic;using System.Drawing;using System.Linq;us ...
HTML 5浏览器端数据库
HTML 5浏览器端数据库为什么要使用浏览器端数据库:随着浏览器处理能力的增强,越来越多的双喜鸟网站开始考虑在客户端存储大量的数据,这可以减少用户从服务器获取数据的等待时间. 1.本地存储-本地存储可 ...
js IndexedDB：浏览器端数据库的demo实例
IndexedDB具有以下特点. (1)键值对储存. IndexedDB内部采用对象仓库(object store)存放数据.所有类型的数据都可以直接存入,包括JavaScript对象.在对象仓库中, ...
Python Paramiko模块与MySQL数据库操作
Paramiko模块批量管理:通过调用ssh协议进行远程机器的批量命令执行. 要使用paramiko模块那就必须先安装这个第三方模块,仅需要在本地上安装相应的软件(python以及PyCrypto), ...

随机推荐

vcenter新建虚拟机centos7作为虚拟机模板
网卡选项适配器类型算则E1000 Remote console选项电源选项加密打开电源,连接iso安装系统按一下tab键,修改网卡为eth0 点击Tab,打开kernel启动选项后,增加ne ...
CentOS7中MariaDB重置密码
虚拟机里的MariaDB忘记密码了,连接不上,只能重置MariaDB的密码,步骤参考网络 [root@localhost ~]# mysql -uroot -p Enter password: ERR ...
jenkins添加类ubuntu/centos节点报错
前言:在jenkins添加ubuntu节点,发现启动代理报错以下是报错: [SSH] Checking java version of /usr/java/latest/bin/java Could ...
Codeforces 1098B. Nice table 构造
原文链接https://www.cnblogs.com/zhouzhendong/p/CF1098B.html 题解首先,我们来证明一个结论: 合法的矩阵要么满足每列只有两种字符,要么满足每行只有两 ...
MariaDB配置、集群
MariaDB在centos 7.3的安装,配置和集群搭配阿里云最新选配系统中,只有centos7.3可选,因此,基于centos 7的MariaDB的安装,配置... 全部删除MySQL/Mari ...
工作笔记——使用Jest时遇到的一些问题
最近公司想要从mocha+karma的前端单元测试方式转换到Jest,然后任务就分配给我了,好吧,在这之前连单元测试是什么都不知道.硬生生的开始写单元测试了,写这篇文章的初衷是因为在配置Jest的过程 ...
教你正确打开async/await关键字的使用
这段时间在项目开发中看到了一些async/await的使用,在aspnet core的host组件源码中也看到了许多的async/await代码.在开发时,正确的使用了async/await是可以提高 ...
洛谷.5284.[十二省联考2019]字符串问题(后缀自动机拓扑 DP)
LOJ BZOJ 洛谷对这题无话可说,确实比较...裸... 像dls说的拿拓扑和parent树一套就能出出来了... 另外表示BZOJ Rank1 tql... 暴力的话,由每个\(A_i\)向它 ...
S0.2 灰度图
目录灰度图定义灰度图优点 RGB转灰度算法(OpenCV3) 量化算法公式 OpenCV自带函数实现综合比较灰度图定义对于单色(灰度)图像而言,每个像素的亮度用一个数值来表示,通常数值范围 ...
php+ajax文件上传
php+ajax文件上传 html: <input id="user_real_name" class="input_show" type="t ...

本地浏览器Websql数据库操作

本地浏览器Websql数据库操作的更多相关文章

随机推荐

热门专题