如何实现LAN内多设备共享VS Code LiveServer部署页面的存储数据？

阿华AIGC实验室

2026-4-27

局域网共享HTML页面数据的实现方案

好的，咱们来一步步解决这个局域网内设备共享数据的问题——你之前用localStorage只能单设备存储，核心问题是数据存在用户本地浏览器里，要共享就得把数据移到服务器端，让所有设备通过请求服务器来读写同一份数据。你提到的Express完全是正确的方向，下面是具体的实现思路、步骤和学习路径：

核心逻辑梳理

localStorage是浏览器本地的存储方案，每个设备的浏览器都有独立的存储空间；要实现局域网共享，必须把数据托管在一个中心服务器上，所有访问页面的设备都通过HTTP请求和服务器交互数据，这样大家拿到的就是同一份数据了。Express作为Node.js生态里轻量易用的Web框架，非常适合快速搭建这个服务器。

具体实现步骤

1. 搭建基础Express服务器

首先得准备好Node.js环境（自带npm包管理器），然后按以下步骤操作：

创建一个新的项目文件夹，打开终端执行npm init -y初始化项目
安装Express：npm install express

在项目根目录新建server.js，写最基础的服务器代码：

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

// 允许服务器解析JSON格式的请求体
app.use(express.json());
// 把你的HTML页面所在的文件夹设为静态资源目录（比如你的页面在public文件夹里）
app.use(express.static('public'));

// 启动服务器
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
  console.log(`局域网访问地址：http://你的局域网IP:${port}`); // 比如192.168.1.100:3000
});

把你原来的HTML、CSS、TS编译后的JS文件都放到public文件夹里，运行node server.js启动服务器，现在局域网内的设备就能通过你的IP加端口访问页面了。

2. 实现服务器端的共享数据存储

先从简单的内存存储开始（适合测试，重启服务器数据会丢失，后续可以换成数据库）：

在server.js里加一个变量用来存共享数据：

// 初始化共享数据，比如和你之前localStorage存的结构一致
let sharedData = {};

写两个API接口，分别用来读取和修改数据：

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

// 修改共享数据的接口
app.post('/api/shared-data', (req, res) => {
  sharedData = req.body;
  res.json({ success: true, message: '数据更新成功' });
});

3. 修改前端代码，替换localStorage为服务器请求

把你原来用localStorage读写数据的代码，改成调用上面的API：

原来的存储逻辑（比如保存表单数据）：

// 旧代码：localStorage.setItem('userData', JSON.stringify(userData));
// 新代码：
async function saveData(userData: any) {
  try {
    const response = await fetch('/api/shared-data', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(userData),
    });
    const result = await response.json();
    console.log(result.message);
  } catch (error) {
    console.error('保存数据失败:', error);
  }
}

原来的读取逻辑：

// 旧代码：const userData = JSON.parse(localStorage.getItem('userData') || '{}');
// 新代码：
async function loadData() {
  try {
    const response = await fetch('/api/shared-data');
    const userData = await response.json();
    // 拿到数据后渲染到页面上
    return userData;
  } catch (error) {
    console.error('加载数据失败:', error);
    return {};
  }
}

4. 测试局域网共享效果

确保所有设备和服务器在同一个局域网，用服务器的局域网IP（比如192.168.1.100:3000）访问页面，现在任何一台设备修改数据，其他设备刷新页面就能看到最新的共享数据了。

学习路径建议

如果你是刚接触Node.js和Express，可以按这个顺序逐步深入：

Node.js基础：先了解Node.js的运行机制、CommonJS模块化、npm的基本使用（比如安装包、运行脚本）
Express核心：重点学路由配置、请求/响应处理、静态文件托管、中间件的概念（比如express.json()就是一个中间件）
HTTP基础：搞清楚GET/POST等请求方法的区别，JSON数据格式，请求头、响应体的作用
数据持久化进阶：内存存储重启就丢数据，后续可以学轻量数据库比如SQLite（文件型数据库，不用额外安装服务）或者MongoDB（文档型数据库，适合JSON格式数据）
前端HTTP请求优化：可以学习Axios库，比原生fetch更简洁，支持拦截器、请求取消等功能