本地存储预览
当前为
// ==UserScript==
// @name application
// @namespace npm/vite-plugin-monkey
// @version 1.0.4
// @author monkey
// @description 本地存储预览
// @license MIT
// @icon https://www.qianxin.com/favicon.ico
// @match *://*/*
// @grant GM_setClipboard
// ==/UserScript==
(function() {
'use strict';
class Application {
constructor() {
this.list = [];
}
setHtml() {
const container = document.createElement("div");
container.style.cssText = 'position:fixed;bottom:20px;right:20px;'
const html = '<div class="youhou-box">查看数据</div>';
container.innerHTML = html;
document.body.appendChild(container);
}
setStyle() {
const style = `
.youhou-box {
width: fit-content;
font-size: 12px;
color: #fff;
background:#000;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
`;
const styleTag = document.createElement("style");
styleTag.innerHTML = style;
document.head.appendChild(styleTag);
}
setEvent() {
const box = document.querySelector(".youhou-box");
box.addEventListener("click", () => {
const div = document.createElement("div");
const trs = this.list
.map((v) => {
return `
<tr style="border-bottom:1px solid #f5f5f5;padding:10px;">
<td>${v.type}</td>
<td>${v.key}</td>
<td style="position:relative;text-align:center;display:block;border:none;">
<div style="position:absolute;white-space:nowrap;width:-webkit-fill-available;overflow:hidden;text-overflow:ellipsis;" title="${v.value}">
${v.value}
</div>
</td>
<td>
<div onclick="navigator.clipboard.writeText('${v.value}');alert('复制成功')" style="color:#fff;background:#000;cursor:pointer;border-radius:5px;padding:5px 10px;">复制</div>
</td>
</tr>
`;
})
.join("");
div.innerHTML = `
<div style="width:1200px;height:500px;background:#fff;padding:10px;overflow:auto" onclick="event.stopPropagation()">
<table id="table111" align="center" cellspacing="0" cellpadding="10" style="table-layout:auto;border-collapse: collapse;text-align:center;width:100%;">
<tr style="border-bottom:1px solid #f5f5f5;padding:10px;">
<th width="100">类型</th>
<th width="100">键</th>
<th>值</th>
<th width="100">操作</th>
</tr>
${trs}
</table>
</div>
`;
div.style.cssText =
"display:flex;justify-content:center;align-items:center;position:fixed;z-index:9999;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);";
div.onclick = () => {
document.body.removeChild(div);
};
document.body.appendChild(div);
});
}
setData() {
this.list = [];
this.list.push({
type: "cookie",
key: "cookie",
value: document.cookie,
});
Object.keys(localStorage).forEach((key) => {
this.list.push({
type: "localStorage",
key: key,
value: localStorage.getItem(key),
});
});
Object.keys(sessionStorage).forEach((key) => {
this.list.push({
type: "sessionStorage",
key: key,
value: sessionStorage.getItem(key),
});
});
}
render() {
this.setHtml();
this.setStyle();
this.setEvent();
this.setData();
console.log(this.list);
}
}
const app = new Application();
app.render();
})();