HTML5 – localStorage vs sessionStorage
Ah, HTML5. It brings a lot of different functionality to the table that was once missing in the old 4.01 HTML standard. CSS3 and HTML5 will, one day rule the web browsing world. And for good reason too.
One of those reasons, is the introduction of STORAGE. There are two types: (1) localStorage (2) sessionStorage
Through reading their names, you may already know their function. By just in case…
localStorage – Like a cookie, this will save data to a computer than can later be recalled. The data will stay “indefinitely” (until removed by you).
sessionStorage – Unlike the above, this data will disappear once the user exits their web browser. After all, that is the nature of a session.
Nifty, huh? I have created a simple proof of concept below. It will count the amount of times you viewed the page the code is on…within a given session. Refresh the page you make to increment easily.
<!DOCTYPE html>
<html>
<head>
<script>
if(sessionStorage.counter === undefined) {
sessionStorage.counter = 1;
} else {
sessionStorage.counter++;
}
alert(sessionStorage.counter);
</script>
</head>
</html>
Note that sessionStorage and localStorage cannot hold unlimited data. Similar to cookies, the limit varies from browser to browser, though they all allow for a pretty large amount of data.
Incoming search terms:
- localStorage vs sessionStorage