Starting to Use Web Storage in HTML5

To use Web Storage, we need to be both using HTML5 and JavaScript. Luckily Bootstrap is based on the HTML5 so that makes that part easy.

To work with web elements, we can use JavaScript to access them, or jQuery, which is a little easier to identify individual elements in a script. Luckily for us, jQuery is part of the Bootstrap collection when you build off of their blank template.

Checking Web Abilities

The first step, is more of a check, to make sure Web Storage is available for the browser.

if (typeof(Storage) !== "undefined") {
  // Code for localStorage and/or sessionStorage.
} else {
  // Sorry! No Web Storage support..
  alert('Web Storage not available on this browser.');
}

We use the typeof(Storage) to see what data type it is. This is held at the top of the document, so we don’t need to check under any elements. If it is 'undefined' then it doesn’t exist. If it comes back as something else, then it is there, and ready for us to use.

When we want to use session storage we use the object sessionStorage. Remember from before, all of it’s data is lost when the browser (tab) is closed.

If we want to use persistent storage, we use localStorage. Persistant means that the data will be there after the computer/browser/browser tab is closes/shut down. The data can stay there indefinitely.

Saving and Retrieving Data

To save and retrieve data we can perform the following:

if (typeof(Storage) !== "undefined") {
  // Code for localStorage
  // Store
  localStorage.lastname = "Jones";
  // Retrieve
  $("#lastname").value(localStorage.lastname);
} else {
  // Sorry! No Web Storage support..
  alert('Web Storage not available on this browser.');
}

This takes the local storage object, adds a key called lastname, and stores “Smith” in it. Remember, data is stored as a key/value pair in the web storage objects.

In retrieving the data, we use jQuery to find an form input element with an id of lastname, then we set it’s value.

With jQuery, any time you want to reference an element by it’s id, use the #<id name>. If you are setting the value of a form element, you can use the .value(<data>) method. If you are using another element (div, p, etc), you can use either the .html(<data>) or . text (<data>) The difference between .html() and .text() is that with html() you can write html code, such as <strong>, <em>, <p>, etc. With text(), it is faster to write, but you can only display text. Attempting to put HTML code inside of the element will not display the data as desired.

Alternate Methods to Work with the Data

Alternatively, we can use the setItem() and getItem() methods to get and set data from our storage system.

if (typeof(Storage) !== "undefined") {
  // Code for localStorage
  // Store
  localStorage.setItem('lastname', "Jones");
  // Retrieve
  $("#lastname").value(localStorage.getItem('lastname'));
} else {
  // Sorry! No Web Storage support..
  alert('Web Storage not available on this browser.');
}

Notice how it is very similar, but uses a method instead of a property to access and set the data.

We can look at using session storage in a similar manner.

$('#btnclicker').on('click', function() {
  if (localStorage.clicks) {
    // the data exists already, so convert it to a number, and increment it
    localStorage.clicks = Number(localStorage.clicks) + 1;
  } else {
    // the data doesn't already exist, so set it to one
    localStorage.clicks = 1;
  }
  // now display the results
  $('#results').text('The button has been clicked ' + localStorage.clicks +
     ' times this session.');
});

Clearing the Storage

If you want to delete all properties stored in the sessionStorage or localStorage objects, you can use the clear() function.

sessionStorage.clear(); 
localStorage.clear();

Deleting a Single Property in Storage

Now, you may not want to delete the entire storage set of data. Therefore, we have the ability to delete a single key in our storage dictionary.

sessionStorage.removeItem ("myProperty"); // using the method
delete sessionStorage.myProperty; // using the delete keyword

You can also use this with localsStorage and it will work. It just depends upon where you are storing your data.

Starting to Use Web Storage in HTML5 was originally found on Access 2 Learn