本文详解如何使用 google apps script 创建一个真正可用的 web 应用计数器，解决客户端变量无法跨请求持久化的根本问题，通过 scriptcache 实现服务端状态存储，并配合 html 模板动态渲染。
本文详解如何使用 google apps script 创建一个真正可用的 web 应用计数器，解决客户端变量无法跨请求持久化的根本问题，通过 scriptcache 实现服务端状态存储，并配合 html 模板动态渲染。
在 Google Apps Script 中构建网页计数器时，一个常见误区是试图像普通前端页面一样在客户端（index.html）中用 JavaScript 维护全局变量（如 let count = 0）。但需明确：每次用户点击按钮触发页面刷新或新请求时，HTML 页面都会被服务器全新生成并返回——客户端 JS 变量不会保留，服务端脚本也会重新执行。因此，单纯依赖浏览器端 count++ 或 count-- 无法实现“持续累加/递减”的效果。
真正的解决方案在于：将计数值作为服务端状态进行管理。Google Apps Script 提供了轻量、高效且免配置的 CacheService.getScriptCache()，可安全存储数据最多 6 小时（21600 秒），完全满足简单计数器需求，且无需数据库或复杂授权。
以下是完整、可部署的实现方案：
✅ 正确结构：服务端驱动 + 模板注入
Code.gs（服务端逻辑）
function doGet(request) {
const cache = CacheService.getScriptCache();
// 从缓存读取当前计数，若无则初始化为 0
let count = parseInt(cache.get("count")) || 0;
// 根据 URL 参数执行增减操作（GET 请求驱动）
if (request.parameters.dec) {
count--;
} else if (request.parameters.inc) {
count++;
}
// 将更新后的值写回缓存（有效期 6 小时）
cache.put("count", count.toString(), 21600);
// 渲染模板，并将 count 值注入 HTML
return HtmlService.createTemplateFromFile("index.html").evaluate()
.setTitle("Counter Web App");
}
? 关键说明：
doGet()是 Web 应用的入口函数；request.parameters获取 URL 查询参数（如?inc或?dec）；cache.put()必须传入字符串值，故使用toString()确保类型安全。
index.html（服务端渲染模板）
<base href="<?=%20ScriptApp.getService().getUrl()%20?>" target="_top"><meta charset="UTF-8"><style>
.container { text-align: center; margin-top: 40px; font-family: Arial, sans-serif; }
.button { display: inline-block; padding: 10px 20px; margin: 0 5px;
background: #4285F4; color: white; text-decoration: none; border-radius: 4px; }
#count { font-size: 2em; font-weight: bold; color: #333; }
</style><div class="container">
<h2>Current Count: <span id="count">= count ?></span>
</h2>
<a id="decBtn" class="button" href="?dec">−</a>
<a id="incBtn" class="button" href="?inc">+</a>
</div>
? 技术要点：
- 使用
= count ?>在服务端完成变量插值，确保首次加载即显示最新值；<base href="...">确保相对链接正确指向当前 Web 应用 URL；- 按钮采用
@#@#@#@#@#@#@#@#@#@0，并在doGet()中增加if (request.parameters.reset) count = 0;- 增加输入框实现任意设值：添加
<input type="number" id="setInput">和<button onclick="setCount()">Set</button>，配合google.script.run调用服务端函数（需启用 HTML 服务的XSS安全策略并添加withSuccessHandler回调）。至此，你已掌握 Apps Script Web 应用的核心范式：状态交由服务端管理，视图通过模板动态生成，交互依托 HTTP 请求驱动——这是构建可靠、可维护 GAS Web 应用的基石。
