Introduction
HTML5 Web Storage is a client side database. User can store the data in the form of key/value pairs. Following are the concepts covered in HTML5 Web Storage chapter.
- What is Web Storage
- Web storage vs Other Storage Devices
- Browser Support
- Access Methods
Description
Web storage is simple client side local storage which allows users to store the data in the form of key/value pairs. Cookies also store the data in the browsers but there are certain limitations as follows.
In order to write/retrieve the data into the local storage HTML5 have the simple APIs, and the data will not include with the HTTP request.10MB of data can be stored per each domain. Web storages are divided into two types as follows.
The image below demonstrates the web storage.
- Cookies storage limit is limited to 4KB in web browsers.
- Cookies are sent with HTTP request, there by slowing down the performance of the web application.
- Cookies are sent with HTTP request, there by sending the data should not encrypted over the internet.
- Local Storage
- Session Storage
Description
Web storage vs Other Storage devices demonstrates the features of the web storage and comparing with the other storage devices as follows.
- Web storage vs Cookies Cookies are having the less storage capacity when compared to the web storage. The HTTP request will sent by adding the cookies which may slow down the application performance.
- Web storage vs Indexed DB Indexed database also a client side database which emerging the standards of HTML5. Comparing to the Indexed DB web storage is a much more simple API. Basically web storage store the data in the form of key/value pair there is no any querying language. Indexed data base is much more robust and more capability like a true database and still Indexed DB are developing.
Description
HTML5 Web Storage are supported by all the latest browsers.Following are the browser versions supported by HTML5.
- Chrome 4.0
- Internet Explorer 1.8
- Mozilla Firefox 3.5
- Safari 4.0
- Opera 10.5
Description
The HTML5 Web Storage access methods have different types web storages. Out of which only 2 types were taken into consideration as shown below with examples.
Local storage stores the data without any expire date. The data will available in multiple windows and user can able get the data even when the browser get closed or reopened and used to store users documents, mail boxes and many more. The code below demonstrates use of local storage variable and accessing every time when the window is opened.
[html]<!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>
[/html]
Result
Run the above code in preferred browser following output is obtained.
In session storage the data will be available only for one session. The data will be carried out to the multiple windows in same browser and data disappears once the browser gets closed. Persistent data will always be cleared. The code below demonstrates use of session storage variable as shown below.
[html]<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if( sessionStorage.hits ){
sessionStorage.hits = Number(sessionStorage.hits) +1;
}
else{
sessionStorage.hits = 1;
}
document.write("Total Hits :" + sessionStorage.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>
[/html]
Result
Run the above code in preferred browser following output is obtained.
Points
- Web storage data will not available in different browsers.
- Cookies have the less storage capacity.
- Older versions of Internet explorer and IE7 does not support web storage.
- Web storage have simple APIs to write/retrieve the data.