LocalStorage, Looping through mapped identifiers, removal from the DOM

Question

I have several localStorage keys such as Recycle Bin, View, and Recycle Bin.

Question two times:

1) How can I execute a loop, although the identifier of an element in localStorage is the most efficient way, and if the identifier already exists, add a class or data attribute to the corresponding DOM element.

2) What would be the best way to create separate lists from the last 20 items from 3 localStorage Keys (Trash, Trash, Viewed)? In terms of performance, it would be better to do this in the same Loop function as pt1 of my question (for example, also checks if an identifier exists and adds a class if true)?

This is what I have:

HTML

<article data-id="548" data-date="Mon Dec 19 09:12:57"> <h1><a href="#">Title</a></h1> // section // footer <a href="#" data-context="trash">trash</a> </article>

JQuery

 $tools.on("click", "a", function(e){ var storeId = $(this).attr('data-context'); var selector = $(this).closest('article'); var dataId = selector.attr('data-id'); var pubDate = selector.attr('data-date'); var postUrl = selector.find('a', 'h1').attr('href'); var postTitle = selector.find('h1').text(); var $removable = $container.find( selector ); setLocalStorage(storeId, dataId, postUrl, postTitle, pubDate); if (storeId == "Trash") { $container.isotope( 'remove', $removable ); }; e.preventDefault(); }); 

Function setter.

Variables are transmitted via data-context="Trash" (key) and data-id="001" (id) and stored in the corresponding key.

 function setLocalStorage(itemKey, dataId, postUrl, postTitle, postPub) { var ItemKey = itemKey; var timeStamp = new Date(); var json = JSON.parse(localStorage.getItem(ItemKey)); if(json == null) json = []; json.push({id:dataId,title:postTitle,url:postUrl,postPub:postPub,dataTimeStamp:timeStamp}); // save the result array sessionStorage.setItem(ItemKey, JSON.stringify(json)) // Notify user item added to Cart updateNotifications(ItemKey, json); } 

LocalStorage ends as follows: Trash [{"id":"418","title":"\n\t\t\t\t\t\t\t\t\tPost Title....//..."}]

Any help here would be greatly appreciated.

Happy New Year!

Cheers Ben

Answer 1

Save one object in the key. Then work on the object after parsing it.

 var mysite = $.parseJSON(localStorage['mysite']); 

You can save all states in an array of identifiers (e.g.

 { cart:[idA,idB], viewed:[idZ,idX], trashed:[id1,id2] } 

Then change the state and invalidate the objects representing the state values. I'm not sure what you are trying to accomplish, but maybe look at the elements, move to the div that is below the folds, the baskets and basket elements will go to reps hidden divs, and the corresponding icons will be updated with the corresponding counts, etc.

If these elements are stored in your database, but are not generated on each page, you can ajax request element data for this identifier and generate your states from the objects that were received when you needed them.

Perhaps you want all this data to be stored locally because it was not stored in db somewhere, more information might be useful.