Question

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

    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>

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

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函数内更新它。如果您使用此方法，也不需要刷新页面：

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 - ＆gt;每次存储项目设置的位置...
https://developer.mozilla.org/en/docs/Web/HTML/Element/button#attr-type

尝试使用键名从localstorage中删除项目

3 个答案: