HTML5 – Local Storage

For native applications, the operating system typically provides an abstraction layer for storing and retrieving application-specific data , This data may be stored in the registry, INI files, XML files, or some other place according to platform convention.

Earlier, this was done with cookies. Cookies are not suitable for large amounts of data, because

  • Cookies are included with every HTTP request, there by slowing down your web application by needlessly transmitting the same data over and over
  • Cookies are included with every HTTP request, there by sending data unencrypted over the internet
  • Cookies are limited to about 4 KB of data — enough to slow down your application, but not enough to be terribly useful

What we really want is?

  • a lot of storage space
  • on the client
  • that persists beyond a page refresh
  • and isn’t transmitted to the server

Before HTML5, all attempts to achieve this were ultimately unsatisfactory in different ways.

HTML5 Storage

it’s a way for web pages to store named key/value pairs locally, within the client web browser.

HTML5 offers two new objects for storing data on the client:

  • sessionStorage – stores data for one session
  • localStorage – stores data with no time limit

HTML5 Storage is based on named key/value pairs. You store data based on a named key, and then you can retrieve that data with the same key.

The sessionStorage Object

To create a sessionStorage:

<script type=”text/javascript”>

sessionStorage.Fname=”Maha”;

sessionStorage.lname=”Elbasuony”;

document.write(“The FirstName: “+sessionStorage.Fname+” And The LastName : “+sessionStorage.Lname”);

</script>

OUTPUT

the FirstName: Maha & The LastName: Elbasuony

The localStorage Object

To create a localStorage

<script type=”text/javascript”>

localStorage.Fname=”Maha”;

localStorage.lname=”Elbasuony”;

document.write(“the FirstName: ” + localStorage.Fname + ” & The LastName: “+localStorage.lname);

</script>

OUTPUT

the FirstName: Maha & The LastName: Elbasuony

Also API is extremely straight forward and basically consists of 4 main methods:

  1. setItem(key, value)
  2. getItem(key)
  3. removeItem(key)
  4. clear()

to Set a key/value pair & Retrieves the current value associated with the Web Storage key use getItem() & setItem() methods

<script type=”text/javascript>

var foo = localStorage.getItem(“bar”);

localStorage.setItem(“bar”, foo);

document.write(localStorage.getItem(“bar”));

</script>

OUTPUT

foo

To remove the value for a given named key

<script type=”text/javascript>

localStorage.removeItem(“bar”);

document.write(localStorage.getItem(“bar”));

</script>

OUTPUT

NULL

Clear the entire storage area

localStorage.clear();

Tracking Changes to the HTML5 Storage Area

If you want to keep track programmatically of when the storage area changes, you can trap the storage event. The storage event is fired on the window object whenever setItem(), removeItem(), or clear() is called and actually changes something.

HTML5 Storage in Action

In Halma game, There’s a small problem with the game, if you close the browser window mid-game, you’ll lose your progress. But with HTML5 Storage, we can save the progress locally, within the browser itself

Make a few moves, then close the browser tab, then re-open it. If your browser supports HTML5 Storage, the demonstration page should magically remember your exact position within the game, the position of each of the pieces on the board, and even whether a particular piece is selected.

Try  😀

http://diveintohtml5.org/examples/localstorage-halma.html

 

 

With My Best Wishes

Maha Elbasuony

,

  1. 10 Articles Introduction to HTML5 is Done ! « DevelopersMix's Blog
  2. wordpress

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: