如何让LAN内设备共享VS Code LiveServer页面的存储数据？

你的核心问题是localStorage是单设备本地存储，完全没法跨设备同步，必须引入后端服务来统一存储数据，所有设备通过接口和后端交互才能实现共享。Express确实是最适合你当前场景的轻量方案，下面给你一步步落地的思路：

第一步：搭建Express后端（替代LiveServer） #

LiveServer只能静态托管前端文件，没有数据处理能力，所以得换成Express——它能同时托管静态文件+提供数据接口，上手成本极低。

1. 准备基础环境 #

先安装Node.js（自带npm包管理器），装完后用终端执行node -v和npm -v确认安装成功。

2. 初始化后端项目 #

• 新建一个项目文件夹（比如shared-data-app），打开终端进入该文件夹
• 执行npm init -y快速生成package.json配置文件
• 安装Express：npm install express

3. 编写基础后端代码（server.js） #

创建server.js文件，填入以下代码：

const express = require('express');
const app = express();
const port = 3000;

// 用内存临时存储共享数据（重启后端会丢失，后续可换成文件/数据库）
let sharedData = {};

// 解析JSON格式的请求体
app.use(express.json());
// 托管前端静态文件（把你的HTML、编译后的JS/CSS全部放到public文件夹）
app.use(express.static('public'));

// 获取共享数据的接口
app.get('/api/data', (req, res) => {
  res.json(sharedData);
});

// 保存/更新共享数据的接口
app.post('/api/data', (req, res) => {
  // 合并新数据到现有存储
  sharedData = { ...sharedData, ...req.body };
  res.json({ success: true, data: sharedData });
});

// 监听局域网所有IP（确保其他设备能访问）
app.listen(port, '0.0.0.0', () => {
  console.log(`后端服务运行在 http://你的局域网IP:${port}`);
});

第二步：改造前端代码 #

把原来操作localStorage的逻辑，替换成调用后端接口：

替换数据读取逻辑 #

原来的代码可能是：

const data = JSON.parse(localStorage.getItem('sharedData') || '{}');

改成用fetch请求后端接口：

async function getSharedData() {
  const res = await fetch('/api/data');
  const data = await res.json();
  // 拿到数据后渲染页面
  return data;
}
// 页面加载时自动获取数据
getSharedData();

替换数据保存逻辑 #

原来的代码可能是：

localStorage.setItem('sharedData', JSON.stringify(newData));

改成提交数据到后端：

async function saveSharedData(newData: Record<string, any>) {
  const res = await fetch('/api/data', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(newData)
  });
  const result = await res.json();
  // 保存成功后刷新页面数据
  getSharedData();
  return result;
}

第三步：运行和测试 #

1. 把你的前端文件（HTML、编译后的JS、CSS）全部放到项目的public文件夹里
2. 终端执行node server.js启动后端
3. 用本机访问http://localhost:3000，测试数据保存和读取功能
4. 用局域网内其他设备访问http://你的电脑局域网IP:3000（比如192.168.1.100:3000），就能看到所有设备共享的数据了

后续优化建议 #

• 数据持久化：内存存储重启后端会丢失数据，你可以改成用fs模块读写JSON文件，或者用SQLite（轻量无需额外服务）、MongoDB
• 接口完善：可以添加删除数据、按key单独更新数据的接口，不用每次全量替换
• 简单权限控制：如果不想随便设备都能修改数据，可以给接口加个简单的密钥验证（比如请求头带自定义密钥）

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