Caching the impossible 22 November 2005

Advantages of caching for both users and developers are out of question, even if the number of visitors to the website is moderate. However, there are times when simple caching is not enough.

A typical example is displaying current time on each page of the website. Or the situation may be as follows: the website has user registration, and for registered users a log-in form should not appear.

What would you do? You can refresh cache every minute. Or keep two cache stores—one for registered users and another one for guests. Each situation may require a unique solution, but there is at least one general approach.

What’s most simple is that you create an HTML document containing the information common for all cache stores, and then complete it using, say, JavaScript. The script below enables to display current time, and I can use it to put across the main points of this approach.

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 

<div id="divCurrentTime" style="display:none"></div>
<script type="text/javascript">
    MakeupCurrentTime()
    function MakeupCurrentTime()
    {
        var elem = document.getElementById('divCurrentTime')
        if( elem )
        {
            var d = new Date()
            elem.appendChild( document.createTextNode(d.toString()) )
            elem.style.display = 'block'
        }
    }
</script>

The first point, an important one: although different users see different content depending on the situation, the  page uses a single HTML document, which means caching is performed and that is what you want.

The second thing, just as important: you have to take into consideration that the script may fail for user. Initially the div element in line 01 (divCurrentTime) is hidden, and it’s the script that makes it visible. If the script fails, the divCurrentTime element will remain hidden and the user won’t be able to see it.

Of course, that’s the most simple example. Lets take a broader look and deal with the user registration situation that requires not only a log-in form for guest visitors, but also individuals greetings for registered users.

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 

<div id="divLoginForm"></div>
<div id="divUserGreetings" style="display:none"></div>
<script type="text/javascript">
    MakeupAuthView()
    function MakeupAuthView()
    {
        var greetingsStr = GetUserGreetingsStr()
        if( greetingsStr )
        {
            document.getElementById('divLoginForm').style.display = 'none'
            var elem = document.getElementById('divUserGreetings')
            elem.appendChild( document.createTextNode(greetingsStr) )
            elem.style.display = 'block'
        }
    }
</script>

It is similar to the current time task, but is different as there is a default provision—in case of any problems with the script the user will see a log-in form which is a lot better than nothing.

So, if the script fails or the user is not registered (function GetUserGreetingsStr() returns null), then the log-in form is displayed. If the script works fine and the user is registered (function GetUserGreetingsStr() returns something other than null and a non-empty string), then the greeting is displayed.

The only thing left  to explain is what the GetUserGreetingsStr() function does. It’s not too complicated—it receives data from server, for example by reading an outer XML.