HTML5本地存储账号密码

<!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.mzph.cn/diannao/5767.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java从入门到精通】Java方法

在前面几个章节中我们经常使用到 System.out.println()&#xff0c;那么它是什么呢&#xff1f; println() 是一个方法。System 是系统类。out 是标准输出对象。 这句话的用法是调用系统类 System 中的标准输出对象 out 中的方法 println()。 那么什么是方法呢&#xff1f; …

主成分分析在R语言中的简单应用:使用mvstats包

在数据科学领域&#xff0c;主成分分析&#xff08;PCA&#xff09;是一种广泛使用的技术&#xff0c;主要用于数据降维和探索性数据分析。PCA可以帮助我们发现数据中的模式&#xff0c;减少数据集的复杂性&#xff0c;同时保持数据中最重要的特征。本文将介绍如何在R语言中使用…

04_jvm性能调优_并行收集器介绍

并行收集器&#xff08;此处也称为吞吐量收集器&#xff09;是类似于串行收集器的分代收集器。串行和并行收集器之间的主要区别在于并行收集器具有多个线程&#xff0c;用于加速垃圾回收过程。 通过命令行选项-XX:UseParallelGC 可启用并行收集器。默认情况下&#xff0c;使用…

LeetCode 105.从前序与中序遍历构造二叉树

题目描述 给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的中序遍历&#xff0c;请构造二叉树并返回其根节点。 示例 1: 输入: preorder [3,9,20,15,7], inorder [9,3,15,20,7] 输出: [3,9,20,null,nul…

【LeetCode刷题记录】110. 平衡二叉树

110 平衡二叉树 给定一个二叉树&#xff0c;判断它是否是平衡二叉树 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;true 示例 2&#xff1a; 输入&#xff1a;root [1,2,2,3,3,null,null,4,4] 输出&#xff1a;false 示例 3&…

vue3项目引入VueQuill富文本编辑器(成功)及 quill-image-uploader 图像模块(未成功)

tip&#xff1a;重点解释都写在代码注释里了&#xff0c;方便理解&#xff0c;所以看起来比较密集 富文本基本使用 项目文件夹路径安装依赖 npm install vueup/vue-quilllatest --save 全局注册&#xff1a;main.js // main.js// 自己项目的一些配置&#xff08;只放了主要…

注册表获取autoCAD安装位置

注意事项 注意&#xff1a;①64位操作系统注册表会重定向&#xff0c;RegOpenKeyEx第4个参数得加上KEY_WOW64_64KEY&#xff1b;②RegOpenKeyEx遍历子项时注意第2和第4参数&#xff0c;参考图&#xff1a; ③RegQueryValueEx同样得注意第6参数 完整代码 std::unordered_map…

基于ssm+vue+Mysql的药源购物网站

开发语言&#xff1a;Java框架&#xff1a;ssmJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;Maven3.…

Cokejogo巴西 电子游戏源码 游戏网站源码 电子游戏合集 电子游戏软件下载 游戏源码(带安装教程)

Cokejogo巴西pg电子游戏源码/H5PC端 前端vue编译后后端PHP/修复图片资源失效 后端测试环境&#xff1a;Linux系统CentOS7.6、宝塔、PHP7.2、MySQL5.6&#xff0c;根目录public&#xff0c;伪静态thinkPHP&#xff0c;开启ssl证书 源码下载&#xff1a;https://download.csdn.n…

CUDA内存模型

核函数性能并不只与线程束的执行有关。 CUDA内存模型概述 GPU和CPU内存模型的主要区别是&#xff0c;CUDA编程模型能将内存层次结构更好地呈现给用户&#xff0c;能让我们显示的控制它的行为。 对程序员来说&#xff0c;一般有两种类型的存储器&#xff1a; 可编程的&#x…

YOLO系列改进,自研模块助力涨点

目录 一、原理 二、代码 三、添加到YOLOv5中 一、原理 论文地址:

企业职能部门定岗定编项目如何做?

某国家级高新技术开发区成立于上世纪90年代&#xff0c;位于南方某市&#xff0c;地处三省交界处&#xff0c;是直接由该省委省政府创办的全省首批高新技术开发区。该开发区面积达到300平方公里&#xff0c;辖区人口30万人。历经数十年发展&#xff0c;在省委省政府的高度重视下…

QT:核心控件-QWidget

文章目录 控件enableobjectNamegeometrysetWindowTitleopacitycursorFonttooltipstyleSheet 控件 什么是控件&#xff1f; 如上所示&#xff0c;就是控件&#xff0c;而本篇要做的就是对于这些控件挑选一些比较有用的常用的进行讲解分析 在QT的右侧&#xff0c;会有对应的空间…

unity制作app(1)--登录 注册 界面

把学到的知识投入到生产中反而是一件简单的事情&#xff01; 1.调整canvas的形状&#xff0c;这里和camera没有任何关系! overlay&#xff01; 2.既然自适应&#xff0c;空间按钮的位置比例就很重要了&#xff01; game窗口中新增720*1280的分辨率&#xff01; 3.再回到can…

【论文阅读】ViTAE:Vision transformer advanced by exploring intrinsic inductive bias

ViTAE:Vision transformer advanced by exploring intrinsic inductive bias 论文地址摘要&#xff1a;简介&#xff1a;3 方法论3.1 重温视觉变压器3.2 ViTAE3.3 缩减单元3.4 Normal cell3.5 模型细节 4 训练4.1 Implementation details4.2 Comparison with the state-of-the-…

Elasticsearch:理解近似最近邻 (ANN) 算法

作者&#xff1a;来自 Elastic Elastic Platform Team 如果你是在互联网出现之前长大的&#xff0c;你会记得找到新喜好并不总是那么容易。我们是在无意中听到收音机里的新乐队时发现他们的&#xff0c;是因为忘了换频道偶然看到一个新电视节目的&#xff0c;也是几乎完全依据游…

ClickHouse安装(成功安装)

1.下载安装包 下面通过阿里镜像&#xff08;https://mirrors.aliyun.com/clickhouse/rpm/lts/&#xff09;进行下载&#xff0c;下载哪里&#xff0c;自行指定。 # deb包下载使用如下4行 wget https://mirrors.aliyun.com/clickhouse/deb/pool/stable/clickhouse-client_22.8…

git 的迁移

现象是gitlab经常会挂掉&#xff0c;linux会显示磁盘空间不足&#xff0c;实际上&#xff0c;我们linux某个目录的空间是4T。这个空间应该是足够的。猜测是gitlab的安装目录不对导致的空间不足。 1、查找原因 用rpm 安装gitlab会有自己的目录&#xff0c;很多安装文件会在opt…

MySql 导出导入(备份还原)

1&#xff0c;导出备份 要导出MySQL数据库中的数据&#xff0c;使用mysqldump命令。假设要导出名为mydatabase的数据库到名为backup.sql的文件中&#xff1a; mysqldump -u 用户名 -p 数据库名 > backup.sql 参数说明&#xff1a; -u mysql用户名称 -p 执行后会要求输入…

【C++】学习笔记——string_4

文章目录 六、string类7. string类的模拟实现 未完待续 六、string类 7. string类的模拟实现 我们在上文简单实现了string类的构造函数。不知道大家有没有发现一个问题&#xff0c;我们在进行实现无参的构造函数时&#xff0c;初始化列表将 _str 初始化为 nullptr 了&#xf…