How can i delete specific item from LocalStorage

Question

There is a lot of value in my local store and I want to delete some of them. When I click on the dynamic card I created, it should be deleted both normally and locally. I can normally delete it but I can not delete it from local.

The local storage event is very confusing and does not have a lot of explanatory resources. at least i could not find it. Thank you for your help already.

This is codepen

$('#field').keypress(function (e) { if (e.keyCode === 13 && !e.shiftKey) { e.preventDefault(); if ($('#field').val() === '') return false; let comment = { card: $('#field').val(), id: generateGUID() }; $('#field').val('') var store = JSON.parse(localStorage.getItem('todo')) || []; store.push(comment); localStorage.setItem('todo', JSON.stringify(store)); $(this).val(''); displayComment(comment); } }); function displayComment(comment) { var html = $(`<div class="card" data-id="${comment.id}"><h5>${comment.card}</h5></div>`); $('.yorum').append(html); $('.yorum').find(html).click(function () { $(html).remove(); }); } var store = JSON.parse(localStorage.getItem('todo')) || []; store.forEach(displayComment);

Samvel Petrosov · Accepted Answer · 2018-07-31 08:03:01Z

Try to use localStorage.removeItem('ITEM_NAME') method of the localStorage object.

Here is an example of creation, getting and removing items in the localStorage

localStorage.setItem('aaa','1231') //undefined localStorage.getItem('aaa') //"1231" localStorage.removeItem('aaa') //undefined localStorage.getItem('aaa') //null

Here is example of code for your case:

function displayComment(comment) { var html = $(`<div class="card" data-id="${comment.id}"><h5>${comment.card}</h5></div>`); $('.yorum').append(html); $('.yorum').find(html).click(function () { $(html).remove(); var arr = JSON.parse(localStorage.getItem('todo')); for(var i=0;i<arr.length;i++) { if(arr[i].id=this.getAttribute('data-id')) { arr.splice(i,1); break; } } localStorage.setItem('todo', JSON.stringify(arr)); }); }

@ÖmerDoğan what do you mean by saying everything? it will delete only item with the specific key in the localStorage
@ÖmerDoğan in your implementation you will have to get the array with localStorage.getItem(), remove the todo with specified ID from it and write new array with localStorage.setItem(); on the same todo key.
yes it was descriptive indeed but local storage really complex. i cant understand. :(
Yes. This time happened and i think its was nice way to this project. Thanks.

Ted Bigham · Accepted Answer · 2018-07-31 07:44:36Z

Inside your click handler you also have to get your parsed local store value then call splice(index, 1) passing the entry number as "index".

Something like...

$('#field').keypress(function (e) { if (e.keyCode === 13 && !e.shiftKey) { e.preventDefault(); if ($('#field').val() === '') return false; let comment = { card: $('#field').val(), id: generateGUID() }; $('#field').val('') var store = JSON.parse(localStorage.getItem('todo')) || []; store.push(comment); localStorage.setItem('todo', JSON.stringify(store)); $(this).val(''); displayComment(comment, store.length-1); } }); function displayComment(comment, index) { var html = $(`<div class="card" data-id="${comment.id}"><h5>${comment.card}</h5></div>`); $('.yorum').append(html); $('.yorum').find(html).click(function () { $(html).remove(); var store = JSON.parse(localStorage.getItem('todo')) || []; store.splice(index, 1); localStorage.setItem('todo', JSON.stringify(store)); }); } var store = JSON.parse(localStorage.getItem('todo')) || []; store.forEach(displayComment);

Yess! this is what i want dude. But not useful. it is not working properly. some cards made an error.
Yes. I think using an object instead of an array for your storage would make it work better. Use comment.id as the key then “delete storage[comment.id]” in your click handler instead of splice.

Malay Solanki · Accepted Answer · 2018-07-31 07:34:06Z

0

localStorage.removeItem(key);

Replace key as per requirement

answered Jul 31, 2018 at 7:34

Malay Solanki

1102 silver badges10 bronze badges

5 Comments

Ömer Doğan Over a year ago

if im do this will be delete every value.

Malay Solanki Over a year ago

No it will remove specific key

Ömer Doğan Over a year ago

but my case all value in one array. if i use this method everything will be delete.

Beginner Over a year ago

so can you give the data structure of your array

Malay Solanki Over a year ago

than please use like localStorage.removeItem(yourArray['speciic_key']);

Osakr · Accepted Answer · 2018-07-31 07:44:34Z

All answers are well. How ever you also can do like this:

localStorage[key] = undefined;

Since localstorage is a key-value object

Collectives™ on Stack Overflow

How can i delete specific item from LocalStorage

4 Answers 4

5 Comments

2 Comments

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

5 Comments

Comments

Related