Websites like Reddit displaying recently visited links for quick reference purpose.
If you have a website with lot of page links its better to show the history of visited pages.

Advantages of maintaining recently visited pages using cookies :

1. Available for both authenticated and un-authenticated users.
2. No need to maintain data at server side.
3. Cookies does have high browser support.

Steps to maintain visited page links with Cookies 

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

JavaScript function to set Cookie :

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + '=' + cvalue + ';path="/";' + expires;
}

JavaScript function to get Cookie :

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for ( var i = 0; i < ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0)
            return c.substring(name.length, c.length);
    }
    return "";
}

JavaScript function to Check Cookies and Display Recently Visited Pages

function checkHistory(targetId) {
    var history = getCookie("history");
    var htmlContent = '';

    if (history != "") {
        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);
        }
        setCookie("history", sp.toString(), 30);
    } else {
        var stack = new Array();
        stack.push(document.URL);
        setCookie("history", stack.toString(), 30);
    }
}

JavaScript function to Clear Cookie or History

function clearHistory(targetId) {
    setCookie("history", "", -1);
    document.getElementById(targetId).innerHTML = "";
}

Usage :

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

// Clear pages links
clearHistory("recentPageViews")

7 comments:

  1. Kuddos on the script. I'm attempting to integrate this into my website, but ideally the link would display the document.title anstead of the URL (but remain a working link) Thoughts on how to go about this? (I am not a JS person!)

    ReplyDelete
    Replies
    1. Instead of creating Array() Object create like this

      var jsonArr = [];
      jsonArr.push({
      title: document.title,
      link: document.URL
      });

      Delete
  2. Good Day, Thank you for your script. I have had good success getting it to work in Chrome and Firefox but it will not run in IE11, I even went back to IE8 to try it with no success there either? Any suggestions on ho to get it work in IE. Thanks

    ReplyDelete
  3. Please tell me steps. How to integrate it ?
    thanks in advance.

    ReplyDelete
  4. yes, i got.. how to integrate. Its working... Nice script!
    but script show links of the visited pages.
    What i should do to show title of the page or name of the link instead of only link.
    please help me.

    ReplyDelete
    Replies
    1. Instead of creating Array() Object create like this

      var jsonArr = [];
      jsonArr.push({
      title: document.title,
      link: document.URL
      });

      Delete
  5. On the off chance that you conceptualize you are beneficial to understand the technique for mentoring you can then prepare on your guideline by applying. Java

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts