本地浏览器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), ...

随机推荐

springboot ****使用经验*******
目录 1. 返回时间格式化问题 2. springboot 中获取属性 3. SpringBoot中启动是忽略某项检测 4. 启动不开启安全校验一返回时间格式化问题在Spring Boot项目中 ...
初学python之路-day05
每天一总结,今天学习的是数据类型及其使用方法与可变与不可变类型. 今天了解的数据类型有整型int,浮点型float,字符串类型str,布尔型bool,列表list. 整型int与浮点型float都属于 ...
Windows系统中python3.7安装数据可视化模块Matplotlib、numpy的各种方法汇总
安装环境:Windows10 64位Python3.7 32位确保已经安装PIP工具命令窗口输入PIP出现以下窗口说明PIP已经成功安装方法1:(1)在Matplotlib的官网下载电脑对应的版本 ...
IDEA打包jar包
1.点击idea左边的Maven 2.点开要打包的项目下的-->Lifecycle-->双击package 3.jar包会默认保存在项目下的target文件夹下
python实现目录大小计算（含子目录）
path=r"F:\\PYTHON\\day8\\ftp_server\\"#这里我直接写了固定地址,你可以自己输入 file_size = 0 def split_doc(pat ...
Maven mvn install 本地jar添加到本地maven仓库中
mvn install:install-file -DgroupId=alipay -DartifactId=taobao-sdk-java-auto -Dversion=1.0 -Dpackagin ...
使用wps插件，实现word转PDF
项目需求:不打算用office自带的组件实现word转pdf操作环境需求:安装wps2016专业版新建一个控制台应用程序添加引用:在COM下 Kingsoft Add-In Designer和U ...
std::array中的std::get<n>()
模板函数std::get<n>()是一个辅助函数,它能够获取到容器的第 n 个元素.模板参数的实参必须是一个在编译时可以确定的常量表达式,编译时会对它检查. get<n>()模 ...
项目sql统计
Spring以及tomcat中的Listener
tomcat容器的listener: ServletContextListener HttpSessionListener ServletRequestListener Spring的listener ...

本地浏览器Websql数据库操作

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

随机推荐

热门专题