☰

application

本地存储预览

当前为 2024-09-27 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         application
  3. // @namespace    npm/vite-plugin-monkey
  4. // @version      1.0.4
  5. // @author       monkey
  6. // @description  本地存储预览
  7. // @license      MIT
  8. // @icon         https://www.qianxin.com/favicon.ico
  9. // @match        *://*/*
  10. // @grant        GM_setClipboard
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.   class Application {
  16.     constructor() {
  17.       this.list = [];
  18.     }
  19.     setHtml() {
  20.       const container = document.createElement("div");
  21.       container.style.cssText = 'position:fixed;bottom:20px;right:20px;'
  22.       const html = '<div class="youhou-box">查看数据</div>';
  23.       container.innerHTML = html;
  24.       document.body.appendChild(container);
  25.     }
  26.     setStyle() {
  27.       const style = `
  28.               .youhou-box {
  29.                 width: fit-content;
  30.                 font-size: 12px;
  31.                 color: #fff;
  32.                 background:#000;
  33.                 padding: 5px 10px;
  34.                 border-radius: 5px;
  35.                 cursor: pointer;
  36.               }
  37.               `;
  38.       const styleTag = document.createElement("style");
  39.       styleTag.innerHTML = style;
  40.       document.head.appendChild(styleTag);
  41.     }
  42.     setEvent() {
  43.       const box = document.querySelector(".youhou-box");
  44.       box.addEventListener("click", () => {
  45.         const div = document.createElement("div");
  46.         const trs = this.list
  47.           .map((v) => {
  48.             return `
  49.              <tr style="border-bottom:1px solid #f5f5f5;padding:10px;">
  50.                     <td>${v.type}</td>
  51.                     <td>${v.key}</td>
  52.                     <td style="position:relative;text-align:center;display:block;border:none;">
  53.                         <div style="position:absolute;white-space:nowrap;width:-webkit-fill-available;overflow:hidden;text-overflow:ellipsis;" title="${v.value}">
  54.                           ${v.value}
  55.                         </div>
  56.                     </td>
  57.                     <td>
  58.                         <div onclick="navigator.clipboard.writeText('${v.value}');alert('复制成功')" style="color:#fff;background:#000;cursor:pointer;border-radius:5px;padding:5px 10px;">复制</div>
  59.                     </td>
  60.                </tr>
  61.             `;
  62.           })
  63.           .join("");
  64.         div.innerHTML = `
  65.           <div style="width:1200px;height:500px;background:#fff;padding:10px;overflow:auto" onclick="event.stopPropagation()">
  66.                 <table id="table111" align="center"  cellspacing="0" cellpadding="10" style="table-layout:auto;border-collapse: collapse;text-align:center;width:100%;">
  67.                      <tr style="border-bottom:1px solid #f5f5f5;padding:10px;">
  68.                         <th width="100">类型</th>
  69.                         <th width="100">键</th>
  70.                         <th>值</th>
  71.                         <th width="100">操作</th>
  72.                    </tr>
  73.                 ${trs}
  74.                </table>
  75.             </div>
  76.           `;
  77.         div.style.cssText =
  78.           "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);";
  79.         div.onclick = () => {
  80.           document.body.removeChild(div);
  81.         };
  82.         document.body.appendChild(div);
  83.       });
  84.     }
  85.     setData() {
  86.       this.list = [];
  87.       this.list.push({
  88.         type: "cookie",
  89.         key: "cookie",
  90.         value: document.cookie,
  91.       });
  92.       Object.keys(localStorage).forEach((key) => {
  93.         this.list.push({
  94.           type: "localStorage",
  95.           key: key,
  96.           value: localStorage.getItem(key),
  97.         });
  98.       });
  99.       Object.keys(sessionStorage).forEach((key) => {
  100.         this.list.push({
  101.           type: "sessionStorage",
  102.           key: key,
  103.           value: sessionStorage.getItem(key),
  104.         });
  105.       });
  106.     }
  107.     render() {
  108.       this.setHtml();
  109.       this.setStyle();
  110.       this.setEvent();
  111.       this.setData();
  112.       console.log(this.list);
  113.     }
  114.   }
  115.   const app = new Application();
  116.   app.render();
  117. })();