how to store data in local browser & retrieve back from it

Question

i have json data below, i want to store those data in my browser & finally i want to get back those data from my browser if user request it from a textbox. How to do this stuffs?

Actually, i am a server side programmer, this is my second javascript/jquery demo example. I am basically trying to learn these stuffs with the help of creating demo. Please help me to learn.

i have jason data obtained by calling remote websites(eg. www.google.com/finance/....)

{
    "list": {
        "meta": {
            "type": "resource-list",
            "start": 0,
            "count": 168
        },
        "resources": [{
                "resource": {
                    "classname": "Quote",
                    "fields": {
                        "name": "USD/KRW",
                        "price": "1062.280029",
                        "symbol": "KRW=X",
                        "ts": "1396294510",
                        "type": "currency",
                        "utctime": "2014-03-31T19:35:10+0000",
                        "volume": "0"
                    }
                }
            }, {
                "resource": {
                    "classname": "Quote",
                    "fields": {
                        "name": "SILVER 1 OZ 999 NY",
                        "price": "0.050674",
                        "symbol": "XAG=X",
                        "ts": "1396287757",
                        "type": "currency",
                        "utctime": "2014-03-31T17:42:37+0000",
                        "volume": "217"
                    }
                }
            }


        ]
    }
}

Answer 1

There are several types of browser storage such as localStorage they are all built in and can be used directly.

Storage objects are a recent addition to the standard. As such they may not be present in all browsers.........The maximum size of data that can be saved is severely restricted by the use of cookies.

Code sample:

  function storeMyContact(id) {
    var fullname    = document.getElementById('fullname').innerHTML;
    var phone       = document.getElementById('phone').innerHTML;
    var email       = document.getElementById('email').innerHTML;
    localStorage.setItem('mcFull',fullname);
    localStorage.setItem('mcPhone',phone);
    localStorage.setItem('mcEmail',email);
  }

On the other hand, localStorage might not be enough, therefore, external libraries come to hand which actually utilize the browsers built in storage and make the db works cross browsers.

1- SQL like DB sequelsphere (looks like suitable for heavy lifting!)

Code sample for query that will run directly from the browser:

SELECT empl_id, name, age 
  FROM empl 
 WHERE age < 30 

2- JSON like DB taffydb (looks like suitable for every day activity!)

// Create DB and fill it with records
var friends = TAFFY([
    {"id":1,"gender":"M","first":"John","last":"Smith","city":"Seattle, WA","status":"Active"},
    {"id":2,"gender":"F","first":"Kelly","last":"Ruth","city":"Dallas, TX","status":"Active"},
    {"id":3,"gender":"M","first":"Jeff","last":"Stevenson","city":"Washington, D.C.","status":"Active"},
    {"id":4,"gender":"F","first":"Jennifer","last":"Gill","city":"Seattle, WA","status":"Active"}   
]);

   // Find all the friends in Seattle
   friends({city:"Seattle, WA"});

3- jstorage is a cross-browser key-value store database to store data locally in the browser - jStorage supports all major browsers, both in desktop (yes - even Internet Explorer 6) and in mobile.

If you would like to have more options ->(client-side-browser-database)

Answer 2

Using jQuery and Localstorage you could do:

Set item:

localStorage.setItem('myJSON',yourJSONString);

Remove item:

localStorage.removeItem('myJSON');

Get item:

var JSONString = localStorage.getItem('myJSON');