<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>查看添加删除本地全部密钥和值(localStorage)</title>
<style>
/* 统一标签样式 */
* {
padding: 0;
margin: 0;
user-select: none;
box-sizing: border-box;
color: #fcfdff;
text-shadow: 1px 1px 1px #100000;
}
body {
background-color: #144756;
}
button {
background-color: rgb(255, 0, 0);
}
input {
background-color: green;
}
button,
input {
border: none;
outline: none;
height: 32px;
border-radius: 5px;
font-size: 20px;
padding: 0 10px;
cursor: pointer;
}
button:hover,
input:hover {
background-color: rgb(0, 0, 0);
color: #ff0101;
}
button:active,
input: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);
}
a,
#delete,
button,
input {
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;
}
::placeholder {
color: #ffe605;
}
/* 头部 */
.header {
height: 7vh;
}
.header_div {
display: flex;
align-items: center;
position: fixed;
top: 0;
}
/* 以妖为邻标志 */
.logo {
width: 262px;
height: 50px;
transform: scale(0.8);
margin-top: 10px;
margin-left: -15px;
border-radius: 50%;
background: #f30303;
box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);
z-index: 99;
}
.logo figcaption {
background: hsl(0, 0%, 0%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);
letter-spacing: -3px;
line-height: 45px;
border-radius: 50%;
font-size: 40px;
width: 152px;
}
.my_name1 {
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.726);
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
transform: translate(35%, 0%);
}
.my_name2 {
text-shadow: 1px 1px 1px hsla(160, 100%, 37%, 0.555);
clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
transform: translate(35%, -93%);
}
.logo img {
width: 60px;
height: 35px;
border-radius: 50%;
transition: transform 0.3s ease;
position: absolute;
}
.logo img:hover {
transform: scale(1.3);
filter: drop-shadow(0 0 0.3em #ff0202);
}
.kong {
margin-top: 7px;
margin-left: 200px;
}
.ying {
top: 7px;
margin-left: 2px;
}
/* 添加 */
.search_text input {
transform: translate(10%, 20%);
border-radius: 50px;
height: 45px;
}
.search_text button {
transform: translate(-65%, 22%);
height: 43px;
border-radius: 0 50px 50px 0;
}
form {
display: flex;
flex-direction: column;
}
form input:nth-child(1) {
border-radius: 48px 48px 0 0;
}
form input:nth-child(2) {
border-radius: 0 0 48px 48px;
}
form input {
padding: 16px 52px 16px 35px;
border: none;
outline: none;
width: 100%;
font-size: 16px;
color: #fffafa;
}
.add {
transform: translate(285%, -105%);
width: 60px;
padding: 2px;
height: 60px;
border-radius: 50%;
font-size: 60px;
}
.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;
}
/* 删除 */
.delete_div {
display: flex;
align-items: center;
transform: translate(360%, -47%);
}
#delete {
width: 60px;
padding: 2px;
height: 60px;
border-radius: 50%;
font-size: 60px;
}
.minus {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent 48%, #fff 48%, #fff 52%, transparent 52%), linear-gradient(-45deg, transparent 48%, #fff 48%, #fff 52%, transparent 52%);
background-size: 55% 25px, 25px 54%;
background-position: center;
background-repeat: no-repeat;
}
/* 点击查看后显示的结果 */
#find_result {
position: fixed;
left: 50%;
transform: translateX(-50%);
background-color: #2295b8;
padding: 10px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
z-index: 999;
}
#find_result button {
border-radius: 50px;
user-select: text;
color: rgb(254, 255, 254);
}
#find_result span {
color: #f56c6c;
}
/* 表格 */
table {
table-layout: fixed;
width: 100%;
}
td,
th {
text-align: center;
font-size: 20px;
}
th:nth-child(1),
td:nth-child(1) {
width: 4%;
}
th:nth-child(2),
td:nth-child(2) {
width: 10%;
user-select: text;
color: green;
}
th:nth-child(3),
td:nth-child(3) {
width: 80%;
height: 32px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
th:nth-child(4),
td:nth-child(4) {
width: 4%;
}
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;
}
.logo_div {
display: flex;
}
</style>
</head>
<body>
<!-- 头部 -->
<header class="header">
<div class="header_div">
<div class="logo_div">
<!-- logo -->
<figure class="logo">
<a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="与妖为邻CSDN博客"
target="_blank">
<img class="kong" src="file:///D:/img/icon.ico" alt="与妖为邻">
</a>
<figcaption class="my_name1">与妖为邻</figcaption>
<figcaption class="my_name2">与妖为邻</figcaption>
<a href="file:///D:/web/html%E9%A6%96%E9%A1%B5/%E5%A4%87%E5%BF%98%E5%BD%95.html" class="home_page"
title="首页" target="_blank">
<img class="ying" src="file:///D:/img/ying.png" alt="与妖为邻">
</a>
</figure>
<!-- 添加 -->
<div>
<form action="#">
<input type="text" id="keyName" style="width:230px;" placeholder="请输入密钥" />
<input type="text" id="keyValue" style="width:230px;" placeholder="请输入密钥值" />
<button class="add" onclick="save()"> <i class="plus"></i></button>
</form>
</div>
<!-- 查看 -->
<div class="search_text">
<input type="text" id="searchKey" name="search_site" placeholder="输入密钥查看密钥值" />
<button onclick="findOne()">查看</button>
</div>
</div>
<!-- 删除 -->
<div class="delete_div">
<p> 点击按钮删除选择</p><button id="delete"><i class="minus"></i></button>
</div>
</div>
</header>
<!-- 显示点击查看显示的结果 -->
<p id="find_result"></p>
<!-- 点击添加按钮渲染的表格 -->
<div class="list" id="list"></div>
</body>
<script>
// 页面加载时调用loadAll函数
window.onload = loadAll;
// 保存数据
function save() {
var keyName = document.getElementById("keyName").value;
var keyValue = document.getElementById("keyValue").value;
localStorage.setItem(keyName, keyValue);
loadAll();
document.getElementById("keyName").value = "";
document.getElementById("keyValue").value = "";
}
// 查询数据
function findOne() {
var searchKey = document.getElementById("searchKey").value;
var keyValue = localStorage.getItem(searchKey);
var findResult = document.getElementById("find_result");
findResult.innerHTML = "<br><button>" + searchKey + "</button>的值是:<span>" + keyValue + "</span>";
}
// 渲染表格数据
function loadAll() {
var list = document.getElementById("list");
var specialKeys = ['officialHome', 'officialEnglish', 'officialMusic', 'officialProject']; // 需要特殊处理的key数组
var result = "<table border='1'><tr><th>序号</th><th>密钥(key)</th><th>值(value)</th><th>选择</th></tr>";
// 先处理特殊的key
for (var i = 0; i < specialKeys.length; i++) {
var keyName = specialKeys[i];
var keyValue = localStorage.getItem(keyName);
if (keyValue !== null) {
result += "<tr><td><button class='seq-btn'>" + (i + 1) + "</button></td><td style='color: red; font-size: 15px;'>" + keyName + "</td><td>" + keyValue + "</td><td><input type='checkbox' name='checkbox'></td></tr>";
}
}
// 处理其它的key
var count = specialKeys.length;
for (var i = 0; i < localStorage.length; i++) {
var keyName = localStorage.key(i);
if (!specialKeys.includes(keyName)) {
var keyValue = localStorage.getItem(keyName);
result += "<tr><td><button class='seq-btn'>" + (count + 1) + "</button></td><td>" + keyName + "</td><td>" + keyValue + "</td><td><input type='checkbox' name='checkbox'></td></tr>";
count++;
}
}
result += "</table>";
if (localStorage.length > 0) {
list.innerHTML = result;
} else {
list.innerHTML = "数据为空……";
}
var seqBtn = document.querySelectorAll('.seq-btn');
Array.prototype.forEach.call(seqBtn, function (btn) {
btn.addEventListener('click', function () {
var tr = findClosestTr(btn);
var checkbox = tr.querySelector('input[type="checkbox"]');
checkbox.checked = !checkbox.checked;
if (checkbox.checked) {
btn.style.backgroundColor = 'black'; // 选中时背景颜色变为黑色
} else {
btn.style.backgroundColor = ''; // 未选中时恢复默认背景颜色
}
});
});
function findClosestTr(element) {
while (element && element.tagName.toLowerCase() !== 'tr') {
element = element.parentNode;
}
return element;
}
// 删除事件
var deleteBtn = document.getElementById("delete");
deleteBtn.onclick = function () {
if (confirm("是否删除所选？")) {
var checkboxes = document.getElementsByName("checkbox");
for (var i = checkboxes.length - 1; i >= 0; i--) {
if (checkboxes[i].checked) {
var keyName = checkboxes[i].parentNode.previousElementSibling.previousElementSibling.textContent;
localStorage.removeItem(keyName);
checkboxes[i].closest("tr").remove();
}
}
loadAll();
}
};
}
</script>
</html>
扫一扫
8598
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
