Storing Objects in Web Browsers in HTML 5

I find this web storage feature of HTML 5 very useful  especially when we want to save some user behavior in Siebel using OpenUI Physical Renderer files.

It is really exciting because we can save user’s data in users’ browser itself. But be very careful while saving your data because it can be a security breach as well.

What is Web Storage ?

The HTML5’s web storage feature lets you store some information locally on the user’s computer, similar to cookies but it is more secure and faster. With this feature:
– can’t send to server side
– allows you to store up to 5MB of data instead of cookies (nearly 4KB)
There are two types of web storage, which differ in scope and lifetime:

Local storage 

The local storage uses the localStorage object to store data for your entire website, permanently. That means the stored local data will be available on the next day, the next week, or the next year unless you remove it.

Session storage 

The session storage uses the sessionStorage object to store data on a temporary basis, for a single window (or tab). The data disappears when session ends i.e. when the user closes that window (or tab).

The localStorage Object

As stated earlier, the localStorage object stores the data with no expiration date. Each piece of data is stored in a key/value pair.You can store strings, numbers, objects, complex objects arrays etc.

Lets see the syntax to store & fetch stuff from your browser’s storage.

 

First, lets check If local storage is supported.

if(typeof(Storage)!=="undefined")
{
// Code for localStorage/sessionStorage.
}
else
{
// Sorry! No Web Storage support..
}
if(typeof(Storage)!=="undefined")
{
// Code for localStorage/sessionStorage.
}
else
{
// Sorry! No Web Storage support..
}

 

Strings

var hello = "Hello World!!";
localStorage.setItem("hello",hello);
// get string
console.log(localStorage.getItem("hello")); // will return 'Hello World!!'
var hello = "Hello World!!";
localStorage.setItem("hello",hello);
// get string
console.log(localStorage.getItem("hello")); // will return 'Hello World!!'

Numbers

var age = 99;
localStorage.setItem("myAge",age);
// get string
console.log(localStorage.getItem("age")); // will return 99 as string
// parsing to int
var age = parseInt(localStorage.getItem("age")); // 99
//or
var age = parseFloat(localStorage.getItem("age")); // 99
var age = 99;
localStorage.setItem("myAge",age);
// get string
console.log(localStorage.getItem("age")); // will return 99 as string
// parsing to int
var age = parseInt(localStorage.getItem("age")); // 99
//or
var age = parseFloat(localStorage.getItem("age")); // 99

 

Objects

var me = {name:'myname',age:99,gender:'myGender'};
localStorage.setItem("user",me);
//fetch object
console.log(localStorage.getItem("user")); // will return "[object Object]"
var me = {name:'myname',age:99,gender:'myGender'};
localStorage.setItem("user",me);
//fetch object
console.log(localStorage.getItem("user")); // will return "[object Object]"

 

//remove items
localStorage.removeItem(key).

 

//clear all data
localStorage.clear().

 

The sessionStorage Object

The sessionStorage object work in the same way as localStorage, except that it stores the data only for one session i.e. the data remains until the user closes that window or tab.

<script type="text/javascript">
// Check if the sessionStorage object exists
if(sessionStorage){
// Store data
sessionStorage.setItem("blog_name", "AskmeSiebel");

// Retrieve data
alert("Hi, This is " + sessionStorage.getItem("blog_name"));
} else{
alert("Sorry, your browser do not support session storage.");
}
</script>

Start using this in Siebel OpenUI examples and share what do you think about this using in our Siebel.

Comment section is waiting for you!!

[su_divider style=”dotted”]

@skmeSiebel