The browser storage is a confortable and complete way to save your data on the client side using your web application. Since it is a quite new functionality, it needs to work with recent web browsers. For example, you can store data you want to keep in the client side during the web browsing.

Basics:

In this link and in this other link you can find well detailed explanations. As you can see in the links, there are three type of storage:

  1. Local storage: it provides access to data from different tabs and even if you turn off the computer.
  2. Database storage: session and local storage are both string-based key-value pairs. Database storage allows you to save structured data in the client’s machine using a real SQL database.
  3. Session storage: it should be used to store ephemeral data related to a single browser window as it doesn’t persist after the window is closed.

Main difference with cookies: the cookies are stored on the client side, but read by the server. The browser storage, instead, is read by the client.

Client-side storage is probably one of the most talked about features in HTML 5. It has received a lot of criticism because of its lack of security, but it is nonetheless an interesting innovation.

Now I’ll show you some javascript functions to use the Local Storage.

This first function saves the data in storage. If you want to save also who saved the data and when he did it, this function automatically saves this information in the local storage. Looking the input values, key is the name to be given to key in storage and value is the string to save (you can save only strings!).

function storageIt(key, value)
{
    localStorage.setItem(key, value);
    localStorage.setItem(key + 'timestamp', new Date().getTime());
    localStorage.setItem(key + 'user', jQuery("#username").text());
}

This second function provides a fast method to delete data. Give it in input a list of key and it will erase them from the local storage.

function clearStorage(listKey)
{
    for (var i = 0; i < listKey.length; i++)
    {
        localStorage.removeItem(listKey[i]);
    }
}

This last function is a sample for checking if some data exists in the local storage. This works in a web application using working session (example: the users have to do a long operation and they don’t have enough time to do it). In this code, if data exists, it shows a pop up asking to the user what to do: restore the session or delete it.

function checkStorage(listKey, oTable)
{
    if (localStorage.getItem(listKey[0]))
    {
        var username = localStorage.getItem(listKey[0] + 'user');
        var timestamp = localStorage.getItem(listKey[0] + 'timestamp');
        var d = new Date(timestamp*1);
        jQuery("#dialogMessage").text("Something bad happened, but we saved the data (actions made by "+username+" the "+d+"). What do you want to do?");
        jQuery( "#dialog" ).dialog
        ({
            resizable: false,
            height:200,
            width:340,
            modal: true,
            draggable :false,
            buttons:
            {
                "Restore Old Data": function()
                 {
                    restoreData(listKey);
                    jQuery( this ).dialog( "close" );
                 },
                "Delete Old Data": function()
                {
                    clearStorage(listKey);
                    jQuery( this ).dialog( "close" );
                }
            }
        });
    }
}

Let’s suppose you have a submission form and you write some data of it in the local storage with a key name username + formName. The user john.smith write something and, for some reasons, exits from the window. When he will come back, the function will check the key john.smithformName and will ask if restore the previous data session or start a new one.

Advertisements