<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5本地存储账号密码</title> </head> <style> * { margin: 0; padding: 0; box-sizing: border-box; /* 文本禁止选中: none; */ user-select: none; } body { background-color: #144756; } ::placeholder { color: #ff9f05; text-shadow: 1px 1px 1px #100000; } button { /* 鼠标移入变小手 */ cursor: pointer; } button, input { border: none; outline: none; height: 32px; font-size: 20px; background-color: green; padding: 0 10px; } /* 标题开始 */ .header_title { position: fixed; top: 160px; left: 80px; width: 140px; height: 66px; border-radius: 50%; img { float: left; width: 66px; height: 66px; border-radius: 50%; transition: transform 0.3s ease; &:hover { transform: scale(1.2); } } h2 { background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0)); box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6); text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135; /* letter-spacing: -8px; */ color: #ffffff; background-color: #f30303; border-radius: 50%; background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0)); box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6); border: 0px solid black; } } /* 标题结束 */ /* 查看按钮开始 */ .search_text { position: relative; top: 2px; left: 345px; /* 首页按钮 开始*/ .home_page { position: absolute; top: 0px; left: -200px; background-color: #4CAF50; color: white; border: 1px solid #4CAF50; &:hover { background-color: #ddd; color: rgb(245, 5, 5); } } a { font-size: 22px; float: left; margin: 0 15px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; color: rgb(252, 232, 130); &:hover:not(.home_page) { background-color: #ddd; font-size: 26px; color: rgb(255, 255, 255); } } /* 首页按钮 结束*/ input { border-radius: 50px; z-index: 5; box-shadow: 0px 0px 24px rgba(253, 253, 253, 0.333); } button { position: absolute; top: 0.5px; left: 203px; height: 30px; border-radius: 0 50px 50px 0; background-color: rgb(255, 0, 0); color: #ffffff; &:hover { background-color: rgb(7, 7, 7); color: #ff0101; } &:active { background-color: rgba(255, 209, 3, 0.986); color: #fcf9f9; box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6); } } span { color: #fffdfd; text-shadow: 1px 1px 1px #100000; } } /* 查看按钮结束 */ /* 显示查看开始 */ #find_result { position: relative; top: 2px; left: 345px; text-shadow: 1px 1px 1px #100000; color: #fff; span { border-radius: 50px; user-select: text; color: rgb(254, 255, 254); padding: 0 10px; background-color: rgb(255, 0, 0); font-size: 26px; } } /* 显示查看结束 */ /* 新增输入框开始 */ .userform { display: flex; flex-direction: column; position: absolute; top: 40px; left: 30px; input:nth-child(1) { border-radius: 48px 48px 0 0; box-shadow: 0px -8px 24px rgba(255, 255, 255, 0.333); } input:nth-child(2) { position: relative; top: 0px; left: -25px; border-radius: 50px; &::placeholder { position: relative; top: 0px; left: 25px; } background-color: rgba(1, 112, 1, 0.219); } input:nth-child(3) { border-radius: 0 0 48px 48px; box-shadow: 0px 8px 24px rgba(255, 255, 255, 0.333); } input { padding: 16px 52px 16px 35px; border: none; outline: none; width: 100%; font-size: 16px; color: #fffafa; background: linear-gradient(to right, rgba(0, 128, 0, 0.292), green); } button { position: absolute; top: 0px; left: 200px; width: 95px; height: 95px; padding: 2px; border-radius: 50%; font-size: 60px; background-color: green; box-shadow: 8px 0px 24px rgba(255, 255, 255, 0.333); &:hover { background-color: #0c333f; color: #ffffff; } &:active { background-color: rgba(255, 209, 3, 0.986); color: #fcf9f9; box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6); } .plus { display: block; width: 100%; height: 100%; background: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); background-size: 50% 2px, 2px 50%; background-position: center; background-repeat: no-repeat; } } button::before { content: ""; position: absolute; top: 0px; left: -220px; width: 100%; height: 100%; background-color: rgb(1, 84, 1); border-radius: 50%; z-index: -1; box-shadow: -8px 0px 24px rgba(255, 255, 255, 0.333); } } /* 新增输入框结束 */ /* 表格样式开始 */ #list { table { position: relative; top: 3px; left: 345px; text-shadow: 1px 1px 1px #100000; color: #ffffff; td { text-align: center; font-size: 20px; button { background-color: #0c333f; border-radius: 50%; color: #ffffff; cursor: no-drop; } input { background-color: #0c333f; /* 鼠标移入变小手 */ cursor: pointer; } ; } th:nth-child(3n), td:nth-child(3n) { display: none; } } td:nth-child(2n) { /*文本可以选中复制*/ user-select: text; color: green; padding: 0 10px; } button, input { border: none; outline: none; height: 32px; font-size: 20px; background-color: green; padding: 0 10px; } button { background-color: rgba(255, 0, 0, 0.064); color: #ff0101; text-shadow: 1px 1px 1px #100000; /* 粗字体 */ font-weight: bold; &:hover { background-color: rgb(255, 0, 0); color: #ffffff; } &:active { background-color: rgba(255, 209, 3, 0.986); color: #fcf9f9; box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6); } } td input { &:hover { background-color: rgb(7, 7, 7); color: #ff0101; } &:active { background-color: rgba(255, 209, 3, 0.986); color: #fcf9f9; box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6); } } /* 表格样式结束 */ } /* 复选框样式开始 */ input[type="checkbox"] { margin: 0px 10px; -webkit-appearance: none; appearance: none; width: 25px; height: 25px; position: relative; border-radius: 50%; } input[type="checkbox"]::after { content: ""; width: 100%; height: 100%; border: 2px solid #e9f504; position: absolute; left: -3px; top: -3px; border-radius: 50%; } /* 设置复选框点击之后的样式*/ input[type="checkbox"]:checked::after { height: 15px; width: 25px; border-top: none; border-right: none; border-radius: 0; transform: rotate(-45deg); transition: all 0.5s ease-in-out; } /* 设置复选框点击之后的样式结束*/ /* 复选框样式结束 */ </style> <body> <div class="header_title"> <img src="file:///D:\My homepage\img\jpg\tuzi3.jpg" alt="与妖为邻"> <h2>账号</h2> <h2>密码</h2> </div> <div> <form class="search_text" onsubmit="findOne(event)" action="#"> <a href="file:///C:\Users\90917\Desktop\备忘录.html" class="home_page">首页</a> <input type="text" id="search_site" name="search_site" placeholder="请输入账号查看密码" /> <button onclick="findOne()">查看</button> <span>提示:有个问题是账号和密码一样才能删除。虽然有点乱,但也记录了很多新知识</span> </form> <hr /> <p id="find_result"> </p> <hr /> <form class="userform" action="#"> <input type="text" id="keyname" name="keyname" class="text" placeholder="请输入账号" /> <input type="password" id="sitename" name="sitename" class="text" placeholder="请输入密码" /> <input type="text" id="siteurl" name="siteurl" placeholder="请输入说明" /> <button onclick="save()"> <i class="plus"></i></button> </form> </div> <div id="list"> </div> <script> //保存数据 userAll(); function save() { var site = new Object; site.keyname = document.getElementById("keyname").value; site.sitename = document.getElementById("sitename").value; site.siteurl = document.getElementById("siteurl").value; var tode = JSON.stringify(site); //将对象转换为JSON字符串 localStorage.setItem(site.keyname, tode); // alert("保存成功"); userAll(); // 清空输入框 document.getElementById("keyname").value = ""; document.getElementById("sitename").value = ""; document.getElementById("siteurl").value = ""; } //查询数据 function findOne(event) { event.preventDefault(); // 阻止表单提交 var search_site = document.getElementById("search_site").value; var siteurl = localStorage.getItem(search_site); var site = JSON.parse(siteurl); var find_result = document.getElementById("find_result"); find_result.innerHTML = '<span>' + search_site + '</span>' + "的密码是:" + '<span>' + site.sitename + '</span>'; } //显示数据 function userAll() { var list = document.getElementById("list"); if (localStorage.length > 0) { var result = "<table border='1'>"; result += "<tr><th>序号</th><th>账号</th><th>密码</th><th>说明</th><th> <button id='delete'>删除</button></th></tr>"; for (var i = 0; i < localStorage.length; i++) { var keyname = localStorage.key(i); var tode = localStorage.getItem(keyname); try { var site = JSON.parse(tode); result += "<tr>" + "<td>" + '<button>' + (i + 1) + '</button>' + "</td>" + "<td>" + site.keyname + "</td>" + "<td>" + site.sitename + "</td>" + "<td>" + site.siteurl + "</td>" + "<td> <input type='checkbox' name='checkbox'></td>" + "</tr>"; } catch (e) { console.error("Error parsing JSON for key: " + keyname, e); } } result += "</table>"; list.innerHTML = result; document.body.innerHTML = document.body.innerHTML.replace(/undefined/ig, "<span style='color: red; font-size: 10px;'>$&</span>"); } else { list.innerHTML = "数据为空..."; } // 重新绑定删除按钮事件 var deleteBtn = document.getElementById("delete"); deleteBtn.onclick = function () { if (confirm("是否删除所选?")) { var checkboxes = document.getElementsByName("checkbox"); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].checked) { var keyname = checkboxes[i].parentNode.previousElementSibling.previousElementSibling.textContent; localStorage.removeItem(keyname); checkboxes[i].parentNode.parentNode.parentNode.removeChild(checkboxes[i].parentNode.parentNode); // i--; i = i - 1; // 恢复到之前的索引 } } userAll(); } }; // 重新绑定删除按钮事件结束 }; </script> </body> </html
复制
HTML5本地存储账号密码
转载请注明出处或者链接地址:https://www.qianduange.cn//article/7517.html
相关文章
-
运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac
-
前端提高篇(102):jQuery高级方法callbacks、deferred
-
【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED
-
vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack
-
npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.
-
JQuery中的load()、$
-
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)
-
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
-
【简单html静态网页代码】 制作一个简单HTML宠物网页(HTML CSS)
-
【html】新建一个html并且在浏览器运行
发布的文章
运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac
2024-08-27 09:08:17
前端提高篇(102):jQuery高级方法callbacks、deferred
2024-05-09 11:05:34
解决npm install 报错 “npm err code 1“
2024-06-06 10:06:47
【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED
2024-04-22 09:04:34
vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack
2024-03-29 15:03:20
npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.
2024-04-20 17:04:38
JQuery中的load()、$
2024-05-10 08:05:15
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)
2024-10-30 21:10:12
大家推荐的文章