How do I show a message box only the first time a page loads, using JavaScript / jQuery?

Question

I want to show a message box , only the first time a webpage loads. If the user refreshes, it should no longer show up. The message should show up regardless of whether the user is already logged in or not.

Are cookies the only way to do this or there are any JavaScript library which can take of this? The technology stack is jQuery /JavaScript and PHP.

Answer 1

Cookies is not the only way, you can use localStorage , Try this:

if(localStorage.getItem("firstTime")==null){
   alert("First Time Alert");
   localStorage.setItem("firstTime","done");
}

Answer 2

You should use your server side language(php) to store a session variable. Sessions store data across page loads.

Answer 3

If you have some way of preserving the state of the user (if they have visited that page or not), then you could pass that to the page and tell it to show the message while flagging the page as 'visited' on the server side (in the database, or wherever you are keeping that user/page data).

If you aren't maintaining that information anywhere, then you'll need to use cookies, or localStorage; however, this data can be lost (if the user clears it), and then the message will show again.

Answer 4

Here is a really good lightweight plugin that I use sometimes.

// plugin start //
    // First Time Visit Processing
    // copyright 10th January 2006, Stephen Chapman
    // permission to use this Javascript on your web page is granted
    // provided that all of the below code in this script (including this
    // comment) is used without any alteration
    function rC(nam) {var tC = document.cookie.split('; '); for (var i = tC.length - 1; i >= 0; i--) {var x = tC[i].split('='); if (nam == x[0]) return unescape(x[1]);} return '~';} function wC(nam,val) {document.cookie = nam + '=' + escape(val);} function lC(nam,pg) {var val = rC(nam); if (val.indexOf('~'+pg+'~') != -1) return false; val += pg + '~'; wC(nam,val); return true;} function firstTime(cN) {return lC('pWrD4jBo',cN);} function thisPage() {var page = location.href.substring(location.href.lastIndexOf('\/')+1); pos = page.indexOf('.');if (pos > -1) {page = page.substr(0,pos);} return page;}
// plugin finish //


// example code to call it - you may modify this as required
function start() {
   if (firstTime(thisPage())) {
      // this code only runs for first visit
      alert('welcome');
   }
   // other code to run every time once page is loaded goes here
}
onload = start;

Example http://javascript.about.com/library/blfirst1.htm