css-l.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>LocalStorage Viewer</title>
  <style>
    body { font-family: system-ui; margin: 24px; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
    td { word-break: break-all; }
    button { margin: 4px; padding: 6px 10px; }
    input { padding: 8px; width: 300px; }
  </style>
</head>
<body>
  <h1>LocalStorage Viewer</h1>

  <input id="filter" placeholder="Filter keys or values...">
  <button onclick="loadStorage()">Refresh</button>
  <button onclick="exportStorage()">Export JSON</button>

  <p id="count"></p>

  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Key</th>
        <th>Value</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody id="storage"></tbody>
  </table>

<script>
function loadStorage() {
  const tbody = document.getElementById("storage");
  const filter = document.getElementById("filter").value.toLowerCase();

  tbody.innerHTML = "";
  let shown = 0;

  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    const value = localStorage.getItem(key);

    if (
      !key.toLowerCase().includes(filter) &&
      !value.toLowerCase().includes(filter)
    ) continue;

    shown++;

    const row = document.createElement("tr");

    row.innerHTML = `
      <td>${shown}</td>
      <td></td>
      <td></td>
      <td>
        <button>Copy</button>
        <button>Delete</button>
      </td>
    `;

    row.children[1].textContent = key;
    row.children[2].textContent = value;

    row.children[3].children[0].onclick = () =>
      navigator.clipboard.writeText(value);

    row.children[3].children[1].onclick = () => {
      localStorage.removeItem(key);
      loadStorage();
    };

    tbody.appendChild(row);
  }

  document.getElementById("count").textContent =
    `${shown} item(s) shown — ${localStorage.length} total`;
}

function exportStorage() {
  const data = {};

  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    data[key] = localStorage.getItem(key);
  }

  const blob = new Blob(
    [JSON.stringify(data, null, 2)],
    { type: "application/json" }
  );

  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");

  a.href = url;
  a.download = "localStorage.json";
  a.click();

  URL.revokeObjectURL(url);
}

document
  .getElementById("filter")
  .addEventListener("input", loadStorage);

loadStorage();
</script>
</body>
</html>