使用Vanilla JS开发网页时如何让localStorage存储的数据刷新后不消失

你编写的save_data函数仅在用户点击保存按钮时才会执行localStorage的读取和页面渲染逻辑，页面刷新后没有自动触发这一流程，因此存储的值实际仍然保存在本地，只是没有被读取展示到页面上，才会出现值消失的现象。

你可以抽离通用的姓名渲染逻辑，在页面加载完成后自动调用一次，修改后的代码如下：

JS代码 #

window.save_data = function () {
  if (typeof (Storage) !== "undefined") {
    let input = document.getElementById('inputName').value;
    localStorage.setItem('name', input);
    // 保存后调用渲染逻辑更新页面
    renderUserName()
    return localStorage.getItem('name');
  } else {
    alert("Sorry! No Web Storage support..")
  }
}

// 通用渲染逻辑：读取本地存储的值更新到页面
function renderUserName() {
  const savedName = localStorage.getItem('name')
  if (!savedName) return
  document.getElementById('inputName').value = savedName
  document.querySelector("#user-name").innerHTML = savedName
  console.log(savedName)
}

// 页面DOM加载完成后自动执行渲染
window.addEventListener('DOMContentLoaded', renderUserName)

HTML代码（无需修改） #

<input type='text' name="name" id="inputName" />
<button onclick="save_data()" type="button">Save</button>

• 请确认页面中存在ID为user-name的展示元素，否则会导致渲染失败
• 如果是多页面应用，需要在首页和设置页都添加上述的页面加载渲染逻辑，才能在两个页面都正常展示存储的姓名值

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