表单能否永久修改网站内容？设备状态追踪网站存改功能开发求助

云上老周

2026-5-15

嘿，你的设备状态追踪网站想法很实用！目前的问题核心是修改的数据没法持久化——现在所有修改只存在于当前浏览器的内存里，刷新页面或者换设备访问就没了。咱们可以从简单易上手的方案开始，一步步实现需求，适合编程新手的那种～

一、先搞定「本地持久化」：用浏览器的LocalStorage

这是最简单的方案，不用写后端代码，就能把数据存在用户自己的浏览器里。虽然暂时没法跨同事共享，但先把单用户的修改保存功能跑通，再考虑后续的多用户共享。

1. 先定义设备的数据结构

每个设备需要存这些信息，用JSON对象来统一管理：

// 示例：单台设备的初始数据模板
const equipmentTemplate = {
  name: "",
  status: "Operational", // 可选值：Operational/NonOperational
  color: "#4CAF50", // 绿色代表正常状态
  note: "",
  trackLink: ""
};

2. 页面加载时读取存储的数据

写一个函数，页面打开时从LocalStorage里读数据，没有的话就用默认值初始化：

function loadEquipmentData() {
  // 从LocalStorage读取数据，没有则用默认初始数据
  const savedData = localStorage.getItem("equipmentData");
  if (savedData) {
    return JSON.parse(savedData);
  } else {
    return {
      "Equipment A": {
        name: "Equipment A",
        status: "Operational",
        color: "#4CAF50",
        note: "",
        trackLink: "https://你的内部追踪链接"
      },
      "Equipment B": {
        name: "Equipment B",
        status: "Operational",
        color: "#4CAF50",
        note: "",
        trackLink: "https://你的内部追踪链接"
      }
    };
  }
}

// 页面加载完成后，初始化按钮样式
document.addEventListener("DOMContentLoaded", () => {
  const equipmentData = loadEquipmentData();
  // 给设备按钮设置对应颜色
  document.querySelector('button:contains("Equipment A")').style.backgroundColor = equipmentData["Equipment A"].color;
  document.querySelector('button:contains("Equipment B")').style.backgroundColor = equipmentData["Equipment B"].color;
});

3. 完善表单，添加颜色选择、备注输入框

把你原来动态创建表单的逻辑升级，加上需要的输入项，并且绑定保存逻辑：

function myfunction1() {
  ClearButtons();
  const equipmentData = loadEquipmentData();
  const equip = equipmentData["Equipment A"];

  // 更新标题和备注显示
  document.getElementById("header").innerHTML = equip.name;
  document.getElementById("description").innerHTML = equip.note || "No notes yet";

  // 创建表单
  const form = document.createElement("form");
  form.className = "removeable";
  // 阻止表单默认提交行为，我们自己处理保存
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    
    // 获取表单输入的新值
    const newStatus = form.querySelector('input[name="status"]:checked').value;
    const newColor = form.querySelector('input[name="color"]').value;
    const newNote = form.querySelector('textarea[name="note"]').value;
    const newLink = form.querySelector('input[name="link"]').value;

    // 更新设备数据
    equip.status = newStatus;
    equip.color = newColor;
    equip.note = newNote;
    equip.trackLink = newLink;

    // 保存到LocalStorage
    saveEquipmentData(equipmentData);

    // 更新按钮颜色
    document.querySelector('button:contains("Equipment A")').style.backgroundColor = newColor;

    // 关闭表单
    ClearButtons();
  });

  // 状态单选框组
  const statusGroup = document.createElement("div");
  statusGroup.innerHTML = `
    <label>Operational: <input type="radio" name="status" value="Operational" ${equip.status === "Operational" ? "checked" : ""}></label>
    <label>Non-Operational: <input type="radio" name="status" value="NonOperational" ${equip.status === "NonOperational" ? "checked" : ""}></label>
  `;
  form.appendChild(statusGroup);

  // 颜色选择器
  const colorPicker = document.createElement("input");
  colorPicker.type = "color";
  colorPicker.name = "color";
  colorPicker.value = equip.color;
  form.appendChild(colorPicker);

  // 备注文本框
  const noteInput = document.createElement("textarea");
  noteInput.name = "note";
  noteInput.placeholder = "Add equipment notes here...";
  noteInput.value = equip.note;
  form.appendChild(noteInput);

  // 内部追踪链接输入框
  const linkInput = document.createElement("input");
  linkInput.type = "url";
  linkInput.name = "link";
  linkInput.placeholder = "Paste internal tracking link";
  linkInput.value = equip.trackLink;
  form.appendChild(linkInput);

  // 保存按钮
  const saveBtn = document.createElement("button");
  saveBtn.type = "submit";
  saveBtn.textContent = "Save Changes";
  form.appendChild(saveBtn);

  // 跳转追踪页面按钮
  const gotoLinkBtn = document.createElement("button");
  gotoLinkBtn.type = "button";
  gotoLinkBtn.textContent = "Go to Tracking Page";
  gotoLinkBtn.addEventListener("click", () => {
    window.open(equip.trackLink, "_blank");
  });
  form.appendChild(gotoLinkBtn);

  document.body.appendChild(form);
}

// 保存数据到LocalStorage的工具函数
function saveEquipmentData(data) {
  localStorage.setItem("equipmentData", JSON.stringify(data));
}

// 替换原来的ClearButtons，用原生JS（不需要依赖jQuery）
function ClearButtons() {
  const forms = document.querySelectorAll(".removeable");
  forms.forEach(form => form.remove());
}

4. 给Equipment B复用逻辑

把myfunction1的代码复制一份，改成myfunction2，把所有对应"Equipment A"的地方换成"Equipment B"即可。

二、如果需要「多同事共享数据」：得加后端

如果要让所有同事看到相同的设备状态，就需要把数据存在服务器上，而不是本地浏览器。对于新手来说，可以试试这些友好的方案：

低代码方案：用Google Sheets作为数据源，通过Sheet API读写数据，不用自己搭建后端；
简单Node.js后端：用Express框架搭一个轻量服务器，用JSON文件或者SQLite数据库存数据，前端用fetch API和后端交互；
BaaS服务：比如Firebase Realtime Database，直接用官方SDK就能实现实时数据同步，不用自己写后端逻辑。

小提示

你原来的代码里用了$("form").remove(".removeable")，这是jQuery语法，如果没引入jQuery会报错，换成上面的原生JS版本更稳妥；
调试时可以打开浏览器开发者工具（F12），在Application标签里查看LocalStorage的内容，方便验证数据是否保存成功。

慢慢来，先把本地持久化的功能跑通，再一步步扩展多用户共享的功能～

内容的提问来源于stack exchange，提问作者Eight