<input type="text" id="username" placeholder="輸入用戶名">
<script>
  // 保存數(shù)據(jù)到 localStorage
  document.getElementById("username").addEventListener("input", (e) => {
    localStorage.setItem("username", e.target.value);
  });
  // 頁面加載時(shí)恢復(fù)數(shù)據(jù)
  window.addEventListener("DOMContentLoaded", () => {
    const savedUsername = localStorage.getItem("username");
    if (savedUsername) {
      document.getElementById("username").value = savedUsername;
    }
  });
</script>

<script src="https://cdn.jsdelivr.net/npm/idb@7/build/idb.min.js"></script>
<script>
  const dbName = "UserActionsDB";
  const storeName = "actions";
  // 初始化數(shù)據(jù)庫
  async function initDB() {
    const db = await idb.openDB(dbName, 1, {
      upgrade(db) {
        db.createObjectStore(storeName, { keyPath: "id", autoIncrement: true });
      },
    });
    return db;
  }
  // 保存用戶操作
  async function saveAction(action) {
    const db = await initDB();
    await db.add(storeName, action);
  }
  // 恢復(fù)所有操作
  async function getActions() {
    const db = await initDB();
    return db.getAll(storeName);
  }
  // 示例：保存按鈕點(diǎn)擊事件
  document.getElementById("myButton").addEventListener("click", () => {
    saveAction({ type: "click", timestamp: Date.now() });
  });
</script>

// 注冊(cè) Service Worker
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js").then((registration) => {
    console.log("Service Worker 注冊(cè)成功");
  });
}

// sw.js 文件內(nèi)容
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open("user-data-v1").then((cache) => {
      return cache.addAll(["/"]); // 緩存根頁面
    })
  );
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

// 設(shè)置 Cookie
document.cookie = "username=John; max-age=86400"; // 保存 1 天

// 讀取 Cookie
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(";").shift();
}

const username = getCookie("username");
console.log(username); // "John"

// 后端代碼
const express = require("express");
const app = express();
app.use(express.json());

let userData = {}; // 實(shí)際項(xiàng)目中用數(shù)據(jù)庫替代

app.post("/save-data", (req, res) => {
  const { userId, data } = req.body;
  userData[userId] = data;
  res.send("數(shù)據(jù)已保存");
});

app.get("/get-data/:userId", (req, res) => {
  res.json(userData[req.params.userId] || {});
});

app.listen(3000, () => console.log("Server running on port 3000"));

<!-- 前端代碼 -->
<script>
  const userId = "user123"; // 實(shí)際項(xiàng)目中通過登錄獲取
  // 保存數(shù)據(jù)
  async function saveData(data) {
    await fetch("/save-data", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ userId, data }),
    });
  }
  // 恢復(fù)數(shù)據(jù)
  async function loadData() {
    const response = await fetch(`/get-data/${userId}`);
    const data = await response.json();
    console.log("恢復(fù)的數(shù)據(jù):", data);
  }
  // 示例：保存表單數(shù)據(jù)
  document.getElementById("myForm").addEventListener("submit", (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);
    saveData(data);
  });
  // 頁面加載時(shí)恢復(fù)數(shù)據(jù)
  window.addEventListener("DOMContentLoaded", loadData);
</script>

let debounceTimer;
document.getElementById("input").addEventListener("input", (e) => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    localStorage.setItem("inputValue", e.target.value);
  }, 500); // 500ms 內(nèi)無新輸入則保存
});

// 使用 CryptoJS 加密
const encrypted = CryptoJS.AES.encrypt(
  JSON.stringify({ username: "John" }),
  "secret-key"
).toString();
localStorage.setItem("data", encrypted);

// 監(jiān)聽 localStorage 變化
window.addEventListener("storage", (e) => {
  if (e.key === "username") {
    console.log("其他標(biāo)簽頁更新了數(shù)據(jù):", e.newValue);
  }
});