如何防止全局javascript变量在每次页面加载时初始化？

Question

I am trying to display a div-tag when someone first comes to my site. After clicking on links to other pages, when they come back to the home page, I don't want that div-tag displayed. Is there any way I can save something like a session variable, which I can test so that I don't show the introductory div-tag?

I tried using a global declaration outside of a function, but that initializes every time the page loads. Since it is a .php page, it is going to reload, of course.

Is there any other way to do this (other than cookies), for example by executing the javascript code from php (I know how to do session variables in PHP).

Answer 1

If you for whatever reason do not want to use storage, and take the hit on php pageload of reading your preventive variable, you could just post it to whichever pages your users are going to, and have those pages post it to your original, first script when they come back. Awkward, and lots of code but if your question is ways to achieve the thing you describe, it works.

Answer 2

First Thanx to @Denys Séguret for providing the answer to my question. Here is the code I eventually created.

First, in the Header of the .php file, I have:

    <script type="text/javascript">
    if (sessionStorage.getItem('firsttime') === null) {
        sessionStorage.setItem('firsttime', 'True');
    }
    function Hider(){
        document.getElementById("Opener").style.display = "none";
        sessionStorage.setItem('firsttime', 'False');
        }
    </script>

Then in the body, I have:

 <script type="application/x-javascript"> var IsItFirstTime = sessionStorage.getItem('firsttime'); varMessage1 = "<p class=\\"h1\\">Welcome to Blah-Bla!</h1><br><h2>The premier site for the best movies!</h2>" varMessage2 = "<p>Every week we bring you a fresh batch of movies and you can expect these to be the best movies in that category.</p><p>Click to Continue</p>" if (IsItFirstTime == 'True') { var1 = "<div id=\\"Opener\\" onclick=\\"Hider()\\">" + varMessage1 + varMessage2 + "</div>"; document.write(var1); } </script> 

And this is peripheral, but here is the CSS:

 #Opener { background-color: #ff0099; position:absolute; width:600px; height:440px; z-index:100; margin-left: 50%; left: -300px; top: 180px; text-align:center; padding-left:50px; padding-right:50px; } 

Note the z-index line, which floats the "Opener" div on the page.

Hope this helps someone else.