如何将点击HTML元素生成的文本保存到LocalStorage？

我来帮你排查下问题，你的代码思路没问题，但在LocalStorage的操作方式和页面初始化逻辑上有小疏漏，咱们一步步修正：

原代码的问题点 #

• 直接使用localStorage.content不是标准的LocalStorage操作方式，规范做法是用localStorage.setItem()存储、localStorage.getItem()读取
• 页面刷新后没有从LocalStorage恢复之前保存的状态，会回到默认文本
• 原代码中设置完.current-theme的内容后，又立刻读取LocalStorage赋值回去，属于冗余操作

修正后的完整代码 #

首先是HTML部分：

<div class="current-theme">Default is active</div>
<div class="light theme">Light</div>

然后是jQuery代码：

// 页面初始化时，从LocalStorage恢复状态
$(document).ready(function() {
  const savedThemeText = localStorage.getItem('themeText');
  if (savedThemeText) {
    $('.current-theme').html(savedThemeText);
  }

  // 点击Light主题按钮的事件
  $(".light.theme").click(function(){
    const activeText = "Light is active";
    // 更新显示文本
    $('.current-theme').html(activeText);
    // 保存到LocalStorage
    localStorage.setItem('themeText', activeText);
  });
});

代码说明 #

1. 页面初始化逻辑：在$(document).ready()里先检查LocalStorage中是否有保存的themeText值，如果有就直接更新.current-theme的内容，这样刷新页面后状态不会丢失
2. 点击事件优化：先定义要显示的文本，更新页面内容后，用localStorage.setItem()把文本存入LocalStorage，避免冗余操作
3. 标准LocalStorage操作：使用getItem和setItem方法是W3C规范的操作方式，比直接赋值属性更可靠，也避免潜在的命名冲突问题

这样修改后，点击Light按钮时会更新显示文本并保存到LocalStorage，页面刷新后也会保持之前的状态啦～

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