I have already written an article on How to display visited Page Links with Cookies and JavaScript. Now I am going to do same thing with jQuery. Here to maintain history of visited pages we need Cookies. Carhartl has written one jquery-cookie plugin to maintain Cookies with jQuery. Download jquery-cookie plugin at https://github.com/carhartl/jquery-cookie


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.

Install jquery-cookie plugin :

<script src="/js/jquery.cookie.js"></script>

jQuery code to set Cookie :

$.cookie('history', cookieValue, { expires: 30, path: '/' });

jQuery code to remove Cookie :

$.removeCookie('history', { path: '/' });

Function to Check Cookies and Display Recently Visited Pages :

function checkHistory(targetId) {
    var history = $.cookie('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;
            }
            $('#'+targetId).html(htmlContent);
        }
        if (insert) {
            sp.push(document.URL);
        }
        $.cookie('history', sp.toString(), { expires: 30, path: '/' });
    } else {
        var stack = new Array();
        stack.push(document.URL);
        $.cookie('history', stack.toString(), { expires: 30, path: '/' });
    }
}

Function to Clear Cookie and  Recently Visited Page Links :

function clearHistory(targetId) {
    $.removeCookie('history', { path: '/' });
    $('#'+targetId).html("");
    alert("Visited page links were cleared");
}

Usage :

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

// Clear pages links
clearHistory("recentPageViews")

5 comments:

  1. Nice script! I got a question though; is it also possible to show only the latest 5 entries?

    ReplyDelete
    Replies
    1. Figure it out;

      I added a variable 'count' to the checkHistory function;

      - checkHistory("recentPageViews", 5)
      - function checkHistory(targetId, count)

      Then handled the sp array as a queue, shifting the last item if the count is reached;
      ....
      if (insert) {
      sp.push(document.URL);
      if ((sp.length - 1) == count)
      sp.shift();
      }
      ....;

      Greetings, Richard

      Delete
  2. Nice script, where can I download the demo files? Is it possible?
    Thanks!

    ReplyDelete
  3. It would good to have jQuery:
    1. Related Posts with Thumbnails, for installation in the bottom of the page.
    2. Popular Pages with Thumbnails, for display in the sidebar.
    If anyone knows where it is possible download the plug-in, with installation instructions, please give a link.

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts