HTML文本编辑保存问题：如何替换localStorage实现无登录跨设备同步

无登录多端同步实现方案 #

核心逻辑 #

• 无需登录的同步核心靠URL携带唯一文档ID实现，每个文档对应一个随机生成的唯一ID，拼在页面URL参数中，所有访问该带ID链接的设备都可以读写同一份文档内容
• 需要新增简易后端服务，实现两个基础能力：接收文档ID和内容存储、根据文档ID返回对应内容
• 前端修改原有存储逻辑，不再仅读写localStorage，改为同时和后端交互，localStorage保留作为离线缓存使用

前端代码修改 #

1. 页面加载时自动生成/获取文档ID

// 从URL取文档ID，不存在则自动生成
function getDocId() {
  const urlParams = new URLSearchParams(window.location.search);
  let docId = urlParams.get('docId');
  if (!docId) {
    // 生成16位随机ID，重复概率极低
    docId = Math.random().toString(36).substring(2, 18);
    // 把ID拼到URL中，不刷新页面
    urlParams.set('docId', docId);
    window.history.replaceState({}, '', `${window.location.pathname}?${urlParams.toString()}`);
  }
  return docId;
}
const currentDocId = getDocId();

2. 修改保存逻辑，同步上传到服务端

替换你原有保存按钮的事件逻辑：

document.getElementById("save").addEventListener('click', async function() {
  const content = document.getElementById('example-one').innerHTML;
  // 保留本地缓存，无网络时也能存本地
  localStorage.setItem(`text_${currentDocId}`, content);
  // 上传内容到服务端
  try {
    await fetch('/api/save-doc', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        docId: currentDocId,
        content: content
      })
    });
  } catch (e) {
    alert('保存失败，请检查网络连接');
  }
});

3. 页面加载时拉取服务端最新内容

window.addEventListener('load', async function() {
  // 优先读本地缓存快速展示
  const localContent = localStorage.getItem(`text_${currentDocId}`);
  if (localContent) {
    document.getElementById('example-one').innerHTML = localContent;
  }
  // 拉取服务端最新内容覆盖本地
  try {
    const res = await fetch(`/api/get-doc?docId=${currentDocId}`);
    const data = await res.json();
    if (data.content) {
      document.getElementById('example-one').innerHTML = data.content;
      localStorage.setItem(`text_${currentDocId}`, data.content);
    }
  } catch (e) {
    console.log('拉取云端内容失败，将使用本地缓存内容');
  }
});

简易后端实现（Node.js示例） #

可以用任意后端语言实现对应接口，以下是Node.js的极简实现，用SQLite做数据存储：

const express = require('express');
const sqlite3 = require('sqlite3').verbose();
const app = express();
app.use(express.json());
// 托管你的前端静态页面，放在项目public文件夹下即可
app.use(express.static('public'));

// 初始化数据库
const db = new sqlite3.Database('docs.db');
db.run(`CREATE TABLE IF NOT EXISTS docs (
  docId TEXT PRIMARY KEY,
  content TEXT,
  updateTime INTEGER
)`);

// 保存文档接口
app.post('/api/save-doc', (req, res) => {
  const { docId, content } = req.body;
  db.run(`REPLACE INTO docs (docId, content, updateTime) VALUES (?, ?, ?)`,
    [docId, content, Date.now()],
    (err) => {
      if (err) return res.status(500).json({ success: false });
      res.json({ success: true });
    }
  );
});

// 获取文档接口
app.get('/api/get-doc', (req, res) => {
  const { docId } = req.query;
  db.get(`SELECT content FROM docs WHERE docId = ?`, [docId], (err, row) => {
    if (err) return res.status(500).json({ content: null });
    res.json({ content: row?.content || null });
  });
});

app.listen(3000, () => console.log('服务已启动，访问http://localhost:3000即可使用'));

如果需要实现实时自动同步（无需手动刷新就能看到其他设备的修改），额外加WebSocket推送能力即可，每次有设备提交保存，就给所有访问同ID文档的连接推送最新内容。

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