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

【问题标题】：trying to remove item from localstorage using the key name尝试使用键名从本地存储中删除项目
【发布时间】：2017-04-10 23:26:57
【问题描述】：

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

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

}

按钮点击代码块的sn-p使用key-name清除localstorage数据

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

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

【问题讨论】：

你在哪里设置输入的值？尝试创建一个小提琴来演示这个问题。
如何以及何时调用您的设置项？你看到 clearstorage 的警报了吗？
检查我的编辑。
@Christoph 是的，我愿意
可能是 - 它被删除了，但由于您的window.onbeforeunload = function() { 它被再次添加并导致按钮提交（默认情况下没有类型）将在本地存储中重新加载您的项目？！跨度>

标签： javascript jquery html local-storage

【解决方案1】：

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

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

您必须决定何时设置该项目。即使您之前已清除，上述内容始终会执行此操作。

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

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

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

【讨论】：

在刷新页面时尝试了您的 sn-p，提示为空
@parker: 不，它没有：jsfiddle.net/un86not0/1（我在on 语句中遗漏了#，但这并不能让它提醒null。）
确实想多了，但清除不是实时的，我必须在单击按钮后清除页面之前刷新页面
@parker：清除本地存储确实是实时的。如果您想要更改 input，您必须添加代码来执行此操作。没有什么能神奇地将input 链接到localStorage；这就是你的代码的工作。
@parker：问问自己：如何设置input 的值？

【解决方案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>

【讨论】：

使用您的方法不会存储本地存储。如果我刷新页面，我需要保留 localstroge 数据，并且只有单击清除按钮才能清除它
正确，localstorage 没有被存储，因为我没有在我的 sn-p 中实现 localStorage.setItem 方法。我无法理解该部分是如何工作的，因为当您刷新页面时，输入字段最初是“空的”。我相信您需要另一个按钮来将这些信息保存在本地存储中。类似“<button onclick="saveStorage()">save</button>function saveStorage() { localStorage.setItem("first_name", $('#inputName').val()); }你觉得有意义吗？
已更新。看看
我认为出于某种原因我需要 unbeforeload 函数

【解决方案3】：

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

【讨论】：

添加了类型按钮但仍然无效>>>>>>
你是否通过调试器检查过（在localStorage.removeItem('first_name'); 之后设置一个断点）并检查你的项目是否被删除 - 它绝对应该被删除！但是在你的 onbeforeunload 上，你每次都添加它 - + 删除 onbeforunload - 你应该看到它会起作用；）