Recently visited Page Links with Cookies and JavaScript

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")

DEMO

11 comments:

Just Jen18 April 2014 at 13:48
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!)
JEMoptical.com19 November 2014 at 03:15
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
Unknown22 August 2016 at 22:05
Please tell me steps. How to integrate it ?
thanks in advance.
Unknown23 August 2016 at 04:40
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.
Unknown16 January 2017 at 14:00
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
David29 March 2019 at 21:27
This is great. It would be awesome if we could download the final script in github or on here. Thanks!
Unknown11 June 2019 at 05:07
Instead of showing all visited pages, Is it possible to show only last visited page?
Unknown7 October 2020 at 04:38
Hello, I would like to thank you for sharing this useful material. The information you have mentioned here will be useful. I would like to share with you all one useful source https://writer-elite.com/book-reports-online/ which might be interesting for you as well.
Cheap Assignment Writers16 July 2021 at 23:24
Your blogs are great.Are you also searching for Nursing Writing Help? we are the best solution for you. We are best known for delivering nursing writing services to students without having to break the bank.

→	Convert XML or JSON to Java Pojo Classes
→	Change Icon Color Online

SodhanaLibrary