WEB STORAGE API
What is web storage …
HTML5 provides two ways to store data: localStorage and sessionStorage. Data saved as localStorage is available to the browser at any point, even when the browser closes or the system is restarted. Data saved as sessionStorage is lost when the browser is closed.
A good use case for using web storage is when you want to have variables which are accessible and shared across html pages (of the same website)… or you want to store info regarding the user of the site (client side – not server side)…This API is relatively simple to use – the main point is that you store and retrieve values to/from local storage as key/value pairs.
We will do an example whereby we have two html pages: in the first page we will SAVE the state of the item clicked on – and the second page will retrieve and display the number of times each item from the first page was was clicked:
The HTML of the SAVE PAGE:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<html>
<head>
<title> Save to Local Storage </title>
<style>
#c {
background-color: #3e181b;
border: 3px solid #db1d2d;}
#d {
background-color: #422018;
border: 3px solid #f0421c;}
#e {
background-color: #45391b;
border: 3px solid #fec02d;}
body{
background:black;
}
.theButtons {
width: 10vw; /*(1/10th) viewport width */
height: 10vw;
margin-left: 5%;
margin-top: 1%;
display:inline-block;
color:white;
}
.wrapper{
margin-left:30%;
margin-top:15%;
}
.titleBar {
width:90%;
text-align: center;
padding:5%;
}
.not-active{
background-color:rgba(255,255,255,0.25);
}
.active{
background-color:rgba(255,0,255,0.25);
}
</style>
<!-- REFERENCE OUR SCRIPTS -->
<script type="text/javascript" src="saveStateEx.js"></script>
</head>
<body>
<div class = "wrapper">
<div id = "c" class = "theButtons"><p id = "May" class = "titleBar not-active"> MAY</p></div>
<div id = "d" class = "theButtons"><p id = "June" class = "titleBar not-active"> JUNE</p></div>
<div id = "e" class = "theButtons"><p id = "July" class = "titleBar not-active"> JULY</p></div>
</div>
</body>
</html> |
The JavaScript of the SAVE page
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | window.onload = function(){
let saveStateHandler = function (){
//console.log(event)
resetButtonStates();
console.log("target:" + event.target.id);
document.getElementById(event.target.id).classList.remove("not-active");
document.getElementById(event.target.id).classList.add("active");
// save to local storage
// CREATE A LOCAL STORAGE ITEM (key value pair)
//LOCAL storage is part of the window object
//The localStorage object stores data with no expiration date.
//The data will not be deleted when the browser is closed,
//and will be available the next day, week, or year. - unless you remove browser history
//The localStorage property is read-only.
let keyToStore = "targetSet-"+event.target.id;
let valToStore =1;
// check if this key-val alreday exists
if (localStorage[keyToStore]) {
// if yes then get the value and add 1
valToStore = Number(localStorage.getItem(keyToStore)) + 1;
}
//WRITE to local storage
console.log("writing to local storage:: the key: "+keyToStore+ " val: "+valToStore);
localStorage.setItem(keyToStore,valToStore);
};
let theButtons = document.getElementsByClassName("titleBar");
for(let i = 0; i< theButtons.length; i++){
//console.log(theButtons[i]);
theButtons[i].addEventListener('click',saveStateHandler);
}
function resetButtonStates(){
for(let i = 0; i< theButtons.length; i++){
theButtons[i].classList.remove('active');
theButtons[i].classList.add('not-active');
}
}
} |
The HTML of the RETRIEVE PAGE:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<html>
<head>
<title> Retrieve State Example </title>
<style>
#c {
background-color: #3e181b;
border: 3px solid #db1d2d;}
#d {
background-color: #422018;
border: 3px solid #f0421c;}
#e {
background-color: #45391b;
border: 3px solid #fec02d;}
body{
background:black;
}
.theButtons {
width: 10vw; /*(1/10th) viewport width */
height: 10vw;
margin-left: 5%;
margin-top: 1%;
display:inline-block;
color:white;
}
.wrapper{
margin-left:30%;
margin-top:15%;
}
.titleBar {
width:90%;
text-align: center;
padding:5%;
}
.not-active{
background-color:rgba(255,255,255,0.25);
}
.active{
background-color:rgba(255,0,255,0.25);
}
</style>
</style>
<!-- REFERENCE OUR SCRIPTS -->
<script type="text/javascript" src="retrieveStateEx.js"></script>
</head>
<body>
<div class = "wrapper">
<div id = "c" class = "theButtons"><p id = "May" class = "titleBar not-active"> MAY</p></div>
<div id = "d" class = "theButtons"><p id = "June" class = "titleBar not-active"> JUNE</p></div>
<div id = "e" class = "theButtons"><p id = "July" class = "titleBar not-active"> JULY</p></div>
</div>
</body>
</html> |
The javaScript of the RETRIEVE PAGE:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | window.onload = function(){
let theButtons = document.getElementsByClassName("titleBar");
//go through all the elements and retrieve the click values for each box from local storage
for(let i=0; i<theButtons.length;i++){
let keyToRetrieve = "targetSet-"+theButtons[i].id;
console.log("the key:: "+keyToRetrieve);
let valRetrieved =0;
// if the key exists
if (localStorage[keyToRetrieve]) {
//if yes get it
valRetrieved = localStorage.getItem(keyToRetrieve);
}
//if not we will jusr put the 0
console.log("the value:: "+valRetrieved);
console.log(theButtons[i])
let para = document.createElement('p');
para.setAttribute('style',"background-color:rgba(125,0,0,1.0)");
para.textContent = valRetrieved;
theButtons[i].appendChild(para);
}//end for
}//end on load |