尝试使用键名从本地存储中删除项目

Question

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

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

EDITTED

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');

}

按钮单击代码块的片段，以使用键名清除本地存储数据

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

在尝试单击按钮以擦除本地存储中的数据并刷新页面时，本地存储数据仍在输入值中。 如何清除本地存储内容是我的挑战

Answer 1

您已成功删除该项目-然后刷新时，由于离开了页面，因此在离开页面时再次对其进行了设置 ：

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

您必须决定何时设置项目。 即使您之前已经清除了它，上面的命令也将始终执行。

也许最好只在input更改时设置项目，而不要在onbeforeunload设置项目。 就是说，摆脱上面，而：

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

这样，如果您清除该项（将其从本地存储中删除），则除非再次编辑该字段，否则不会将其添加回去。

Answer 2

设置/清除本地存储的代码看起来不错。 但是，输入字段不是与本地存储实时同步的，因此，如果您希望输入始终与本地存储值保持最新，则应以这种方式在clearStorage函数中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>

Answer 3

嗯，尝试在您的按钮上添加type="button" ...这样可以防止表单提交+页面重新加载+ onbeforeunload->每次都设置存储项的位置...
https://developer.mozilla.org/en/docs/Web/HTML/Element/button#attr-type