AI 生成的网页一刷新就丢数据？从 localStorage 到 IndexedDB 的本地持久化实践

前言

现在使用 AI 编程助手开发小型网页工具已经非常方便。

例如，我们只需要输入需求：

“帮我制作一个简单的待办事项管理工具，支持添加、删除和完成任务。”

AI 很快就能生成 HTML、CSS 和 JavaScript。

页面打开后，添加待办、勾选完成、删除任务等功能都可以正常使用。

但经常会遇到一个问题：

**浏览器一刷新，之前添加的任务就全部消失了。**

这并不一定是代码运行错误，而是因为数据可能只保存在 JavaScript 的内存变量中。

那么，对于不需要后端服务器的简单网页，有没有办法把用户数据保留下来？

答案是有的。

浏览器本身提供了多种本地存储能力，例如 `localStorage`、`sessionStorage` 和 `IndexedDB`。

本文就从一个简单的待办工具出发，介绍这些存储方式的区别，以及如何利用浏览器原生 API 实现数据持久化。

---

一、为什么刷新网页后数据会消失？

先看一个简单的 JavaScript 示例：

```javascript
let tasks = [];

function addTask(title) {
  tasks.push({
    title,
    completed: false
  });
}
```

这里使用数组保存待办事项。

当用户点击添加按钮时，新任务会进入 `tasks` 数组。

只要当前网页持续运行，程序就能读取这些数据。

但是，当用户刷新页面时，浏览器会重新加载和执行 JavaScript。

原来的内存状态通常会被丢弃，`tasks` 又重新初始化为空数组。

因此，问题不在于数组不能保存数据，而在于：

**内存中的数据不等于持久化保存的数据。**

如果希望刷新页面后仍能恢复此前的任务，就需要将数据保存到浏览器提供的持久化存储中。

二、localStorage、sessionStorage 和 IndexedDB 有什么区别？

浏览器提供了几种常见的数据存储方式。

| 存储方式 | 主要特点 | 适合场景 |
|---|---|---|
| localStorage | 同源存储、同步 API、保存字符串 | 页面设置、简单待办、草稿 |
| sessionStorage | 按标签页会话隔离，关闭会话后通常清除 | 临时表单状态 |
| IndexedDB | 异步 API、支持结构化数据和索引 | 大量记录、离线数据应用 |

需要注意，浏览器本地存储并不意味着数据永远不会丢失。

用户清除网站数据、浏览器存储策略限制、隐私模式以及设备故障等情况，都可能影响数据保留。

因此，重要数据不能仅依赖浏览器本地存储作为唯一备份。

对于简单的静态网页工具，通常可以先从 `localStorage` 开始。

三、实战：用 localStorage 保存待办事项

下面实现一个最简单的示例。

不使用 Vue、React，也不需要数据库或后端服务器。

首先创建页面：

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width,initial-scale=1">
  <title>本地待办工具</title>
</head>
<body>
  <h1>我的待办事项</h1>

  <label for="taskInput">任务内容</label>
  <input id="taskInput" placeholder="输入待办事项">

  <button id="addBtn" type="button">添加</button>

  <ul id="taskList"></ul>
  <p id="message" role="status"></p>

  <script src="script.js"></script>
</body>
</html>
```

接下来编写 `script.js`：

```javascript
const STORAGE_KEY = "todo-mini-v1";

const input = document.getElementById("taskInput");
const list = document.getElementById("taskList");
const message = document.getElementById("message");

function loadTasks() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    const data = raw ? JSON.parse(raw) : [];

    return Array.isArray(data)
      ? data.filter(item => typeof item === "string")
      : [];
  } catch {
    return [];
  }
}

let tasks = loadTasks();

function saveTasks() {
  try {
    localStorage.setItem(
      STORAGE_KEY,
      JSON.stringify(tasks)
    );
    message.textContent = "已保存到本地浏览器";
  } catch {
    message.textContent =
      "本地保存失败，刷新页面后可能丢失数据";
  }
}

function renderTasks() {
  list.replaceChildren();

  tasks.forEach((task, index) => {
    const li = document.createElement("li");
    const text = document.createElement("span");

    text.textContent = task + " ";

    const button = document.createElement("button");
    button.type = "button";
    button.textContent = "删除";

    button.addEventListener("click", () => {
      tasks.splice(index, 1);
      saveTasks();
      renderTasks();
    });

    li.append(text, button);
    list.appendChild(li);
  });
}

document.getElementById("addBtn")
  .addEventListener("click", () => {
    const value = input.value.trim();

    if (!value) {
      message.textContent = "请输入任务内容";
      return;
    }

    tasks.push(value);
    saveTasks();
    renderTasks();

    input.value = "";
  });

renderTasks();
```

这段代码实现了三个基本功能：

1. 页面打开时读取上次保存的任务。
2. 添加或删除任务时更新本地存储。
3. 刷新网页后重新恢复任务列表。

其中最重要的代码是：

```javascript
localStorage.setItem(
  STORAGE_KEY,
  JSON.stringify(tasks)
);
```

它将 JavaScript 数组转换为 JSON 字符串，然后保存到浏览器。

读取时再使用：

```javascript
JSON.parse(raw);
```

将字符串恢复为 JavaScript 数据。

这样，网页刷新后就不必从空数组重新开始。

四、为什么 localStorage 不能保存所有类型的数据？

`localStorage` 的一个重要特点是：**它保存的是字符串。**

例如：

```javascript
localStorage.setItem("count", 10);
```

读取后：

```javascript
const value = localStorage.getItem("count");

