HTML5-webSql存储本地联系人（带增加、修改、删除）

最新推荐文章于 2023-11-16 20:26:25 发布
最新推荐文章于 2023-11-16 20:26:25 发布
阅读量602 收藏 3
点赞数
分类专栏： 前端日常笔记 文章标签： 原生js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_35656188/article/details/79300705
版权

一、代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #createtable{
                margin-left: 200px;
                width: 100px;
                border: none;
                background-color: #00FFFF;
                color: white;
                height: 30px;
                border-radius: 10px;
                font-size: 20px;
                cursor: pointer;
                font-weight: bold;
            }
            #main{
                border: 1px solid;
                width: 500px;
                padding: 10px;
            }
            #zjaniu{
                margin-left: 200px;
                width: 100px;
                border: none;
                background-color: #00FFFF;
                color: white;
                height: 30px;
                border-radius: 10px;
                font-size: 20px;
                cursor: pointer;
                font-weight: bold;
            }
            #shanchu{
                margin-left: 10px;
            }
            #table{
                width:523px;
                margin-top: 20px;
                text-align: center;
            }
            #xiugai{
                margin-left: 200px;
                width: 100px;
                border: none;
                background-color: #00FFFF;
                color: white;
                height: 30px;
                border-radius: 10px;
                font-size: 20px;
                cursor: pointer;
                font-weight: bold;
                margin-top: 20px;
            }
            #dijihang{
                margin-left: 150px;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <input type="button" value="创建表" onclick="creattable()" id="createtable"/>
            <input type="button" value="删除表" onclick="shanchu()" id="xiugai" /><br /><br />
            姓名：<input type="text" id="name" placeholder="请输入姓名" />
            性别：<input type="text" id="sex"  placeholder="请输入性别"/><br /><br />
            号码：<input type="text" id="phonenumb" placeholder="请输入手机号码" />
            年龄：<input type="text" id="age" placeholder="请输入年龄" /><br /><br />
            <input type="button" value="增加" onclick="add()" id="zjaniu" /><br /><br />
            <input type="text" id="shanchu" placeholder="按年龄删除" /><input type="button" value="删除" onclick="delbyage()" />
            <input type="text" id="select" placeholder="按姓名查找用户信息" onkeyup="sousuo(this)" list="mylist" /><input type="button" value="查找" onclick="findbyname()" />
            <br /><br /><br />
            姓名：<input type="text" id="newname" placeholder="请输入姓名" />
            性别：<input type="text" id="newsex"  placeholder="请输入性别"/><br /><br />
            号码：<input type="text" id="newphonenumb" placeholder="请输入手机号码" />
            年龄：<input type="text" id="newage" placeholder="请输入年龄" /><br /><br />
            <input type="text" id="dijihang" placeholder="请输入要修改的rowid" />
            <input type="button" value="修改" onclick="change()" id="xiugai" />
        </div>
        <table id="table" border="1px" cellpadding="5" cellspacing="0" >
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>手机号</th>
                <th>年龄</th>
            </tr>

        </table>
        <datalist id="mylist"></datalist>
        <script type="text/javascript">
            var db;
            var arr1=new Array();
            var arr2=new Array();
            window.onload=function(){
                creatdb();
                selectxm();
            };
            function creatdb(){
                if(window.openDatabase){
                    db=openDatabase("mydb","1.0","这是手机通讯录数据库",10*1024*1024);
                }
                else{
                    alert("浏览器不支持WEB SQL DB");
                }
            }
            function executesql(sqlstring,arr,fun1,fun2){
                db.transaction(function(tx){
                    tx.executeSql(sqlstring,arr,fun1,fun2);
                });
            }
            function creattable(){
                executesql("CREATE TABLE IF NOT EXISTS people(name PRIMARY KEY,sex,phonenumb,age)",[],function(){alert("创建成功");},function(error){console.log(error);});
            }
            function add(){
                var name=document.getElementById("name").value;
                var sex=document.getElementById("sex").value;
                var phonenumb=document.getElementById("phonenumb").value;
                var age=document.getElementById("age").value;
                executesql("insert into people(name,sex,phonenumb,age) values(?,?,?,?)",[name,sex,phonenumb,age],
                function(){
                    alert("增加成功");
                },
                function(errpr){
                    console.log(error);
                    }
                )
            }
            function delbyage(){
                var ag=document.getElementById("shanchu").value;
                var sql1="delete from people where age=?";
//              var sql2="delete from people where name=?";
//              var sql3="delete from people where sex=?";
//              var sql4="delete from people where phonenumb=?";
                executesql(sql1,[ag],function(){alert("删除成功");});
//              executesql(sql2,[ag],function(){alert("删除成功");});
//              executesql(sql3,[ag],function(){alert("删除成功");});
//              executesql(sql4,[ag],function(){alert("删除成功");});
            }
            function findbyname(){
                var xm=document.getElementById("select").value;
                var table1=document.getElementById("table");
//              table1.innerHTML="";
                var sql="select * from people where name=?";
                executesql(sql,[xm],function(tx,tab){
                    for (var i = 0; i < tab.rows.length; i++) {
                        if(tab.rows.item(i).name==xm){
                            var tr=document.createElement('tr');
                            table1.appendChild(tr);
                            var td1=document.createElement("td");
                            tr.appendChild(td1);
                            td1.innerHTML=tab.rows.item(i).name;
                            var td2=document.createElement("td");
                            tr.appendChild(td2);
                            td2.innerHTML=tab.rows.item(i).sex;
                            var td3=document.createElement("td");
                            tr.appendChild(td3);
                            td3.innerHTML=tab.rows.item(i).phonenumb;
                            var td4=document.createElement("td");
                            tr.appendChild(td4);
                            td4.innerHTML=tab.rows.item(i).age;
                        }
                    }
                })
            }
            function change(){
                var newname=document.getElementById("newname").value;
                var newsex=document.getElementById("newsex").value;
                var newphonenumb=document.getElementById("newphonenumb").value;
                var newage=document.getElementById("newage").value;
                var id=document.getElementById("dijihang").value;
                var sql="UPDATE people SET name=?,sex=?,phonenumb=?,age=? WHERE rowid =?";
                executesql(sql,[newname,newsex,newphonenumb,newage,id],function(){alert("修改成功")});
            }
            function shanchu(){
                var sql="DROP table peopel";
                executesql(sql,[],function(){alert("删除成功");});
            }
            function selectxm(){
                var sql="select name,phonenumb from people";
                executesql(sql,[],function(tx,tab){
                    for (var i = 0; i < tab.rows.length; i++) {
                        arr1.push(tab.rows.item(i).name);
                        arr2.push(tab.rows.item(i).phonenumb);
                    }
//                  alert(arr1.length+" "+arr2.length);
                })
            }
            function sousuo(t){
                if(t.value!=""){
                    var list=document.getElementById("mylist");
                    list.innerHTML="";
                    for (var i = 0; i < arr1.length; i++) {
                        var ret=new RegExp("^"+t.value);
                        if(ret.test(arr1[i])){
                            var op=new Option(arr1[i]+" "+arr2[i]);
                            list.appendChild(op);
                        }
                    }
                }   
            }
        </script>

    </body>
