如何利用localStorage实现‘Mark as Read’状态持久化？

要通过localStorage保存按钮状态，需要在页面加载时读取存储的状态，以及状态切换时更新存储内容，修改后的代码如下：

修改后的JavaScript代码 #

// 页面加载时初始化按钮状态
window.onload = function() {
  const savedState = localStorage.getItem('buttonState');
  const button = document.getElementById('readunread');
  // 有保存状态则用存储值，无则用默认值
  button.value = savedState || 'Mark as Read';
};

function readunread() {
  const button = document.getElementById('readunread');
  let currentValue = button.value;
  let newValue;
  
  if(currentValue === "Mark as Unread"){
    newValue = "Mark as Read";
  } else{
    newValue = "Mark as Unread";
  }
  
  button.value = newValue;
  // 将新状态存入本地存储
  localStorage.setItem('buttonState', newValue);
}

代码说明 #

• window.onload：页面加载完成后自动执行，从localStorage读取之前保存的按钮状态，直接设置给按钮；首次访问无存储状态时，使用默认的"Mark as Read"。
• localStorage.setItem('buttonState', newValue)：每次切换按钮状态后，把最新的按钮文本存入本地存储，键名buttonState可自行修改，只要和读取时保持一致即可。
• localStorage.getItem('buttonState')：读取已存储的状态值，用来在页面刷新后恢复按钮状态。

原HTML和CSS无需修改 #

你的HTML和CSS代码可以保持原样，仅替换JavaScript部分即可。修改后点击按钮切换状态，刷新页面就能维持最后一次的状态。

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