When web developers think of storing anything about the user, they immediately think of uploading to the server. HTML5 changes that, as there are now several technologies allowing the app to save data on the client device. It might also be sync’d back to the server, or it might only ever stay on the client: that’s down to you, the developer.
Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website’s performance. The data is stored in key/value pairs, and a web page can only access data stored by itself.
There are several reasons to use client-side storage. First, you can make your app work when the user is offline, possibly sync’ing data back once the network is connected again. Second, it’s a performance booster; you can show a large corpus of data as soon as the user clicks on to your site, instead of waiting for it to download again. Third, it’s an easier programming model, with no server infrastructure required. Of course, the data is more vulnerable and the user can’t access it from multiple clients, so you should only use it for non-critical data, in particular cached versions of data that’s also “in the cloud”.
Session Storage and Local Storage
It is important to know that there are two types of Web Storage objects:sessionStorage and localStorage.
sessionStorage is only available within the browser tab or window session. It’s designed to store data in a single web page session.
localStorage is kept even between browser sessions. This means data is still available when the browser is closed and reopened, and also instantly between tabs and windows.
Web Storage data is, in both cases, not available between different browsers. For example, storage objects created in Firefox cannot be accessed in Internet Explorer, exactly like cookies.
Cookies Vs Local Storage
HTML5 introduces two mechanisms, similar to HTTP session cookies, for storing structured data on the client side and to overcome following drawbacks.
-
Cookies are included with every HTTP request, thereby slowing down your web application by transmitting the same data.
-
Cookies are included with every HTTP request, thereby sending data unencrypted over the internet.
-
Cookies are limited to about 4 KB of data . Not enough to store required data.
Sample code to access local Storage
<!DOCTYPE HTML>
<html>
<body>
<script type=”text/javascript”>
if( localStorage.hits ){
localStorage.hits = Number(localStorage.hits) +1;
}else{
localStorage.hits = 1;
}
document.write(“Total Hits :” + localStorage.hits );
</script>
<p>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html>
Delete Web Storage:
Storing sensitive data on local machine could be dangerous and could leave a security hole.
The Session Storage Data would be deleted by the browsers immediately after the session gets terminated.
To clear a local storage setting you would need to call localStorage.remove(‘key’); where ‘key’ is the key of the value you want to remove. If you want to clear all settings, you need to call localStorage.clear() method.
PremAseem.me 