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

随机推荐

Dos.Common
引言: Dos.Common是一个开发中的常用类库,如HttpHelper.LogHelper.CacheHelper.CookieHelper.MapperHelper等等.与Dos.WeChat. ...
题解 P5065 【[Ynoi2014]不归之人与望眼欲穿的人们】
出现了一篇跑得炒鸡慢的题解! noteskey 无 fuck 说,好像就是整个数列分块然后合并区间...什么的吧对于每块内部就是算一下前缀信息.后缀信息(就是以第一个点/最后一个点为一个边界,不 ...
027_git添加多账号设置
一. 注意事项: (1)公钥文件权限设置问题现象: Permissions 0644 for '/Users/arunyang/.ssh/id_rsa_ele_me.pub' are too ope ...
《剑指offer》数组中出现一半次数的数字
本题来自<剑指offer> 反转链表题目: 思路: C++ Code: Python Code: 总结:
android studio——替换全局的某个字符串
android studio——替换全局的某个字符串 edit - > replace in path https://blog.csdn.net/dragon0103/article/deta ...
php获取两个时间戳之间相隔多少天多少小时多少分多少秒
/** * 返回两个时间的相距时间,*年*月*日*时*分*秒 * @param int $one_time 时间一 * @param int $two_time 时间二 * @param int $r ...
你好！酷痞Coolpy 之 Linux篇
欢迎你进入酷痞的物联网世界.这里有着自由的空气和自然的气息.接下来我将告诉你如果一步步建立一个自己专属的物联网平台. 由于目前的酷痞的官方域名还没有通过备案所以现在用临时域名解说本说明. 最终酷痞的官 ...
关于getchar-scanf函数的相关坑！
首先,我们编写如下所示的代码: #include <stdio.h> void test(int n) { ; ; ; a = b; b = c; c = n; printf(" ...
Win10 清理自带APP
如果想一次性把它们全都删掉,请输入: Get-AppxPackage -AllUsers | Remove-AppxPackage 但是如果你先建一个账户,以上应用就会再次全部出现,不想这样的话可以输 ...
CentOS 7 下安装 teamviewer 13
CentOS 版本:centos-release-7-4.1708.el7.centos.x86_64(通过 rpm -q centos-release 查询) teamviewer 版本:teamv ...

本地浏览器Websql数据库操作

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

随机推荐

热门专题