Data Storage - Beginning JavaScript - page 423

Load ch13 _ example2a.html into a browser.
The first time you go to the main page, there will
be nothing but a heading saying “Welcome to
Example 2a.” Obviously, if this were a real website,
it would have a bit more than that, but it suffices
for this example. However, refresh the page and
suddenly you'll see the page shown in Figure 13-18.
If you click the link, you're taken to the
ch13 _ example2b.html page detailing all the
things added to the website since you last visited.
Obviously, nothing has actually changed in
your example website between you loading the
page and then refreshing it. You got around this
for testing purposes by setting the date when
the website last changed, stored in variable
lastUpdated , to a date in the future (here,
December 28, 2020).

figure 13-18

The ch13 _ example2b.html page is just a simple HTML page with no script, so you will confine your
attention to ch13 _ example2a.html . In the script block, you declare the variable lastUpdated :

var lastUpdated = new Date("Tue, 28 Dec 2020");

Whenever you make a change to the website, this variable needs to be changed. It's currently set to
Tue, 28 Dec 2020 , just to make sure you see the What's New? link when you refresh the page. A better
alternative for live pages would be the document.lastModified property, which returns the date on
which the page was last changed.
Next, you get the date of the user's last visit from the LastVisit cookie using the getCookieValue()
function:

var lastVisit = getCookieValue("LastVisit");

If it's falsy, the user has either never been here before, or it has been six or more months since the last
visit and the cookie has expired. Either way, you won't put the What's New? link up because everything
is new if the user is a first‐time visitor, and a lot has probably changed in the last six months—more
than what your What's New? page will detail.

If lastVisit has a value, you need to check whether the user visited the site before it was last
updated, and if so to direct the user to a page that shows what is new. You do this within the if
statement:

if (lastVisit) {
lastVisit = new Date(lastVisit);

if (lastVisit < lastUpdated) {
document.getElementById("whatsNew").innerHTML =
"<a href='ch13_example2b.html'>What's New?</a>";
}
}