如何实现页面刷新时保留修改后的数据？原生JS localStorage问题

直接上修改后的完整代码：

<h2 id="cont"></h2>

<script type="text/javascript">
let genRnd = function() {
    var min=0; 
    var max=9;  
    return Math.floor(Math.random() * (+max - +min)) + +min; 
};

// 页面加载时先从localStorage读取保存的值
const savedValue = localStorage.getItem('randomNumber');
const contElement = document.getElementById('cont');

// 如果有保存的值就显示，没有就生成初始值并存入
if (savedValue) {
    contElement.innerHTML = savedValue;
} else {
    const initialValue = genRnd();
    contElement.innerHTML = initialValue;
    localStorage.setItem('randomNumber', initialValue);
}

// 每隔500毫秒生成新值并更新存储
setInterval(function() { 
    const newNumber = genRnd();
    contElement.innerHTML = newNumber;
    // 每次生成新值都存入localStorage
    localStorage.setItem('randomNumber', newNumber);
}, 500);
</script>

关键修改说明： #

• 初始化读取存储：页面加载时通过localStorage.getItem('randomNumber')获取之前保存的值，避免刷新后重置状态。
• 处理首次加载：如果是第一次打开页面无存储值，生成初始随机数并存入localStorage。
• 实时更新存储：每次生成新随机数后，立刻用localStorage.setItem('randomNumber', newNumber)保存最新值，确保刷新时能拿到最后生成的数值。
• 适配localStorage特性：它仅支持存储字符串类型，这里数值为0-9整数，直接存取无问题；若存储复杂数据，需用JSON.stringify()和JSON.parse()转换。

原代码失效原因： #

你之前的代码仅实现了随机数生成与页面显示，缺少存储数值和页面加载时读取存储的逻辑，导致刷新后代码重新执行，生成新的随机数，无法保留之前的值。

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