讲师中心 微信公众号
AI工具推荐 视频效率加速

如何在网页间持久化共享变量(而非仅本地存储)

落婷君_3673

落婷君_3673

发布时间:2025-12-29 19:18:02

|

763人浏览过

|

来源于php中文网

原创

如何在网页间持久化共享变量(而非仅本地存储)

网页每次加载都会重置 javascript 变量,若需跨用户、跨设备持续保存并同步同一变量值,必须借助服务端存储(如数据库)配合 api 接口,不能依赖 localstorage 或 sessionstorage 等纯前端方案。

在 Web 开发中,JavaScript 变量本质上是运行时内存数据:页面刷新、关闭标签页或换设备后即彻底丢失。localStorage 虽可跨会话保留数据,但仅限单用户、单浏览器、单设备本地使用——正如提问者所观察到的:“它只是本地的”,无法实现“所有人共用同一个变量值”。

要实现真正的全局共享状态(例如计数器、排行榜、实时开关等),核心思路是将变量从客户端“上移”至服务端持久化存储:

✅ 正确路径:

Ai Coach Batch Session Summary
Ai Coach Batch Session Summary

批量分析录音转写,输出多维度拓客报告。触发词:录音分析、总结、音频总结、拜访记录总结。当用户提及「分析录音」「看看录音数据」「最近的录音」「通话记录」且意图为批量统计/分析时触发。仅出现「录音」或「拜访」时需结合上下文,若仅查看单条详情则不触发。

下载
  1. 前端发起请求(如点击按钮时调用 fetch());
  2. 后端接收并操作数据库(如读取当前值 → 修改 → 写回);
  3. 返回最新结果给所有相关客户端(可配合轮询、WebSocket 或 Server-Sent Events 实现实时同步)。

? 示例(简化版前后端交互):

// 前端:更新共享计数器
async function incrementCounter() {
  try {
    const res = await fetch('/api/counter', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action: 'increment' })
    });
    const data = await res.json();
    console.log('当前全局值:', data.value); // 如:{ value: 1024 }
  } catch (err) {
    console.error('更新失败', err);
  }
}
# 后端(Flask 示例)
from flask import Flask, request, jsonify
import sqlite3

app = Flask(__name__)

def get_db():
    conn = sqlite3.connect('shared.db')
    conn.execute('CREATE TABLE IF NOT EXISTS counter (id INTEGER PRIMARY KEY, value INTEGER DEFAULT 0)')
    return conn

@app.route('/api/counter', methods=['POST'])
def handle_counter():
    action = request.json.get('action')
    conn = get_db()
    cur = conn.cursor()

    if action == 'increment':
        cur.execute('UPDATE counter SET value = value + 1 WHERE id = 1')
        if cur.rowcount == 0:
            cur.execute('INSERT INTO counter (id, value) VALUES (1, 1)')
        cur.execute('SELECT value FROM counter WHERE id = 1')
        val = cur.fetchone()[0]
        conn.commit()
        return jsonify({'value': val})

⚠️ 注意事项:

  • ❌ 不要尝试用 localStorage + 定时同步“模拟”共享——存在竞态、冲突与延迟问题;
  • ✅ 对高并发场景,需在服务端加锁(如数据库行锁、Redis Lua 脚本)确保原子性;
  • ✅ 若需实时响应,建议用 WebSocket(如 Socket.IO)替代轮询,降低延迟与服务器负载;
  • ? 敏感操作务必校验身份(如 JWT 鉴权)、防止未授权写入。

总结:变量“不重置”的本质不是前端技巧问题,而是数据归属权问题——当变量需被多方共同读写时,它就不再属于浏览器,而应成为服务端受控的资源。设计之初就明确数据生命周期与作用域,是构建可靠 Web 应用的关键前提。

热门AI工具

更多
超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

3028

2023.10.19

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

4209

2025.10.17

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

3649

2025.12.29

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

366

2026.01.19

常用的数据库软件
常用的数据库软件

常用的数据库软件有MySQL、Oracle、SQL Server、PostgreSQL、MongoDB、Redis、Cassandra、Hadoop、Spark和Amazon DynamoDB。更多关于数据库软件的内容详情请看本专题下面的文章。php中文网欢迎大家前来学习。

4009

2023.11.02

内存数据库有哪些
内存数据库有哪些

内存数据库有Redis、Memcached、Apache Ignite、VoltDB、TimesTen、H2 Database、Aerospike、Oracle TimesTen In-Memory Database、SAP HANA和ache Cassandra。更多关于内存数据库相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

3515

2023.11.14

mongodb和redis哪个读取速度快
mongodb和redis哪个读取速度快

redis 的读取速度比 mongodb 更快。原因包括:1. redis 使用简单的键值存储,而 mongodb 存储 json 格式的数据,需要解析和反序列化。2. redis 使用哈希表快速查找数据,而 mongodb 使用 b-tree 索引。因此,redis 在需要高性能读取操作的应用程序中是一个更好的选择。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

6212

2024.04.02

redis怎么做缓存服务器
redis怎么做缓存服务器

redis 作为缓存服务器的答案:redis 是一款开源、高性能、分布式的键值存储,可作为缓存服务器使用。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

583

2024.04.07

Conan私有仓库搭建教程
Conan私有仓库搭建教程

本专题系统的讲解Conan私有仓库的搭建流程,涵盖仓库服务部署、存储目录配置、用户认证、权限划分和远程地址添加,并介绍内部C++依赖包的上传、下载及版本维护方法。

0

2026.09.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 11.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn