1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Introduction to Web Storage

Discussion in 'Web Development' started by pradeep, Nov 22, 2013.

  1. pradeep

    pradeep Team Leader

    Apr 4, 2005
    Likes Received:
    Trophy Points:
    Kolkata, India
    Home Page:
    Web Storage also known as DOM storage is web application technology which allows storage of data inside a web browser. It is similar to storing data in cookies but the capacity is huge, but unlike cookies no stored data is sent over to the server with each request. Web storage can store both persistent or session based data, and key value pair but only of string data type and nothing else.

    This allows developers to cache/store data on the client end and save time fetching data from server or as a fail-safe to failed internet connection, an example would be Wordpress where when you compose a post the details are stored into the Web storage and in case of a browser crash or failed submit to the server Wordpress easily recovers it an shows it.

    Generally all browsers allow at least 5MB data to be stored per origin i.e. hostname, and it is user configurable. There are two types of storage types sessionStorage and localStorage, and it can be accessed using the JavaScript API, Web storage is supported by Firefox 2+, Safari 4+, Chrome 4+, Opera 10.50+, IE8+ onwards. Next we'll be looking into a few code examples in which we try using Web storage functionality.

    Accessing Web Storage using the JavaScript API

    Make sure you have a web browser from the above mentioned list to try the following code sample.

    // Store value
    localStorage.setItem('myKey', {
        val: 'myValue'
    // Retrieve
    alert(typeof localStorage.getItem('myKey'));
    // Store an JavaScript object using JSON
    localStorage.setItem('myKey', JSON.stringify({
        val: 'myValue',
        val2: 'myValue2'
    // Retrieve
    shabbir likes this.

Share This Page