console.log(typeof value);
```

得到的类型是：

```text
string
```

因此，保存对象或数组时通常需要进行 JSON 序列化。

但也要注意，JSON 并不能无损表示所有 JavaScript 类型。

例如，`undefined`、函数、循环引用对象以及某些特殊数据类型，都可能需要单独处理。

对于简单的待办事项、用户设置和文本草稿，JSON 通常已经足够。

如果数据结构比较复杂，就需要考虑更适合的存储方案。

五、什么时候应该使用 IndexedDB？

当网页功能逐渐复杂时，`localStorage` 可能不再适合。

例如，我们希望开发一个离线笔记应用，支持：

- 保存大量笔记。
- 按标题搜索。
- 为笔记添加分类。
- 管理多条结构化记录。
- 在没有网络时读取历史内容。

这种情况下，可以考虑 `IndexedDB`。

它是一种浏览器端数据库，支持异步操作、对象存储和索引。

下面展示一个简单的数据库初始化示例：

```javascript
const request = indexedDB.open("notes-db", 1);

request.onupgradeneeded = () => {
  const db = request.result;

  if (!db.objectStoreNames.contains("notes")) {
    db.createObjectStore("notes", {
      keyPath: "id",
      autoIncrement: true
    });
  }
};

request.onsuccess = () => {
  const db = request.result;
  console.log("数据库已打开：", db.name);
  db.close();
};

request.onerror = () => {
  console.error("数据库打开失败");
};
```

这段代码创建了一个名为 `notes-db` 的数据库，并准备了 `notes` 对象存储。

它只是初始化示例，还没有实现记录的新增、查询和删除。

与 `localStorage` 相比，IndexedDB 更适合复杂数据，但编程接口和事务处理也更复杂。

因此，并不是所有网页都需要一开始就使用 IndexedDB。

六、本地存储还有哪些容易忽略的问题？

### 1. 不要保存密码和访问密钥

浏览器本地存储不适合保存重要的认证秘密。

同源页面中执行的 JavaScript 通常可以访问相应的 Web Storage 数据。

如果网站出现跨站脚本攻击（XSS），存储内容可能面临泄漏风险。

因此，不能因为数据保存在本地，就认为它天然安全。

### 2. localStorage 是同步 API

`localStorage` 的读写操作是同步进行的。

如果频繁处理大量数据，就可能阻塞主线程，影响页面响应。

对于较大规模的数据，可以考虑异步的 IndexedDB。

### 3. 需要处理存储失败

浏览器可能因为存储配额、用户设置或安全限制导致保存失败。

所以正式应用中应当使用异常处理，而不能默认每次写入都会成功。

### 4. 不同网站的数据通常相互隔离

浏览器存储遵循同源规则。

同一个网页如果使用了不同的协议、域名或端口，就可能无法直接读取原来存储的数据。

例如，开发预览地址变化后，用户可能发现之前保存的内容不见了。

这不一定意味着代码删除了数据，也可能是页面的源发生了变化。

七、AI 自动开发网页时，怎样避免数据丢失？

如果使用 AI Agent 开发带有用户输入的网页，我建议在提示词中明确加入持久化要求。

例如：

> 本项目不使用后端。对于需要保留的用户数据，请使用合适的浏览器本地存储机制。页面刷新后应能够恢复数据，并处理存储失败、空数据及异常数据。不得把 Token、密码等敏感凭据保存在 localStorage。

同时，还应该把“刷新后数据是否仍然存在”加入功能测试。

例如：

先添加一条任务。

刷新网页。

确认任务仍然存在。

删除该任务。

再次刷新。

确认任务已经删除。

这些测试非常简单，但能够发现不少只验证按钮点击、却忽略数据保存的问题。

对于面向真实用户的重要应用，还应该提供导出或备份能力，避免将浏览器存储作为唯一的数据保障。

八、总结

AI 编程助手能够快速生成网页，但页面上的按钮可以正常使用，不代表数据已经实现持久化。

对于简单的静态网页工具，`localStorage` 可以用很少的代码解决刷新后数据丢失的问题。

而当应用需要管理大量结构化数据时，IndexedDB 则提供了更适合的浏览器端数据库能力。

通过本文的实践，可以总结出几个原则：

1. 内存变量不能代替持久化存储。
2. 简单数据可以优先考虑 localStorage。
3. 大量结构化数据可以考虑 IndexedDB。
4. 本地存储必须处理容量限制和异常。
5. 敏感凭据不应随意写入浏览器存储。
6. AI 生成的网页需要增加刷新恢复测试。

我认为，AI 自动开发的目标不应该只是快速生成一个能运行的页面，还应该保证它在用户真正使用时具备合理的数据处理能力。

一个网页真正好用，不只是点击按钮时有反应，还应该在用户下次打开时，记得该保留的内容。