如何删除 localStorage 中的特定 item/object?
How to delete a specific item/object in localStorage?
原来我的 localStorage["items"] 将我的 JSON 存储为字符串。
"["{\"itemId\":1, \"itemName\":\"item1\"}", "{\"itemId\":2, \"itemName\":\"item2\"}",
"{\"\":3, \"itemName\":\"item3\"}",]"
这是我 JSON.parse(localStorage["items"]):
时的样子
["{"itemId":1, "itemName":"item1"}", "{"itemId":2, "itemName":"item2"}"
"{"itemId":3, "itemName":"item3"}"]
所以在我的循环中,我使用 jQuery.parseJSON
:
将它变成了一个对象
var object = jQuery.parseJSON(item[i]);
现在,我要做的是删除 itemId = 3
所在的对象,并确保该对象已从 localStorage 中完全删除。
这是我目前的Javascript:
$("#button_delete").on("click", function(e){
e.preventDefault();
var items = JSON.parse(localStorage.getItem('items'));
for (var i = 0; i < items.length; i++) {
var object = JSON.parse(items[i]);
if(object.request_id == 3){
console.log(items)
delete items[i] // slice doesn't work not sure why
console.log(items)
}
}
item = JSON.stringify(items);
console.log(item);
localStorage.setItem('items', item);
})
已更新
当我现在点击按钮时,它会删除该项目,但不会删除它前面的逗号。
当我在浏览器中检查 localStorage["items"] 时,它 returns 是这样的:
"["{\"itemId\":1, \"itemName\":\"item1\"}","{\"itemId\":2, \"itemName\":\"item2\"}",null]"
我有另一个页面将在 html 中显示信息,它 returns 错误:
Uncaught TypeError: Cannot read property 'itemId' of null
.
那么现在有没有办法在 localStorage["items"] 中检查或搜索专门针对 ,null
的内容并将其删除,这样错误就不会显示了?
关于如何在 HTML 中显示信息的代码:
var items = JSON.parse(localStorage.getItem('items'));
var itemsHTML = "";
for(var i = 0; i < items.length; i++){
var object = jQuery.parseJSON(items[i]);
var displayItemId = object.itemId;
var displayItemName = object.itemName;
itemsHTML += "<li id="+displayItemId+">"+displayItemName+"</li>";
}
$("#viewItemList").html(itemsHTML);
试试这个。
$("#button_delete").on("click", function(e){
e.preventDefault();
var items = JSON.parse(localStorage["items"]);
for (var i = 0; i < items.length; i++) {
if(items[i].itemId == 3){
items.splice(i,1);
break;
}
}
})
localstorage 只能包含字符串
所以首先你必须解析本地存储中的项目(就像你现在做的那样)
从中删除不需要的元素。
再次序列化为JSON并存储在localstorage中。
这是方法
var items = localStorage["items"];
for (var i =0; i< items.length; i++) {
var item = JSON.parse(items[i]);
if (item.itemId == 3) {
items.slice(i);
break;
}
}
// Don't forget to store the result back in localStorage
localStorage.setItem("items", items);
所有答案都正确,但你必须 :
- 将 localStorage 中的字符串解析为 JSON(你这样做了)
- 删除不需要的项目(使用 slice() )
- 将JSON设为字符串
- 在localStorage中重新设置
所以 :
1.
var items = JSON.parse(localStorage.getItem("items")); // updated
2.
for (var i =0; i< items.length; i++) {
var items = JSON.parse(items[i]);
if (items.itemId == 3) {
items.splice(i, 1);
}
}
3.
items = JSON.stringify(items); //Restoring object left into items again
4.
localStorage.setItem("items", items);
解析为 JSON 并将其存储为字符串有点烦人,但这就是 localStorage 的工作方式。
如果您知道特定项目的 key
- 像这样简短明了:
if (localStorage.getItem('key_to_remove') != null)
localStorage.removeItem('key_to_remove');
eliminar(est: string) {
//estudiantes ES LA KEY
var items = JSON.parse(localStorage.getItem('estudiantes'));
for (var i = 0; i < items.length; i++) {
var item = items[i];
if(item.id == est){
items.splice(i,1);
}
}
items = JSON.stringify(items);
localStorage.setItem('estudiantes', items);
this.getAll();
}
原来我的 localStorage["items"] 将我的 JSON 存储为字符串。
"["{\"itemId\":1, \"itemName\":\"item1\"}", "{\"itemId\":2, \"itemName\":\"item2\"}",
"{\"\":3, \"itemName\":\"item3\"}",]"
这是我 JSON.parse(localStorage["items"]):
时的样子["{"itemId":1, "itemName":"item1"}", "{"itemId":2, "itemName":"item2"}"
"{"itemId":3, "itemName":"item3"}"]
所以在我的循环中,我使用 jQuery.parseJSON
:
var object = jQuery.parseJSON(item[i]);
现在,我要做的是删除 itemId = 3
所在的对象,并确保该对象已从 localStorage 中完全删除。
这是我目前的Javascript:
$("#button_delete").on("click", function(e){
e.preventDefault();
var items = JSON.parse(localStorage.getItem('items'));
for (var i = 0; i < items.length; i++) {
var object = JSON.parse(items[i]);
if(object.request_id == 3){
console.log(items)
delete items[i] // slice doesn't work not sure why
console.log(items)
}
}
item = JSON.stringify(items);
console.log(item);
localStorage.setItem('items', item);
})
已更新
当我现在点击按钮时,它会删除该项目,但不会删除它前面的逗号。
当我在浏览器中检查 localStorage["items"] 时,它 returns 是这样的:
"["{\"itemId\":1, \"itemName\":\"item1\"}","{\"itemId\":2, \"itemName\":\"item2\"}",null]"
我有另一个页面将在 html 中显示信息,它 returns 错误:
Uncaught TypeError: Cannot read property 'itemId' of null
.
那么现在有没有办法在 localStorage["items"] 中检查或搜索专门针对 ,null
的内容并将其删除,这样错误就不会显示了?
关于如何在 HTML 中显示信息的代码:
var items = JSON.parse(localStorage.getItem('items'));
var itemsHTML = "";
for(var i = 0; i < items.length; i++){
var object = jQuery.parseJSON(items[i]);
var displayItemId = object.itemId;
var displayItemName = object.itemName;
itemsHTML += "<li id="+displayItemId+">"+displayItemName+"</li>";
}
$("#viewItemList").html(itemsHTML);
试试这个。
$("#button_delete").on("click", function(e){
e.preventDefault();
var items = JSON.parse(localStorage["items"]);
for (var i = 0; i < items.length; i++) {
if(items[i].itemId == 3){
items.splice(i,1);
break;
}
}
})
localstorage 只能包含字符串
所以首先你必须解析本地存储中的项目(就像你现在做的那样)
从中删除不需要的元素。
再次序列化为JSON并存储在localstorage中。
这是方法
var items = localStorage["items"];
for (var i =0; i< items.length; i++) {
var item = JSON.parse(items[i]);
if (item.itemId == 3) {
items.slice(i);
break;
}
}
// Don't forget to store the result back in localStorage
localStorage.setItem("items", items);
所有答案都正确,但你必须 :
- 将 localStorage 中的字符串解析为 JSON(你这样做了)
- 删除不需要的项目(使用 slice() )
- 将JSON设为字符串
- 在localStorage中重新设置
所以 :
1.
var items = JSON.parse(localStorage.getItem("items")); // updated
2.
for (var i =0; i< items.length; i++) {
var items = JSON.parse(items[i]);
if (items.itemId == 3) {
items.splice(i, 1);
}
}
3.
items = JSON.stringify(items); //Restoring object left into items again
4.
localStorage.setItem("items", items);
解析为 JSON 并将其存储为字符串有点烦人,但这就是 localStorage 的工作方式。
如果您知道特定项目的 key
- 像这样简短明了:
if (localStorage.getItem('key_to_remove') != null)
localStorage.removeItem('key_to_remove');
eliminar(est: string) {
//estudiantes ES LA KEY
var items = JSON.parse(localStorage.getItem('estudiantes'));
for (var i = 0; i < items.length; i++) {
var item = items[i];
if(item.id == est){
items.splice(i,1);
}
}
items = JSON.stringify(items);
localStorage.setItem('estudiantes', items);
this.getAll();
}