localstorage - 如何使用LocalStorage实现网页信息本地修改?

Question

我需要修改网页的信息，本地使用，是他刷新后不会变成原来的样子。
新手小白，问过Ai，Ai的解决办法是使用LocalStorage。我用的chrome浏览器。

// 获取百度一下按钮的元素var button = document.getElementById("su");// 定义一个函数，用于修改按钮的文本function changeText() {  // 如果 localStorage 中有保存的文本，就使用它  if (localStorage.getItem("buttonText")) {    button.value = localStorage.getItem("buttonText");  } else {    // 否则，就使用默认的文本    button.value = "百度一下";  }}// 调用函数，修改按钮的文本changeText();// 为按钮添加点击事件监听器button.addEventListener("click", function () {  // 如果按钮的文本是百度一下，就改成百一下，并保存到 localStorage 中  if (button.value == "百度一下") {    button.value = "百一下";    localStorage.setItem("buttonText", "百一下");  } else {    // 否则，就改回百度一下，并从 localStorage 中删除    button.value = "百度一下";    localStorage.removeItem("buttonText");  }});

这是Ai给出的代码，使用后并没有什么变化，localStorage除了相关网站什么也没有。请问是哪里出问题了呢？
我需要把百度一下改成百度下，使其刷新也不会消失。

我问过Ai,网上大量寻找资源，却一知半解。
我希望能够修改信息。

Answer 1

修改value, 改的是这个值, 修改innerHTML就行了, 也就是button.value改为button.innerHTML

<button id="su">百度一下</button><script>  // 获取百度一下按钮的元素  var button = document.getElementById("su");  // 定义一个函数，用于修改按钮的文本  function changeText() {    // 如果 localStorage 中有保存的文本，就使用它    console.log(localStorage.getItem("buttonText"));    if (localStorage.getItem("buttonText")) {      button.innerHTML = localStorage.getItem("buttonText");    } else {      // 否则，就使用默认的文本      button.innerHTML = "百度一下";    }  }  // 调用函数，修改按钮的文本  changeText();  // 为按钮添加点击事件监听器  button.addEventListener("click", function () {    // 如果按钮的文本是百度一下，就改成百一下，并保存到 localStorage 中    if (button.innerHTML  == "百度一下") {      button.innerHTML  = "百一下";      localStorage.setItem("buttonText", "百一下");    } else {      // 否则，就改回百度一下，并从 localStorage 中删除      button.innerHTML = "百度一下";      localStorage.removeItem("buttonText");    }  });</script>

Answer 2

问题可能出现在你的button赋值使用的是button.value，一般使用value赋值的都是form表单，而你的button是表单吗（<input type="button" value="Click Me">）,如果不是，那你使用value赋值是不生效的，如果是button元素或是用div、span等元素模拟的button元素，那你应该使用innerHTML修改button.innerHTML

Answer 3

从你的描述中，我了解到你希望通过使用LocalStorage来在用户对网页进行一些修改后，即使刷新页面也能记住用户之前对页面的修改。你已经从AI得到了相关的代码，但是使用后并没有达到预期的效果。

首先，我要确认的是你的代码实际上是用于监听按钮的点击事件，并且在按钮被点击时改变它的文本，并将新的文本保存在LocalStorage中。当按钮再次被点击时，它的文本会被更改回初始的文本，并从LocalStorage中删除保存的文本。

如果你希望在刷新页面后还能保持修改的文本，你需要确保在页面加载时将保存在LocalStorage中的文本赋值给按钮，而不是只在按钮被点击时才进行赋值。

以下是对你代码的修改：

// 在页面加载时检查 LocalStorage 中是否有保存的文本window.onload = function() {  if (localStorage.getItem("buttonText")) {    button.value = localStorage.getItem("buttonText");  }}// 添加点击事件监听器button.addEventListener("click", function () {  if (button.value == "百度一下") {    button.value = "百一下";    localStorage.setItem("buttonText", "百一下");  } else {    button.value = "百度一下";    localStorage.removeItem("buttonText");  }});

这样，每次页面加载时，都会检查LocalStorage中是否有保存的文本，如果有就将文本赋值给按钮。同时，当按钮被点击时，也会保存或删除保存在LocalStorage中的文本。