HTML5本地存储账号密码

devtools/2024/11/15 0:53:49/

<!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


http://www.ppmy.cn/devtools/28861.html

相关文章

信息时代的智慧导航:高效搜索、信息筛选与信任构建的全面指南!

文章目录 一、高效搜索&#xff1a;快速定位目标信息的秘诀二、信息筛选&#xff1a;去伪存真&#xff0c;找到有价值的信息三、信任构建&#xff1a;深入了解与直接沟通《搜索之道&#xff1a;信息素养与终身学习的新引擎》亮点内容简介目录获取方式 随着科技的飞速发展&#…

CSS中不固定大小的图片怎样做到在所在的块元素里垂直居中

对于不固定大小的图片&#xff0c;在块元素中实现垂直居中可以有多种方法。以下是一些常用的方法&#xff1a; 使用Flexbox&#xff08;弹性盒子&#xff09;: Flexbox 是一个非常强大的布局工具&#xff0c;可以轻松实现元素的垂直居中。你只需要将块元素设置为 flex 容器&a…

美国国防部数据网格参考架构概述(下)

文章目录 前言四、行动者与角色五、基线服务与服务模式六、用例演示前言 DRMA从多个角度研究了CDAO数据网格的架构,以深入了解该网格将如何支持美国防部无缝访问联合数据、分析和基础设施以实现数字化转型和人工智能(AI)需求。它提供了一种战略性、原则性和技术性方法,通过…

vivado Versal 串行 I/O 硬件调试流程、使用 Vivado Serial I/O Analyzer 来调试设计

Versal 串行 I/O 硬件调试流程 Versal ™ ACAP 无需再生成 IBERT IP &#xff0c; 因为使用系统内串行 I/O 调试所需的必要逻辑现已集成到 GTY 收发器架构内。使 用 GTY 收发器的任何设计均可用于串行 I/O 硬件调试。 Versal 串行 I/O 硬件调试流程具有 2 个不同阶…

套接字概念的理解

1.概念 套接字&#xff08;Socket&#xff09;是网络编程中的一个基本概念&#xff0c;它提供了一种机制&#xff0c;使得一台计算机上的应用程序能够与另一台计算机上的应用程序进行通信。在网络通信中&#xff0c;套接字充当了通信端点的角色&#xff0c;它使得不同主机之间…

Docker-容器的前世今生

文章目录 Docker为什么产生&#xff1f;硬件虚拟化硬件虚拟化解决的问题硬件虚拟化定义硬件虚拟化技术虚拟机的优点虚拟机的缺点 操作系统虚拟化即容器容器化解决的问题容器化定义容器化技术历史 容器和虚拟机对比 Docker的发展历史Docker架构客户端服务端仓库Registry Docker重…

文献阅读:SPACEL:基于深度学习的空间转录组结构表征

文献介绍 「文献题目」 SPACEL: deep learning-based characterization of spatial transcriptome architectures 「研究团队」 瞿昆&#xff08;中国科学技术大学&#xff09; 「发表时间」 2023-11-22 「发表期刊」 Nature Communications 「影响因子」 16.6 「DOI」 10.…

浅谈OpenCV 粗略计算工件轮廓面积和外接圆直径(Emgu.CV)

前言 最近领导在做库房工具管理这块的功能&#xff0c;希望能集成OpenCV 粗略的计算出工具的长度&#xff0c;以方便用户再归还工具的时候&#xff0c;提示用户该放在那种尺寸的盒子里面&#xff0c;这便是这篇文章的由来。 我们的系统是基于.net开发的&#xff0c;所以采用的是…