Web Client Storage Basics
Forward: This tutorial explains how data can be stored at the client by a browser page, for a website.
By: Chrysanthus Date Published: 1 Aug 2012
Introduction
Note: If you think anything is missing in this article (missing text, broken links, image absent), just contact me at forchatrans@yahoo.com.
Two Storage Types
There are two storage types: sessionStorage and localStorage. With sessionStorage, data is stored only for one session; that is, between the times you start and finish using the site. With localStorage, data is stored without any time limit; that is, for the first and future sessions. So, with sessionStorage, if you switch your computer off today and put it on the next time (say next month) you will still have the data.
Storage Objects
To save data for a session, the web page uses the DOM sessionStorage object. To save data indefinitely, the web page uses the DOM localStorage object.
Properties of the Objects
The sessionStorage or localStorage object can have more than one property. You create a property by just giving it a name of your choice and then assigning a string (or maybe number) to it. Before you type the property name, you have to type the sessionStorage or localStorage object name and a dot, first. The following code shows a page that saves the first name and last name of a person for a session:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<script type="text/ECMAScript">
sessionStorage.firstName = "Juan Mary";
sessionStorage.lastName = "Smith";
</script>
<a href="page1.htm">Next Page</a>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<script type="text/ECMAScript">
document.write(sessionStorage.firstName + "<br>");
document.write(sessionStorage.lastName + "<br>");
</script>
</body>
</html>
Read the above two code pages and try them if you have a personal web server (localhost).
If you want unlimited storage time, then use localStorage in place of sessionStorage in the above code samples.
Number of Page Views
A page can count the number of times it has been viewed at the client computer. The counting is done at the client computer and stored in the client computer. This counting can go on for days, weeks, months and even years. All that is thanks to the localStorage object. The following code, which may not work with your browser, would do the counting. Read the code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<p>
You have viewed this page
<span id="CNT">an untold number of</span>
time(s).
</p>
<script>
if (!localStorage.pageCount)
{
localStorage.pageCount = 0;
}
else
{
localStorage.pageCount += 1;
}
document.getElementById('CNT').textContent = localStorage.pageCount;
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>text text text</p>
<p>
You have viewed this page
<span id="CNT">an untold number of</span>
time(s).
</p>
<script>
if (!localStorage.pageCount)
{
localStorage.pageCount = 0;
}
else
{
localStorage.pageCount += 1;
}
document.getElementById('CNT').textContent = localStorage.pageCount.length;
</script>
</body>
</html>
In practice, you will have to check if pageCount is a string or an int. If it is an int, use the first code. If it is not, use the second code. That is, the main features of the two code samples can be placed in an if-else construct, where the if-condition test if pageCount is an int or not.
That is it for this tutorial. I hope you appreciated it.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course