</html>

二、效果图
这里写图片描述

小胡同志0526
关注
专栏目录
HTML5教程（学完html的，这个可以快速过一遍）
孙叫兽的博客
06-18 2190
目录 HTML5 教程 HTML5 浏览器支持 HTML5 新元素 HTML5 语义元素 HTML5 代码规范 HTML5 MathML HTML5 Web SQL数据库 HTML5 迁移 HTML5 Canvas HTML5 内联 SVG HTML5 Canvas VS svg HTML5 多媒体 HTML5 Object元素 HTML5 Audio音频 HTML5 Video视频 HTML5 新的input类型 HTML5 表单元素 HTML5 表单属性 HT.
HTML5_01_画布
pre_eminent的JAVA学习园地
03-08 819
HTML5 简介HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5简单易学。什么是 HTML5?HTML5 是下一代 HTML 标准。HTML 4.01的上一个版本诞生于 1999 年。自从那以后15年间，昔日的婴儿如如今已经成长为亭亭玉立的少女,而Web 世界已经发生了巨变。HTML5 仍处于完善之...
号码拨号，保存至通讯录
03-28
listView显示联系人信息，实现单个电话号码拨号，单个电话号码保存至联系人，并提示选择性保存所有信息至联系人。
html5 本地存储 手机号码,html5本地存储
weixin_39710251的博客
07-02 398
h5中提供了一种将键值对的数据保存在客户端的标准。跟cookie不同的是，它不会在每次请求服务器的时候上传至服务器(除非你自己实现该功能)，因为这是h5的规范得到了浏览器的很好支持，不需额外的插件之类，h5提供了更大容量的数据存储空间(h5的建议是每个网站提供5M的存储空间)，比cookie的4KB大太多。h5中提供了两种本地存储机制，一种是存储键值对数据的Web Storage，另外一种是类似数...
android h5 保存通讯录,详解HTML5通讯录获取指定多个人的信息
weixin_39600704的博客
05-27 613
本文介绍了HTML5通讯录获取指定多个人的信息，具体如下：一、获取多个人的信息：要解决通讯录导入多个人的信息之前，要解决获取多个人的信息。我通过plus.contacts.getAddressBook和address.find的套用把通讯录里面的所有联系人的id和displayName获取出来，然后通过自己写的通讯录获取页面显示出来。1、解决这个问题首先你要自己写一个js通讯录，这样可以把你所有联...
h5-29-WEB存储-通讯录实战.html
A458545418的博客
08-03 564
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form name="form1" method="post" actio...
简单的SQL数据库 电话簿程序
11-15
简单的SQL数据库 电话簿程序 可以添加 删除 修改 等功能
html5中本地存储及缓存
herion_liu的博客
06-07 8772
本地存储： ————————————————————————— ————————————————————————— Web Storage–经测试在webapp中可以使用，不受限制 ———————————————————————– Web Storage存储机制是对HTML4中的cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5中不再使用它，转而使用改良
第19章　Web存储
唯美清泠
11-16 572
第19章　Web存储 Web应用的发展，使得客户端存储的用途也越来越多，而实现客户端存储的方式则是多种多样。最简单且兼容性最佳的方案是Cookie，但是作为真正的客户端存储，Cookie存在很多缺陷。HTML5提出了更多解决方案：如果存储复杂的数据，可以使用Web Database，该方法可以像客户端程序一样使用SQL；如果需要存储简单的key/value（键值对）信息，可以使用Web Storage。本章将主要介绍Cookie、Web Storage和Web Database。 【学习重点】 ▲　了
Web渗透测试-实战 方法 思路 总结
m0_55595611的博客
02-21 9566
尽可能的搜集目标的信息 端口信息 DNS信息 员工邮箱 信息搜集的分类 1、主动式信息搜集（可获取到的信息较多，但易被目标发现） 2、通过直接发起与被测目标网络之间的互动来获取相关信息，如通过Nmap扫描目标系统。 3、被动式信息搜集（搜集到的信息较少，但不易被发现） 4、通过第三方服务来获取目标网络相关信息。如通过搜索引擎方式来搜集信息。 搜索引擎 Google hacking 常用搜索语法： intitle:KEYWORD //搜索网页标题中含有关键词的网页 intext:KEYWORD //搜索站
HTML5通讯录用本地数据库制作联系人
04-03
用HTML5本地数据库制作联系人,使用Chrome或Opera才能看到效果
html5 通讯录
06-04
html5 通讯录示例，可以参考下 html5宝典里面的
Dcloud html5 打开通讯录获取联系人
08-19
Dcloud html5 打开通讯录获取联系人
html5通讯录源码,通讯录web版
weixin_34443842的博客
06-10 1349
【实例简介】使用JSP+Servlet+JDBC 开发出的简易web版通讯录，实现了基本的添加联系人，删除联系人，查询联系人详细信息，通过姓名查询联系人等功能。【实例截图】【核心代码】ContactJWProq└── ContactJWPro├── build│ └── classes│ └── com│ ├── dao│ │ ├── A...
Html移动端保存电话到手机通讯录
最新发布
qq_41837743的博客
11-16 1087
本文主要是讲解在html移动端中，点击电话号码时，将电话号码保存到手机的通讯录中。该功能在Android系统和IOS系统中实现有所不同，Android利用a标签中的WTAI协议进行实现。而在IOS系统中，目前只了解到了能在Safari浏览器中利用生成vcf文件进行实现。
html5创建联系人表单
weixin_34014555的博客
12-13 385
html5代码： （占位文本(PlaceHolder)是指当一个文本框没有被focus的时候显示的是提示文字，当他被点击之后就显示空白。这个功能很不错，但是并不是所有的浏览器都支持。） <!doctype html><html lang="en" class="no-js ie8"><head><meta charset="utf-8">...
html5创建手机通讯录代码,uni-app获取手机通讯录（基于HTML5+）
weixin_39777543的博客
06-07 882
官方API：https://www.html5plus.org/doc/zh_cn/contacts.html话不多说，直接上代码contacts.vue获取联系人{{item.displayName}}{{subitem.value}}var Contactsexport default {data() {return {list: []}},onShow() {uni.setNavigatio...
《通讯录》思路及代码实现详解
weixin_67596609的博客
01-14 2829
打印一个菜单，提供用户选择功能；添加联系人信息；删除联系人信息；查询联系人信息；修改联系人信息；显示所有联系人信息；对所有联系人信息进行排序整理；删除所有联系人信息；操作完毕可选择退出。这些就是实现的通讯录的整体细节与模板，具体每个功能的具体实现思路及细节我们我会给大家一一实现与讲解。思路及代码均有。
添加联系人 html,javascript – 添加到联系人,如添加到日历按钮/ html / Ajax选项
weixin_30739835的博客
06-18 456
证据就在布丁中,所以在你折磨自己阅读这篇长篇文章之前：Create Contacts Test Site让它运转起来:)如果你打开了webtool的控制台,你可以看到我们找回联系人资源,而Elizabeth Bennet现在将在你的联系人中！哦,顺便说一下,当用户谷歌会在我的小网站和你的本地版本上抱怨它不安全时,只需点击高级并继续. (谷歌会这样做,直到你提交你的OAuth,以便他们的团队对最终产...
HTML5的Web SQL数据库：本地存储新篇章
为了解决这个问题，HTML5引入了WebSQL Database API和IndexedDB，这两种技术允许Web应用程序在用户的本地设备上存储大量数据，从而减少对服务器的依赖。 WebSQL Database API是一个轻量级的本地数据库，适用于Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值