如何实现可在局域网任意设备访问且共享存储数据的网页/应用？

哥们，我来给你捋清楚怎么弄——你现在用localStorage的问题就在于它是每个浏览器本地独有的存储，局域网里的设备根本读不到彼此的数据，所以必须搞个后端服务来托管公共数据，你提到的Express确实是最适合入门的选择，下面给你拆解具体的学习方向和实现步骤：

简单说就是：把原来存在单个设备localStorage里的数据，转移到一个所有局域网设备都能访问到的后端服务里，后端再用数据库持久化数据；前端不再读写本地存储，而是通过HTTP请求（GET/POST等）和后端交互，这样所有设备都能拿到同一份数据。

1. 先搞定Node.js和Express基础 #

Express是基于Node.js的后端框架，所以得先摸透Node.js的基础操作：

• 先安装Node.js和npm（Node的包管理器），学会用npm init初始化项目，用npm install 包名安装依赖
• 先写一个极简的Express服务，搞懂路由、请求响应的基本逻辑：

// server.js
const express = require('express');
const app = express();
const port = 3000;

// 解析JSON格式的请求体（前端发JSON数据时需要）
app.use(express.json());

// 临时存数据的变量（后面要换成数据库，不然服务器重启数据就没了）
let sharedData = {};

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

// 定义保存数据的接口
app.post('/api/save-data', (req, res) => {
  sharedData = req.body;
  res.json({ success: true, message: '数据保存成功' });
});

// 启动服务，监听局域网IP（或者直接0.0.0.0，这样所有网卡都能访问）
app.listen(port, '0.0.0.0', () => {
  console.log(`后端服务运行在 http://你的局域网IP:${port}`);
  // 比如你的电脑局域网IP是192.168.1.100，那其他设备就访问这个地址
});

运行这个服务：在终端输入node server.js，然后用局域网里的其他设备访问http://你的局域网IP:3000/api/get-data，能拿到空对象就说明服务跑通了。

2. 加入数据库实现数据持久化 #

上面用变量存数据的方式，服务器一重启数据就丢了，所以必须加数据库：

• 入门推荐用SQLite（文件型数据库，不用额外装数据库服务，直接用文件存，非常适合小项目），或者MongoDB（NoSQL数据库，用JSON格式存数据，和前端交互更顺手）
• 举个SQLite的简单例子（先安装sqlite3包：npm install sqlite3）：

const sqlite3 = require('sqlite3').verbose();
// 连接到本地的shared.db文件，不存在就自动创建
const db = new sqlite3.Database('./shared.db');

// 初始化数据表（如果不存在就创建）
db.run('CREATE TABLE IF NOT EXISTS shared_data (data_key TEXT PRIMARY KEY, data_value TEXT)');

// 保存数据的接口（替换之前的临时变量版本）
app.post('/api/save-data', (req, res) => {
  const { key, value } = req.body;
  // 用REPLACE实现新增或更新
  db.run('REPLACE INTO shared_data (data_key, data_value) VALUES (?, ?)', [key, JSON.stringify(value)], (err) => {
    if (err) {
      return res.status(500).json({ success: false, error: err.message });
    }
    res.json({ success: true });
  });
});

// 获取数据的接口
app.get('/api/get-data/:key', (req, res) => {
  const { key } = req.params;
  db.get('SELECT data_value FROM shared_data WHERE data_key = ?', [key], (err, row) => {
    if (err) {
      return res.status(500).json({ success: false, error: err.message });
    }
    res.json({ 
      success: true, 
      value: row ? JSON.parse(row.data_value) : null 
    });
  });
});

3. 修改前端代码，替换localStorage逻辑 #

原来用localStorage.setItem()和localStorage.getItem()的地方，换成用fetch或者axios发HTTP请求：

• 比如保存数据（用TypeScript写的例子）：

// 原来的localStorage写法
// localStorage.setItem('userInfo', JSON.stringify(userData));

// 现在的后端请求写法
async function saveDataToServer(key: string, data: any) {
  try {
    const response = await fetch('http://你的局域网IP:3000/api/save-data', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ key, value: data }),
    });
    const result = await response.json();
    if (!result.success) throw new Error(result.error);
    console.log('数据保存成功');
  } catch (error) {
    console.error('保存失败:', error);
  }
}

• 获取数据同理，用GET请求调用后端的/api/get-data/:key接口就行。

4. 处理跨域问题（开发必遇） #

如果你的前端是用LiveServer跑在某个端口（比如5500），后端在3000端口，浏览器会因为跨域限制拒绝请求，所以需要在Express里加跨域中间件：

• 安装cors包：npm install cors
• 在Express服务里启用：

const cors = require('cors');
// 开发环境可以直接允许所有域名访问，生产环境再限制具体域名
app.use(cors());

1. 先搞定Node.js+Express的基础，能写出可访问的接口，确保局域网内设备能调通
2. 再加入数据库，实现数据的持久化（解决服务器重启丢数据的问题）
3. 最后修改前端代码，把localStorage的逻辑替换成后端请求
4. 遇到跨域问题再处理cors，这个是开发中大概率会碰到的

这样一步步来，难度循序渐进，不会一下子太复杂。

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