前端数据防止刷新丢失的方法完整指南

<input type="text" id="username" placeholder="输入用户名">
<script>
  // 保存数据到 localStorage
  document.getElementById("username").addEventListener("input", (e) => {
    localStorage.setItem("username", e.target.value);
  });
  // 页面加载时恢复数据
  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";
  // 初始化数据库
  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);
  }
  // 恢复所有操作
  async function getActions() {
    const db = await initDB();
    return db.getAll(storeName);
  }
  // 示例：保存按钮点击事件
  document.getElementById("myButton").addEventListener("click", () => {
    saveAction({ type: "click", timestamp: Date.now() });
  });
</script>

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

// sw.js 文件内容
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);
    })
  );
});

// 设置 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 = {}; // 实际项目中用数据库替代

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

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"; // 实际项目中通过登录获取
  // 保存数据
  async function saveData(data) {
    await fetch("/save-data", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ userId, data }),
    });
  }
  // 恢复数据
  async function loadData() {
    const response = await fetch(`/get-data/${userId}`);
    const data = await response.json();
    console.log("恢复的数据:", data);
  }
  // 示例：保存表单数据
  document.getElementById("myForm").addEventListener("submit", (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);
    saveData(data);
  });
  // 页面加载时恢复数据
  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 内无新输入则保存
});

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

// 监听 localStorage 变化
window.addEventListener("storage", (e) => {
  if (e.key === "username") {
    console.log("其他标签页更新了数据:", e.newValue);
  }
});