页面刷新时Local Storage加载不稳定问题的修复请求

问题背景 #

网页内包含两个输入框和一个按钮的表单，通过localStorage保存输入内容，页面刷新时重新加载，但普通刷新时常无法加载内容，仅硬刷新有效，且该问题仅在非Firefox浏览器中出现。已通过开发者工具确认点击按钮后内容已成功存入localStorage。

原实现代码：

document.addEventListener('DOMContentLoaded', () => {
    const txt = document.getElementById('txt');
    const type = document.getElementById('type');
    const btn = document.getElementById('btn');

    // Load form inputs from local storage if available
    if (localStorage.getItem('txt') !== null) {
        txt.value = localStorage.getItem('txt');
        type.value = localStorage.getItem('type');
    }

    // Save to local storage
    btn.addEventListener('click', () => {
        localStorage.setItem('txt', txt.value);
        localStorage.setItem('type', type.value);
    });
});

问题原因 #

核心原因是Chrome、Edge等浏览器的**后退缓存（bfcache）**机制：页面刷新、前进后退时，浏览器会缓存页面状态快速恢复，此时DOMContentLoaded事件可能不会重新触发，导致读取localStorage的逻辑未执行。而硬刷新会强制绕过缓存重新加载页面，DOMContentLoaded正常触发，因此能正常加载内容。

修复方案 #

1. 改用pageshow事件监听页面显示 #

pageshow事件在页面每次显示时都会触发（包括从bfcache恢复的场景），能确保读取逻辑每次都执行：

// 监听页面显示，覆盖缓存恢复场景
window.addEventListener('pageshow', () => {
    const txt = document.getElementById('txt');
    const type = document.getElementById('type');
    
    // 先检查元素是否存在，避免空引用报错
    if (!txt || !type) return;

    // 加载localStorage内容
    const savedTxt = localStorage.getItem('txt');
    const savedType = localStorage.getItem('type');
    
    if (savedTxt !== null) txt.value = savedTxt;
    if (savedType !== null) type.value = savedType;
});

// 保存逻辑保持不变，确保元素存在后绑定事件
document.addEventListener('DOMContentLoaded', () => {
    const btn = document.getElementById('btn');
    if (!btn) return;

    btn.addEventListener('click', () => {
        const txt = document.getElementById('txt');
        const type = document.getElementById('type');
        localStorage.setItem('txt', txt?.value || '');
        localStorage.setItem('type', type?.value || '');
    });
});

2. 优化存储逻辑（可选） #

将两个字段合并为一个JSON对象存储，减少localStorage操作次数，同时避免字段分散：

// 保存时
btn.addEventListener('click', () => {
    const formData = {
        txt: txt?.value || '',
        type: type?.value || ''
    };
    localStorage.setItem('formData', JSON.stringify(formData));
});

// 加载时
const savedData = localStorage.getItem('formData');
if (savedData) {
    const { txt, type } = JSON.parse(savedData);
    if (txt !== undefined) txt.value = txt;
    if (type !== undefined) type.value = type;
}

3. 添加异常捕获（可选） #

为localStorage操作添加try-catch，避免因存储配额不足等意外情况导致脚本中断：

try {
    const savedTxt = localStorage.getItem('txt');
    // ...加载逻辑
} catch (e) {
    console.error('读取localStorage失败:', e);
}

验证方法 #

修改代码后，测试普通刷新、前进后退操作，确认输入内容能稳定加载；同时在Chrome、Edge等浏览器中验证，确保问题解决。

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