尝试使用密钥名称从本地存储中删除项目

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

}

按钮点击的片断代码块使用th清除本地存储数据单击按钮时在试图从localStorage的全歼数据和刷新页面e键名

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

，在localStorage的数据仍然是在输入值。如何清除本地存储内容是我的挑战

来源

2017-04-10 parker

你在哪里设置输入值？尝试创建一个演示这个问题的小提琴。 – Cristy

您的设置项目如何以及何时被调用？你看到清除存储的警报吗？ – Christoph

检查我的编辑。 – parker

你成功删除项目 —然后当你刷新，你重新设置它，你离开页面，因为你还有：

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

你必须决定何时要设置的项目。以上将始终这样做，即使您之前已清除它。

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

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

这样一来，如果你清除的项目（从本地存储中删除），它不会重新添加，除非你再次编辑的字段。

来源

2017-04-10 14:24:54

在刷新页面时试过了你的代码片段，提醒为null – parker

@parker：不，它不是：https://jsfiddle.net/un86not0/1/（我在'on'语句中缺少'＃'但这并没有让它警觉'空'。） –

肯定的想法一样多，但清理并不是实时的，我必须刷新页面，然后点击按钮 – parker

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

来源

2017-04-10 13:00:44 andreasonny83

本地存储不存储。我需要刷新页面让本地数据被保留，并且只有在清除按钮 – parker

正确后才能清除，localstorage不会被存储，因为我没有在我的代码片段中实现localStorage.setItem方法。我无法理解该部分是如何工作的，因为当您刷新页面时，默认情况下，输入字段默认为“空白”。我相信你需要另一个按钮来将这些信息保存在本地存储器中。例如“'''saveStorage（）{localStorage.setItem（”first_name“，$（'＃inputName'）。val（））;}' 对你有什么意义？ – andreasonny83

可以编辑你的解决方案 – parker

-1

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

来源

2017-04-10 13:11:19 MarcelD

加了type button但是还是不行>>>>>> – parker

你是否通过调试器检查过（在localStorage.removeItem（'first_name'）;'后面设置一行断点并检查你的项目是否被删除 - 它肯定应该被删除！！但在你的onbeforeunload你添加它每次再次 - +删除onbeforunload - 你应该看到它会工作;） – MarcelD

不明白为什么它是downv oted！？ – MarcelD

尝试使用密钥名称从本地存储中删除项目

回答

相关问题