Javascript 正在尝试使用密钥名从本地存储中删除项

我试图从本地存储中删除该项，或者单击按钮将其清除。我已经编写了代码，但单击按钮时，不会清除localstorage数据。这是包含localstorage数据的变量

    window.onbeforeunload = function() {
    localStorage.setItem("first_name", $('#inputName').val());
};

编辑的

window.onload = function() {
    var name = localStorage.getItem("first_name");
    if (name !== null) {
        $('#inputName').val(name);
        alert(name);
    }
};

这是清除存储的功能

function clearStorage(){
alert('localstorage cleared!');
localStorage.removeItem('first_name');

}

按钮的片段单击代码块以使用键名清除localstorage数据

<input type="text" id="inputName" placeholder="Name" required>
<button onclick="clearStorage()">clear</button>

清楚的

单击按钮尝试从localstorage中清除数据并刷新页面时，localstorage数据仍在输入值中。

---

如何清除本地存储内容是我的挑战

设置/清除本地存储的代码看起来不错。但是，输入字段不是与本地存储实时同步的，因此，如果希望输入始终与本地存储值保持最新，则应在

clearStorage

函数中以这种方式更新它。此外，如果使用此方法，则无需刷新页面：

window.onload = function() {
  var name = fetchLocalStorage();

  if (name !== null) {
    $('#inputName').val(name);
    alert(name);
  }
};

function fetchLocalStorage() {
  return localStorage.getItem("first_name");
}

function clearStorage() {
  // clear local storage
  localStorage.removeItem('first_name');
  alert('localstorage cleared!');

  // update input value
  var name = fetchLocalStorage();
  $('#inputName').val(name);
}

function saveStorage() {
  localStorage.setItem("first_name", $('#inputName').val());
}

HTML应更新为：

<input type="text" id="inputName" placeholder="Name" required>
<button type="button" onclick="saveStorage()">save</button>
<button type="button" onclick="clearStorage()">clear</button>

拯救
清楚的

嗯，尝试将

type=“button”

添加到按钮中。。。 这将防止表单提交+页面重新加载+onbeforeunload->每次设置存储项时…

---

您正在成功删除该项目，然后当您刷新时，您将在离开页面时再次设置该项目，因为您仍然有：

window.onbeforeunload = function() {
    localStorage.setItem("first_name", $('#inputName').val());
};

您必须决定何时设置项目。即使您之前已经清除了，上面的操作也会一直执行

也许您最好只在

输入更改时设置项目，而在
onbeforeuload
中设置而不是。也就是说，摆脱上述情况，取而代之的是：

$("#inputName").on("input", function() {
    localStorage.setItem("first_name", $(this).val());
});

这样，如果清除该项（将其从本地存储中删除），则除非再次编辑该字段，否则该项不会被添加回来。
您在哪里设置输入值？尝试创建一个小提琴来演示这个问题。如何以及何时调用集合项？你看到clearstorage的警报了吗？检查我的编辑。@Christoph yes I docould它是-它被删除了，但是由于你的
window.onbeforeunload=function（）{
它被再次添加，原因是按钮是submit（默认情况下没有类型）将在本地存储中重新加载您的项目？！使用您的方法，不会存储localstorage。我需要如果我刷新页面，让localstroge数据被保留，并且应该只在单击“清除”按钮时清除它。更正，不会存储localstorage，因为我在代码段中没有实现localstorage.setItem方法。我无法理解当您刷新页面时，该部分作为输入字段的工作方式最初默认为“空”。我相信您需要另一个按钮来将这些信息保存在本地存储中。类似于“
save
function saveStorage（）{localStorage.setItem”（$first_name），$（'#inputName'）.val（））；”
这对您有意义吗？已更新。请看一看我认为出于某种原因，我需要取消前加载功能类型按钮，但仍然不起作用>>>>>>清除您是否通过调试器进行了检查（在
localStorage.removietem（'first_name'）后一行设置断点；
）并检查您的项目是否已被删除-它肯定会被删除！！！但在您的onbeforunload上，您会再次添加它-+remove onbeforunload-您应该看到它会起作用；）尝试刷新页面上的代码片段，提示null@parker：不，它没有：（我在
on
语句的
中缺少一个
#
，但这并不能使它成为警报
null
）当然，我想了很多，但清除不是实时的，我必须刷新页面，然后单击button@parker：清除本地存储确实是实时的。如果您希望更改
输入
，则必须添加代码才能执行此操作。没有任何东西可以神奇地将
输入
链接到
本地存储
 ；这是你的代码的工作。@parker：问问你自己：我如何设置
输入的值？