LocalStorage, Looping through matched ID's, removing from the DOM

Question

I have several localStorage Key's such as Cart, Viewed and Trash.

The question is two fold:

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.

2) What would be the best way to create individual lists of the last 20 items from 3 localStorage Keys (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)?

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();
    });

The Setter function.

Variables are passed through such as data-context="Trash" (the key) and data-id="001" (id) and stored in the relevant 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);
    }

The localStorage ends up like this : Trash [{"id":"418","title":"\n\t\t\t\t\t\t\t\t\tPost Title....//..."}]

Any help here would be very much appreciated.

Happy New Year!

Cheers Ben

score 0 · Answer 1 · answered Jun 01 '12 at 15:02

Store an single object in a key. Then work on the object once its parsed.

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

You might store all states in an array of ids vector (e.g.

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

Then change the state and invalidate the objects that represent the state values. Im not sure what you are trying to accomplish, but maybe viewed items move themselves to a div that is below the fold, trash and cart items move themselves to repsective hidden divs and and respective icons are updated with the appropriate counts, etc...

If these items are stored in your DB but not generated on every page you could ajax request the item data for the given id's and generate your states from the objects retrieved when you need them.

Maybe you want all this data stored locally because its not stored in a db someplace, more information might be helpful.

LocalStorage, Looping through matched ID's, removing from the DOM

1 Answers1