如何在JavaScript中跨浏览器保留变量值？求实现示例代码

首先明确：纯前端JavaScript无法直接跨浏览器共享变量，因为localStorage、sessionStorage这类本地存储机制是浏览器隔离的——每个浏览器（包括同一浏览器的不同用户账户）都有独立的存储容器，彼此完全不互通。

要实现跨浏览器共享变量，必须借助后端服务作为中间层，将数据存储在服务器端的数据库中，不同浏览器通过请求后端接口来读取/写入数据。

示例实现（Node.js后端 + 前端JS） #

1. 后端服务（Node.js + Express + 内存存储，生产环境建议用真实数据库） #

const express = require('express');
const cors = require('cors'); // 处理跨域请求
const app = express();
app.use(cors());
app.use(express.json());

// 模拟数据库存储（生产环境请替换为MongoDB/MySQL等持久化数据库）
let sharedData = {};

// 写入数据接口
app.post('/save-data', (req, res) => {
  const { key, value } = req.body;
  if (!key) return res.status(400).send('Key参数不能为空');
  sharedData[key] = value;
  res.status(200).send('数据保存成功');
});

// 读取数据接口
app.get('/get-data', (req, res) => {
  const { key } = req.query;
  if (!key) return res.status(400).send('Key参数不能为空');
  res.status(200).json({ value: sharedData[key] || null });
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`服务运行在端口 ${PORT}`);
});

2. 前端JavaScript代码 #

// 保存数据到后端服务器
async function saveSharedData(key, value) {
  try {
    const response = await fetch('http://localhost:3000/save-data', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ key, value }),
    });
    const result = await response.text();
    console.log(result);
  } catch (error) {
    console.error('保存数据失败:', error);
  }
}

// 从后端服务器读取共享数据
async function getSharedData(key) {
  try {
    const response = await fetch(`http://localhost:3000/get-data?key=${encodeURIComponent(key)}`);
    const data = await response.json();
    return data.value;
  } catch (error) {
    console.error('读取数据失败:', error);
    return null;
  }
}

// 使用示例
// 在A浏览器执行：保存数据
saveSharedData('user_preference', 'dark_mode');
// 在B浏览器执行：读取共享数据
getSharedData('user_preference').then(value => {
  console.log('共享的用户偏好:', value); // 输出 "dark_mode"
});

注意事项 #

• 示例中的后端用内存存储数据，重启服务器后数据会丢失，生产环境必须替换为持久化数据库。
• 如果需要区分不同用户的共享数据，需添加用户身份验证（如JWT、Session），避免数据混淆。
• 实际部署时要处理跨域配置、接口权限校验等安全问题。

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