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

我试图从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

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

}

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

  clear 

单击按钮以尝试从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以这种方式在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应该更新为：

  save clear 

Answer 3

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