如何用JavaScript实现按钮文本切换，刷新页面后仍保持状态

数据老陈

2026-10-4

解决方案

核心是用浏览器本地持久化存储记录按钮状态，单页应用在按钮渲染阶段直接读取状态赋值即可，无需绑定body onLoad事件。

实现步骤

用浏览器内置的localStorage存储关注状态，该存储的数据刷新页面、甚至关闭浏览器重新打开都不会丢失
渲染按钮前先读取本地存储的状态，给按钮设置对应初始文本
点击按钮时，同时修改按钮文本和更新localStorage里的状态

调整后的完整代码

// 读取本地存储的关注状态，默认未关注
const isFollowed = localStorage.getItem('followStatus') === 'true';
const initBtnText = isFollowed ? 'UNFOLLOW' : 'FOLLOW';

// 渲染按钮时直接传入初始文本
$('#myPosts1').append(`<button data-role="button" data-inline="true" data-mini="true" id="btn1" onClick="follow()" data-theme="b">${initBtnText}</button>`);

function follow() {
  const btn1 = document.getElementById("btn1");
  const nowIsFollowed = btn1.innerText === 'UNFOLLOW';
  if (nowIsFollowed) {
    // 切换为未关注状态
    btn1.innerText = 'FOLLOW';
    localStorage.setItem('followStatus', 'false');
  } else {
    // 切换为已关注状态
    btn1.innerText = 'UNFOLLOW';
    localStorage.setItem('followStatus', 'true');
  }
}