Session Storage Local Storage IndexedDB Storage





Follow @kmtabish
An introduction about Browser Storage



In the early days of web the major problem was the client storage, because we were not able to store large amount of data in client side. But after few years when technology improved the storage capacity also increased. Initially it was 32KB then it increased to 64 KB and so on.
But when HTML5 came into picture this issue has been resolved and we get variety of storage types, and we can use them according to our requirements.
The major used storage types are.

Session Storage

This storage is session specific storage. When user close the browser of closed the tabs the session of the current user will end. And we can open multiple sessions for each user in multiple tab and multiple browsers. When we closed the tab or browser the session will end only for that tab or browser other will not be affected. Here we have an example of session storage.

<center>Enter Your Name/br></br><input type="text" id="name" name="name" placeholder="Your Name">
<input type="button" id="sub_btn" value="Set">
<div id="show"></div>
</center></form>
<script type="text/javascript">
document.getElementById('sub_btn').onclick = function () {
myString = document.getElementById('name').value;
if( sessionStorage.name ){
document.getElementById("show").innerHTML="<p> Welcome" + sessionStorage.name + "</p>";
}else{
sessionStorage.name = myString;
}
document.getElementById("show").innerHTML="</br></br><p> Welcome: " + sessionStorage.name + "</p>";
};
</script>



In the above written code we accept a name from text box and display in div( id= show) when user click on set button. And in the same session if user enter another name in that text box and hit the set button the page will show the already existing name or if you refresh the page then again it will nor remove. If user closes the tab or browser then it will be deleted and you can enter another value.
These codes are very helpful in developing the session specific applications.

Click here to for Example on Session Storage

The another type of storage is:

Local Storage

This storage in not the session specific but it remain till browser can store. It doesn’t mean than browser automatically remove it but if we clear the complete browser data or re install the browser or we manually clean the local storage from the inspect elements of browser. I will show also how it is stored in browser.
This storage type is very useful to develop the user interest base application. We can track the user behavior and analyze them and stored in local storage. So whenever user will come again to our system they get the content, colors, layout as per their behavior.
Let me share the same example as I discussed in session storage. So that it will be more clear to you that where is the difference in both the storage.
I will make you clear that there is not much difference in code. You can see.


<center>Enter Your Name</br></br><input type="text" id="name" name="name" placeholder="Your Name">
<input type="button" id="sub_btn" value="Set">
<input type="button" id="clear_btn" value="Clear">
<div id="show"></div>
</center></form>
<script type="text/javascript">
document.getElementById('sub_btn').onclick = function () {
myString = document.getElementById('name').value;
if( localStorage.name ){
document.getElementById("show").innerHTML="<p> Welcome" + localStorage.name + "</p>";
}else{
localStorage.name = myString;
}
document.getElementById("show").innerHTML="</br></br><p> Welcome: " + localStorage.name + "</p>";
};
document.getElementById('clear_btn').onclick = function () {
localStorage.clear();
};
</script>


The above code is same as the session storage code. But the only difference is that it has the clear option, so that we can clear the local storage manually on button click. Here the localstorage accept the data from the text box and set in the localstorage type variable name on set button click. So the difference between both discussed storage type is that the persistency of the data. Here in this case if you close the tab or browser the storage will not lost. Even you can see your stored data from the Inspect element window of the browser.
Click here to for Example on Local Storage

The another major type of browser storage is IndexedDB.

IndexedDB Storage

Initialy it was not supported by many of the browsers, but now it is supported by many of the browsers.
Its behavior is also the same as the Localstorage, its persistency is also like the localstorage. But the data storage capacity is much higher than any of the storage. We can store Image, Video etc in this storage.
It store these type of big data elements after co nverting them into BLOB. And its storage structure is like the database which we are using like Creation of database etc. you can read more about this from HTML5 rocks.
So here the same example we will discussed with the use of IndexedDB.
This example has been taken from http://code.tutsplus.com/


<script>
var db;
function indexedDBOk() {
return "indexedDB" in window;
}
document.addEventListener("DOMContentLoaded", function() {
if(!indexedDBOk) return;
var openRequest = indexedDB.open("idarticle_peopleTab",1);
openRequest.onupgradeneeded = function(e) {
var thisDB = e.target.result;
if(!thisDB.objectStoreNames.contains("peopleTab")) {
var os = thisDB.createObjectStore("peopleTab", {autoIncrement:true});
os.createIndex("name", "name", {unique:true});
}
}
openRequest.onsuccess = function(e) {
db = e.target.result;
document t.querySelector("#addButton").addEventListener("click", addPerson, false);
document.querySelector("#getButton").addEventListener("click", getPerson, false);
}
openRequest.onerror = function(e) {
}
},false);
function addPerson(e) {
var name = document.querySelector("#name").value;
console.log("About to add "+name);
var transaction = db.transaction(["peopleTab"],"readwrite");
var store = transaction.objectStore("peopleTab");
var person = {
name:name,
created:new Date()
}
var request = store.add(person);
request.onerror = function(e) {
alert("Sorry, that name already exists.");
console.log("Error",e.target.error.name);
console.dir(e.target);
}
request.onsuccess = function(e) {
console.log("Woot! Did it");
}
}
function getPerson(e) {
var name = document.querySelector("#nameSearch").value;
if(name === "" ) return;
var transaction = db.transaction(["peopleTab"],"readonly");
var store = transaction.objectStore("peopleTab");
var index = store.index("name");
var request = index.get(name);
request.onsuccess = function(e) {
var result = e.target.result;
if(result) {
var s = "<h2>Name "+name+"

";
for(var field in result) {
s+= field+"="+result[field]+"
";
}
document.querySelector("#status").innerHTML = s;
} else {
document.querySelector("#status").innerHTML = "<h2>No match</h2>";
}
}
}
</script>
<center>
<input type="text" id="name" placeholder="Name">
<button id="addButton">Add Data</button>
<p/>
<input type="text" id="nameSearch" placeholder="Name">
<button id="getButton">Get By Name</button>
<p/>
<div id="status"></div>





The above code is accepting the name from the text box and stored in indexedDB of browser data base and if user wants to check that their entered name is stored or not, they can search from the search field. It stored the data as key value format. And we can drop this storage any time when we want. Local Storage and IndexedDB storage will be remain in the system and browser storage even after you restart your PC.

Click here to for Example on IndexedDB Storage


Please add your comments Question on this
comments powered by Disqus