<div>) and inline (<span>) elements, for example <nav> (website navigation block) and <footer> (usually referring to bottom of web page or to last lines of html code). Other elements provide new functionality through a standardized interface, such as the multimedia elements <audio> and <video>. In addition to specifying markup, HTML5 specifies scripting application programming interfaces (APIs). Existing document object model (DOM) interfaces are extended and de facto features documented. window object. Following are the objects available which provides different scope of data storage. sessionStorage object can be accessed by directly referencing it by name of through window.sessionStorage. This is a global object (sessionStorage) that maintains a storage area that’s available for the duration of the page session. A page session lasts for as long as the browser is open. Opening a page in a new tab or window will cause a new session to be initiated. Note that sessionStorage can survive browser restart thus it is most useful for hanging on to temporary data that should be saved and restored if the browser is accidentally refreshed. Example: Save a string value “Hello, World” and display it on browser refresh. //Store the data in sessionStorage object
sessionStorage.hello = “Hello, World!”;
//Retrieve the data from sessionStorage object on
//browser refresh and display it
window.onload = function() {
if(sessionStorage.hello)
alert(sessionStorage.hello);
}
Code language: JavaScript (javascript)localStorage object is useful when one wants to store data that spans multiple windows and persists beyond the current session. The localStorage provides persistent storage area for domains. For example: data stored at localStorage['viralpatel.net'] can be retrieved by any script hosted at level Viralpatel.net. Similarly data stored at localStorage['net'] can be accessed by scripts at any .net TLD level websites. Data stored as localStorage[''] can be accessed by all the pages on all sites. Example: Following script will store a value hello at Viralpatel.net level. Thus all the scripts hosted at Viralpatel.net and its sub-domain level can both read and write the values. //Store the data in localStorage object
localStorage['viralpatel.net'].hello = "Hello, World!";
Code language: JavaScript (javascript)getItem() Method – Get the value of item passed as key to the methodlength Property – Returns the length of number of itemsremainingSpace Property – Return the remaining storage space in bytes, for the storage objectclear() Method – Remove all the key/value pairs from DOM Storagekey() Method – Retrieves the key at specified indexremoveItem() Method – Remove the key/value pair from DOM StoragesetItem() Method – Sets a key/value pair| Browser | Storage Size | Storage Support | Survives Browser Restart |
|---|---|---|---|
| Firefox 2 | 5 MB | Yes | No |
| Firefox 3 | 5 MB | Yes | No |
| Firefox 3.5 | 5 MB | Yes | Yes |
| Safari 3 | – | No | No |
| Safari 4 | 5 MB | Yes | Yes |
| Chrome 2 | – | No | No |
| IE 8 | 10 MB | Yes | Yes |
| Opera 10 | – | No | No |
<HTML>
<HEAD>
<TITLE>DOMStorage - Sample Application
</TITLE>
</HEAD>
<BODY>
<H2>Client Form
</H2>
<br/>
<form name="clientForm" id="clientForm">
<table>
<tr>
<td>First Name
</td>
<td>
<input type="text" name="firstname"/>
</td>
</tr>
<tr>
<td>Last Name
</td>
<td>
<input type="text" name="lastname"/>
</td>
</tr>
<tr>
<td>Date of Birth
</td>
<td>
<input type="text" name="dob"/>
</td>
</tr>
<tr>
<td>Gender
</td>
<td>
<input name="gender" type="radio" value="M">Male
</input>
<input name="gender" type="radio" value="F">Female
</input>
</td>
</tr>
<tr>
<td>Designation
</td>
<td>
<select name="designation">
<option value="0">Software Engineer
</option>
<option value="1">Sr. Software Engineer
</option>
<option value="2">Technical Architect
</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<br/>
<input name="submit" type="button" value="Submit"/>
<input name="reset" type="reset" value="Reset"/>
</td>
</tr>
</table>
</form>
<script type="text/javascript" src="domstorage-persist.js"></script>
</BODY>
</HTML>
Code language: HTML, XML (xml)/**
* Filename: domstorage-persist.js
* Author: viralpatel.net
* Description: HTML code independent form persistent
* Usage: persist(<form object>);
*/
function persist(form) {
/*
* In case of page refresh,
* store the values of form to DOMStorage
*/
window.onbeforeunload = function () {
var str = serialize(form);
try {
sessionStorage[form.name] = str;
} catch (e) {}
}
/*
* If the form was refreshed and old values are available,
* restore the old values in form
*/
window.onload = function () {
try {
if (sessionStorage[form.name]) {
var obj = eval("(" + sessionStorage[form.name] + ")");
for (var i = 0; i < obj.elements.length - 1; i++) {
var elementName = obj.elements[i].name;
document.forms[obj.formName].elements[obj.elements[i].name].value = obj.elements[i].value;
}
}
} catch (e) {}
}
}
/*
* Convert form elements into JSON String
*/
function serialize(form) {
var serialized = '{ "formName":"' + form.name + '", "elements": [';
for (var i = 0; i < form.elements.length; i++) {
serialized += '{';
serialized += '"name":"' + form[i].name + '",';
serialized += '"value":"' + form[i].value + '"';
serialized += '},';
}
serialized += '{"name":0, "value":0}';
serialized += '] }';
return serialized;
}
/*
* Make the Client Form persistable.
* i.e. Persist its values in case of page refresh
*/
persist(document.clientForm);
Code language: JavaScript (javascript)Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…
Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…
Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…
1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…
GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…
1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…
View Comments
Nice article, but you should really update your browser list there, especially chrome.
How to access domstorage (localstorgae) objects in Java Servlet filter?
Hi, It seems that there is no Servlet API for this as of now. All I can think of is to put domstorage value in a hidden html element and access it in Servlet via request parameter. Though this is not clean but atleast it will work. Hope future Servlet specifications have dedicated APIs to access DomStorage data.
Hi,
I studied technologies in your website. Its easy to learn.Thanks for your good work.
i have one doubt that i want to retrieve data's from DB and i want to store it on client side until the session end. I am using spring and jsp. Pls help. Thanks in advance.