HTML5 – localStorage vs sessionStorage

HTML5Ah, 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
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1822 outZvjpFrOdfIXUThoLeZ2M_dKXGpg8ly1j0AVYOBYMURPw1PwITogcURqJHEDCF b70a30cf8c583c501dbdb437660ad497f0a68f3a&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1825 D8RTw8H6OjyRLRwNMo4EwDSDmBq3L4zTx6S91Yoj_LUv834o9fqQ_bn1k4F3x0TO b1e175613a96219e342e6b099e3c8110d53d3b74&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1830 7pZ8YYdycUMc65hqRTJ0Kx9kNl7VLRq7DMVxRAZb4GR3bezmd3Vfo7DTG1-z1rZD 2a381fbd936baca323fdea9c564f49343ae15196&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1830 DBmezv09K8klkUDv12AspoAsI5WPIbPmnYPlnO4uXFi7mnVs9kqM_rHchhVkRCuY 4fd3aa40c8813a61bc00c7f6113b63708934f7ef&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme

Leave a Reply

Your email address will not be published.