I have already written an article on How to display Visited Page Links with Cookies and JavaScript. So many people don't want storage data in Cookies because of  its performance.

Advantages of HTML5 Local Storage Over Cookies :

  1. HTML5 Local Storage has more Capacity of storage. Most of the browsers supports up-to 5 MB per each domain. 
  2. HTML5 Local Storage wont be with every HTTP Request. It wont create any Network overhead.
  3. Easy to use by using "key" and "value" pairs.
  4. Available for Entire Domain. ( Example... We can access local storage of  demo.sodhanalibrary.com at any page of demo.sodhanalibrary.com )
  5. Supported in Internet Explorer 8+, Firefox, Opera, Chrome, and Safari.

Steps to maintain visited page links with HTML5 Local Storage : 

  1. Maintain page views history in "history" key
  2. Check whether "history" is null or not.
  3. If "history" key is null then create one array and push present web page URL into that array.Save the array as "history" key.
  4. if "history" key is not null then display the visited page links.
  5. Check the present web page URL is there or not in the Key. If it is not there then insert it into the Key.

Code to set Key :

localStorage.history = "value";

Code to remove Key :

localStorage.history = "";

Function to Check History and Display Recently Visited Pages :

function checkHistory(targetId) {
    var history = localStorage.history;
    var htmlContent = '';
    if (history != "" && history != null) {
        var insert = true;
        var sp = history.toString().split(",");
        for ( var i = sp.length - 1; i >= 0; i--) {
            htmlContent += '<a style="color: white;" class="demo-pricing demo-pricing-1" href="'
                    + sp[i]
                    + '">'
                    + sp[i].substring(sp[i].lastIndexOf('/') + 1) + '</a><br>';
            if (sp[i] == document.URL) {
                insert = false;
            }
            document.getElementById(targetId).innerHTML = htmlContent;
        }
        if (insert) {
            sp.push(document.URL);
        }
        localStorage.history = sp.toString();
    } else {
        var stack = new Array();
        stack.push(document.URL);
        localStorage.history = stack.toString();
    }
}

Function to Clear History and  Recently Visited Page Links :

function clearHistory(targetId) {
    localStorage.history = "";
    document.getElementById(targetId).innerHTML = "";
    alert("Visited page links were cleared");
}

Usage :

// Display recently visited pages in "recentPageViews" HTML DIV
checkHistory("recentPageViews");

// Clear pages links
clearHistory("recentPageViews")

3 comments:

  1. HTML5 Local Storage wont be with every HTTP Request. It wont create any Network overhead. hostgator coupons

    ReplyDelete
  2. Nice post about the HTML5 and new features in HTML can help you design a good website.
    web design company Columbus

    ReplyDelete
  3. I want to always read your blogs. I love them Are you also searching for Nursing Pico Writing Help? we are the best solution for you. We are best known for delivering Nursing Pico writing services to students without having to break the bank

    ReplyDelete

Blogroll

Popular Posts