Databases
StackOverflow2013
Postsdbo
POLocalStorage, Looping through matched ID's, removing from the DOM
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLocalStorage, Looping through matched ID's, removing from the DOM
    text
    copied!<p>I have several <code>localStorage</code> Key's such as Cart, Viewed and Trash.</p> <p>The question is two fold:</p> <p>1) How might I loop though the item ID's in localStorage in the most performant way, and if an ID already exists, add a class or data attribute to the matching DOM element.</p> <p>2) What would be the best way to create individual lists of the last 20 items from 3 localStorage <code>Keys</code> (Trash, Cart, Viewed)? From a performance perspective, would it be best to do this in the same Loop function as pt1 of my question (i.e also tests if an ID exists and adds a class if true)?</p> <p>This is what I have: </p> <p>HTML</p> <p><code>&lt;article data-id="548" data-date="Mon Dec 19 09:12:57"&gt; &lt;h1&gt;&lt;a href="#"&gt;Title&lt;/a&gt;&lt;/h1&gt; // section // footer &lt;a href="#" data-context="trash"&gt;trash&lt;/a&gt; &lt;/article&gt;</code></p> <p>jQuery</p> <pre><code>$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(); }); </code></pre> <p>The Setter function. </p> <p>Variables are passed through such as <code>data-context="Trash"</code> (the key) and <code>data-id="001"</code> (id) and stored in the relevant Key.</p> <pre><code>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); } </code></pre> <p>The localStorage ends up like this : <code>Trash [{"id":"418","title":"\n\t\t\t\t\t\t\t\t\tPost Title....//..."}]</code></p> <p>Any help here would be very much appreciated.</p> <p>Happy New Year!</p> <p>Cheers Ben</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload