如何保存prompt输入内容？实现多用户交互内容持久化

你的问题核心是：当前内容只存在页面内存中，刷新就消失，而且localStorage是本地存储，仅当前浏览器可见，其他用户完全获取不到。要实现多用户共享且刷新后内容留存，必须用远程数据库来统一存储内容，下面给你一个单文件解决方案，不用拆分现有文件，直接修改即可实现需求。

方案：使用Firebase实时数据库（单文件实现） #

Firebase可以通过CDN直接引入到HTML中，无需拆分文件，它的实时数据库能自动同步所有用户的内容，刚好匹配你的需求。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<title>Creatia</title>
<!-- 引入Firebase CDN -->
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-database-compat.js"></script>
<style>
button {
  margin-top: 20px;
  line-height: 60px;
  font-weight: bold;
  padding: 0 40px;
  background: blue;
  border: none;
  color: white;
  cursor: pointer;
}
.post {
  margin: 10px 0;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
</style>
</head>
<body>
<script>
// 替换成你自己的Firebase配置（去Firebase控制台创建项目后获取）
const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  databaseURL: "你的DATABASE_URL",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的SENDER_ID",
  appId: "你的APP_ID"
};

// 初始化Firebase
firebase.initializeApp(firebaseConfig);
const db = firebase.database();

var username = prompt('What should we call you?');
var button = document.createElement("button");
button.innerHTML = "Post";
document.body.appendChild(button);

// 监听数据库新帖子，自动渲染到页面
db.ref('posts').on('child_added', (snapshot) => {
  const post = snapshot.val();
  const p = document.createElement("p");
  p.className = "post";
  p.innerHTML = `@${post.username} says: ${post.content}`;
  document.body.appendChild(p);
});

// 点击按钮提交内容到数据库
button.addEventListener("click", function() {
  const input = prompt("What do you want to say to the world?");
  if (!input) return; // 空内容不提交
  // 向数据库添加新帖子
  db.ref('posts').push({
    username: username,
    content: input
  });
});
</script>
</body>
</html>

使用步骤 #

1. 去Firebase官网创建免费项目，在「实时数据库」模块创建数据库（选「测试模式」快速测试）。
2. 在项目设置页面获取你的firebaseConfig信息，替换代码里的对应占位内容。
3. 保存修改后的HTML文件，打开即可使用——现在所有用户发布的内容会实时同步到所有打开页面，刷新也不会丢失。

为什么放弃localStorage？ #

localStorage是本地浏览器存储，数据仅保存在当前用户的浏览器里，其他用户无法获取，完全没法实现多用户交互。必须依靠远程数据库统一存储内容，才能实现跨用户、跨页面的内容同步与留存。

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