In this article, we will be enhancing an example begun in an earlier blog, A Drag and Drop Planning Board with HTML5. This example built a simple agile planning board with two notecards that you could drag and drop onto different sections of the board. In this article, we’ll review how to actually store the last location of each of the cards, so when you return to the site, the cards are where you left them.

You can find the completed example on github. However, I encourage you to start with the initial page, and try to build in the saving of the notecards with me throughout this article.

There are two kinds of storage defined in Web Storage: Session Storage and Local Storage.

Session Storage solves a problem that’s plagued us with cookies: accidentally purchasing two copies of the same item. Assume that you’re shopping for plane tickets online, and you have multiple windows open to try and find the best deal. Even though you have multiple windows open, if the site is using cookies to track your orders, the cookies are all shared across the multiple windows. This could result in accidentally purchasing the same ticket twice.

SessionStorage solves this problem for us. With Session Storage, we have a separate data store for each window or tab that’s open. The data is not persisted beyond a session, so if you close the window or tab, the data disappears. But, while you’re shopping, the data in one window will be kept completely separate from that in another window if the site leverages the session storage data store.

But what about values you do want to save to disk? In our planning board, we want to be able to remember the last location of the notecards we dragged and dropped. To store their last location, we’ll need to take advantage of the second kind of Web Storage, called Local Storage.

Local Storage provides a persistent data store of up to 5MB. One important thing to note about Local Storage is that each browser will have its own, individual 5MB store, and data is not shared between browsers.

Data saved using Local Storage are stored as key/value pairs. A key/value pair is a common way to store data by keeping track of two pieces of information: the key, and the value. The key describes what the information is, and the value is the actual piece of data you would like to associate with the key.

Local Storage provides us with an object, named localStorage, that allows us to get and set our key/value pairs.  Both values must be saved as strings—even if we will convert them to other data types later.  To set a key/value pair, we call: localStorage[key] = “value”.  To get a value from a given key, we call: var myValue = localStorage[key].

We’ll leverage this localStorage object in order to store the locations of the two notecards. First, we’ll define a function called saveLocations that will save the locations of the notecard and the parent we dropped it into:

function saveLocations(parent, notecard){
    // save the locations of notecards after each drop event
    // grab the notecard via jQuery using ids
    var parentId = parent.getAttribute('id');
    var key = notecard + "parent";
    // store the notecard's parent id in localStorage
    localStorage[key] = parentId;
}

We get the id of the parent by calling parent.getAttribute(‘id’). Next, we create a key that is the concatenation of the notecard’s id (which will be passed to the function as the second argument) and the word “parent”. So, for example, the key for the parent of the first notecard will be “item1parent”.  As a final step, we go ahead and store the parentId value in the localStorage collection, under the value stored in the key variable.

Let’s call saveLocations after an item is dropped, so we can be sure that every time an item is moved via drag and drop, we save the new location to localStorage. We’ll add it to the end of the anonymous function that’s bound to the drop event in the init() method. We wrote this code when we first created this example, in A Drag and Drop Planning Board with HTML5. Here, we’re simply adding the line at the end:

// bind the drop event on the board sections
      $('#todo, #inprogress, #done').bind('drop', function(event){
          var notecardId = 
event.originalEvent.dataTransfer.getData("text/plain");

event.target.appendChild(document.getElementById(notecardId));
          event.preventDefault();
          saveLocations(event.target, notecardId); 
      });

We pass the event.target, which is one of the bulletin boards, and the id of the notecard that was dragged and dropped.

So now we are saving the new locations, but what about loading these saved values once we reload the page?

To re-load the values saved to localStorage, we’ll create another new function called loadLocations. First, we retrieve the parent of both notecards by accessing the values stored in the keys “item1parent” and “item2parent”:

function loadLocations(){
    // find the parent for item1 and item2
    var item1parent = localStorage['item1parent'];
    var item2parent = localStorage['item2parent'];
}

Next, we will test to ensure there is a value stored in each new variable. If there is, we must remember that the value stored is a string, not an object. In order to get the actual HTML element of the parent, we must grab the element by its id via document.getElementById(). We do the same thing for the notecards. Finally, we will go ahead and move the notecards from their default location in the first section of the bulletin board to their actual last location, by appending the notecard element into the parent element:

function loadLocations(){
    // find the parent for item1 and item2
    var item1parent = localStorage['item1parent'];
    var item2parent = localStorage['item2parent'];

    if (item1parent) { 
        var parent1 = document.getElementById(item1parent);
        var notecard1 = document.getElementById('item1');
        parent1.appendChild(notecard1);
    }
}

We repeat the same process for the second item’s parent:

function loadLocations(){
    // find the parent for item1 and item2
    var item1parent = localStorage['item1parent'];
    var item2parent = localStorage['item2parent'];

    if (item1parent) {
        var parent1 = document.getElementById(item1parent);
        var notecard1 = document.getElementById('item1');
        parent1.appendChild(notecard1);
    }

    if (item2parent) {
        var parent2 = document.getElementById(item2parent);
        var notecard2 = document.getElementById('item2');
        parent2.appendChild(notecard2);
    }
}

As a final step, we’ll call loadLocations() from the init() method we created in the initial example, in A Drag and Drop Planning Board with HTML5:

function init(){
  loadLocations();
  .
  .
  .
}

Now, when we move the cards around the bulletin board, even if we close and re-open the site, the cards will be where we left them, all thanks to Web Storage!

There’s plenty more HTML5 goodness coming very, very soon in HTML5 and CSS3 for the Real World, co-authored by Estelle Weyl, Louis Lazaris and yours truly.

In the meantime, tell us your thoughts about using Drag and Drop with Local Storage.

Source Link: http://www.sitepoint.com/a-better-cookie-html5-and-web-storage/