Lesson 24: Web Storage
This lesson will give you an introduction to another API: web storage.
Web storage
A cookie is a small text file saved on the user's hard drive in which a website can store different information. But HTML5 lets you store data inside the web page instead of using cookies. This makes the web page faster and more secure. You can actually store quite a bit of data in the web page without making the page slow to load.
Below, we've included code that lets people like a page.
Web storage for "Like this page"
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML= + localStorage.clickcount + " people have liked this page.";
}
else
{
document.getElementById("result").innerHTML="Your browser does not support web storage.";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Like!</button></p>
<div id="result"></div>
</body>
Let's walk through the details of this script. First we call the function clickCounter, which counts the number of times something is clicked.
<head>
<script>
function clickCounter()
Next, we have a nested if, else, then. It first determines if there's any information already stored in web storage (someone has already click at least once) and then increments that number by 1 each time.
The else is for the circumstance where the click is actually the very first click, so make that number equal to 1.
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
We then fetch the HTML element by ID and add the number of clicks plus some text. We also handle the circumstance where someone's browser doesn't support web storage at all and give them a little error message: Your browser does not support web storage. We finally end the script.
document.getElementById("result").innerHTML= + localStorage.clickcount + " people have liked this page.";
}
else
{
document.getElementById("result").innerHTML="Your browser does not support web storage.";
}
}
</script>
Next, we have the HTML code (the button) that calls this JavaScript. The button has an onclick event that correlates to the name of the function: clickCounter().
<body>
<p><button onclick="clickCounter()" type="button">Like!</button></p>
After that, we have a place where the results will be displayed once the button is clicked. Note that the ID in the <div> element correlates to the ID in the script above.
<div id="result"></div>
</body>
Copy and paste the entire code above and put it into a new page. This API can run locally, so you don't need to upload the page to the internet unless you want to.
The point that you should take away here is that the number of times someone has clicked the button is stored on the web, not in a cookie or any other location. Although we've demonstrated Local Storage, there is also a different kind called Session Storage, which only lasts until that web browser session is running. When someone closes their browser, it resets.
You could use web storage for a number of different purposes:
- User preferences
- Localization (language they use)
- Saving products in a shopping cart (emptied after a session or remembered the next time they visit?)
- Creating a to do list
- Anything else where you want input/choices to persist for a session or forever
Web storage means the end of cookies!
| Related topics in the | Replies | Views |
|---|---|---|
| No related topics yet | ||