通过服务端/Flask+JS重置localStorage数据的技术问题

你当前的方案存在核心逻辑漏洞：Jinja模板注入的reset_signal只有在用户主动访问/generate_maps路由、页面被重新渲染时才会生效。如果后续是服务端自动执行该路由（比如定时任务），此时没有用户的浏览器请求触发页面渲染，前端JS根本不会收到重置信号，自然无法清除localStorage。

方案一：服务端维护重置时间戳，前端主动校验 #

这种方案不需要依赖用户访问特定路由，前端每次加载页面时主动核对服务端的重置标记，适合每日自动更新地图的场景。

1. Flask端修改 #

新增一个接口返回当前的重置时间戳，同时在生成地图时更新这个时间戳（用文件存储，避免数据库）：

import time
from flask import Flask, render_template, jsonify

app = Flask(__name__)
RESET_TIMESTAMP_FILE = "reset_timestamp.txt"

# 初始化时间戳（如果文件不存在）
try:
    with open(RESET_TIMESTAMP_FILE, "r") as f:
        latest_reset_ts = float(f.read())
except FileNotFoundError:
    latest_reset_ts = time.time()
    with open(RESET_TIMESTAMP_FILE, "w") as f:
        f.write(str(latest_reset_ts))

@app.route("/generate_maps") 
def generate_and_save_maps():
    # 自定义地图生成逻辑...
    
    # 更新重置时间戳
    global latest_reset_ts
    latest_reset_ts = time.time()
    with open(RESET_TIMESTAMP_FILE, "w") as f:
        f.write(str(latest_reset_ts))
    
    return render_template('homepage.html')

@app.route("/get_reset_timestamp")
def get_reset_timestamp():
    return jsonify({"timestamp": latest_reset_ts})

2. 前端JS修改（resetSignal.js） #

页面加载时请求服务端的时间戳，和localStorage中保存的上次重置时间对比，若服务端时间更新则清除数据：

async function checkAndResetStats() {
    try {
        const response = await fetch("/get_reset_timestamp");
        const data = await response.json();
        const serverResetTs = data.timestamp;
        const localResetTs = localStorage.getItem("last_reset_timestamp");

        // 如果本地没有记录，或者服务端时间更新了，就重置战绩
        if (!localResetTs || parseFloat(localResetTs) < serverResetTs) {
            // 清除指定的localStorage键，比如连胜次数
            localStorage.removeItem("win_streak");
            // 更新本地记录的重置时间
            localStorage.setItem("last_reset_timestamp", serverResetTs);
        }
    } catch (error) {
        console.error("校验重置状态失败:", error);
    }
}

// 页面加载时执行
window.addEventListener("load", checkAndResetStats);

方案二：用Cookie传递一次性重置信号 #

如果必须在执行/generate_maps时触发重置，可以通过Cookie传递信号，前端检测到Cookie后执行清除并删除Cookie（避免重复触发）。

1. Flask端修改 #

在生成地图的路由中设置一个非HttpOnly的Cookie：

from flask import make_response

@app.route("/generate_maps") 
def generate_and_save_maps():
    # 自定义地图生成逻辑...
    
    resp = make_response(render_template('homepage.html'))
    # 设置重置Cookie，过期时间设短一些，避免残留
    resp.set_cookie("need_reset", "true", max_age=60)
    return resp

2. 前端JS修改（resetSignal.js） #

function checkResetCookie() {
    // 读取Cookie
    const needReset = document.cookie.split('; ').find(row => row.startsWith('need_reset='))?.split('=')[1];
    
    if (needReset === "true") {
        // 清除指定的localStorage数据
        localStorage.removeItem("win_streak");
        // 删除Cookie，避免重复执行
        document.cookie = "need_reset=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    }
}

// 页面加载时执行
window.addEventListener("load", checkResetCookie);

• 方案一更适合每日自动更新地图的场景，无需用户主动触发，前端自行校验；
• 方案二适合需要在执行/generate_maps时立即触发重置的场景，但只有用户后续访问页面时才会执行清除操作；
• 两种方案都不需要搭建账号系统或数据库，符合你的需求。

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