能否生成刷新后留存指定时长的随机数/词并显示剩余时间？

当然可以实现！这个需求在前端开发里挺常见的，咱们可以用浏览器的本地存储（比如localStorage）配合定时器来搞定，下面给你拆解具体的实现思路和可直接运行的代码示例：

整个功能的核心就是把随机内容和过期时间存在本地，每次页面加载时校验状态，同时用定时器实时更新剩余时间：

• 生成随机内容后，将内容和「当前时间+指定留存时长」的过期时间一起存入localStorage（跨会话持久化）或sessionStorage（仅当前会话有效）。
• 页面刷新/重新打开时，先读取本地存储的数据，判断是否还在有效期内：如果有效就展示内容和剩余时间；如果过期则清空存储，允许用户重新生成。
• 用setInterval定时器每秒计算并更新剩余时间，直到内容过期后自动重置状态。

下面是一个可直接运行的HTML页面，包含随机内容生成、留存、倒计时显示的完整功能：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>留存式随机内容生成器</title>
    <style>
        .container {
            max-width: 400px;
            margin: 50px auto;
            text-align: center;
        }
        .random-content {
            font-size: 24px;
            margin: 20px 0;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .countdown {
            color: #666;
            margin-bottom: 20px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
        button:disabled {
            cursor: not-allowed;
            background-color: #eee;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>随机内容生成器</h1>
        <div class="random-content" id="randomContent">点击下方按钮生成</div>
        <div class="countdown" id="countdown"></div>
        <button id="generateBtn">生成随机内容</button>
    </div>

    <script>
        // 配置项：留存时长（这里设为10分钟=600000毫秒，可自行修改）
        const RETAIN_DURATION = 10 * 60 * 1000;
        // 随机词库示例，可替换成你需要的词汇
        const WORD_LIST = ["苹果", "香蕉", "橘子", "葡萄", "西瓜", "草莓", "蓝莓", "芒果"];

        const randomContentEl = document.getElementById('randomContent');
        const countdownEl = document.getElementById('countdown');
        const generateBtn = document.getElementById('generateBtn');

        // 生成随机内容：可切换生成随机数或随机词
        function generateRandomContent() {
            const useRandomWord = true; // 改为false则生成随机数
            if (useRandomWord) {
                const randomIndex = Math.floor(Math.random() * WORD_LIST.length);
                return WORD_LIST[randomIndex];
            } else {
                return Math.floor(Math.random() * 1000).toString(); // 生成0-999的随机数
            }
        }

        // 将随机内容和过期时间保存到本地存储
        function saveRandomContent(content) {
            const expireTime = Date.now() + RETAIN_DURATION;
            localStorage.setItem('randomData', JSON.stringify({
                content,
                expireTime
            }));
        }

        // 读取并校验本地存储中的数据是否有效
        function getValidRandomData() {
            const storedData = localStorage.getItem('randomData');
            if (!storedData) return null;
            try {
                const { content, expireTime } = JSON.parse(storedData);
                if (Date.now() < expireTime) {
                    return { content, expireTime };
                } else {
                    // 数据已过期，清除本地存储
                    localStorage.removeItem('randomData');
                    return null;
                }
            } catch (e) {
                // 解析失败，清除无效数据
                localStorage.removeItem('randomData');
                return null;
            }
        }

        // 更新倒计时显示
        function updateCountdown(expireTime) {
            const remainingTime = expireTime - Date.now();
            if (remainingTime <= 0) {
                countdownEl.textContent = '';
                generateBtn.disabled = false;
                randomContentEl.textContent = '点击下方按钮生成';
                localStorage.removeItem('randomData');
                return;
            }
            // 将剩余毫秒数转换为时分秒格式
            const hours = Math.floor(remainingTime / (1000 * 60 * 60));
            const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
            countdownEl.textContent = `剩余留存时间：${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }

        // 页面加载时初始化状态
        function init() {
            const validData = getValidRandomData();
            if (validData) {
                randomContentEl.textContent = validData.content;
                generateBtn.disabled = true;
                // 每秒更新一次倒计时
                const timer = setInterval(() => {
                    updateCountdown(validData.expireTime);
                    if (Date.now() >= validData.expireTime) {
                        clearInterval(timer);
                    }
                }, 1000);
                // 初始化时先更新一次倒计时
                updateCountdown(validData.expireTime);
            } else {
                generateBtn.disabled = false;
            }
        }

        // 绑定生成按钮的点击事件
        generateBtn.addEventListener('click', () => {
            const content = generateRandomContent();
            randomContentEl.textContent = content;
            saveRandomContent(content);
            generateBtn.disabled = true;
            // 启动倒计时定时器
            const { expireTime } = JSON.parse(localStorage.getItem('randomData'));
            const timer = setInterval(() => {
                updateCountdown(expireTime);
                if (Date.now() >= expireTime) {
                    clearInterval(timer);
                }
            }, 1000);
            updateCountdown(expireTime);
        });

        // 页面加载完成后执行初始化
        window.addEventListener('load', init);
    </script>
</body>
</html>

• 存储类型选择：代码里用的是localStorage，即使关闭浏览器再打开，数据依然会保留；如果只需要在当前浏览器会话中留存（关闭浏览器就清空），可以把所有localStorage替换成sessionStorage。
• 自定义配置：你可以修改RETAIN_DURATION来调整留存时长，修改WORD_LIST来替换随机词库，也可以切换useRandomWord的值来生成随机数或随机词。
• 精度优化：浏览器在后台运行时，定时器可能会被节流（比如从每秒执行变成每10秒执行一次），如果需要更精准的倒计时，可以监听页面的visibilitychange事件，在页面重新显示时重新计算剩余时间。
• 用户体验：代码里已经禁用了留存期间的生成按钮，避免用户重复操作，你还可以根据需求添加更多提示文案，提升体验。

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