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"
                    }
                }
            }


        ]
    }
}

@BluAngel Thanks for answer but can your delete you demo link on comment. I want to try it by myself. At last if you asked then you can post your link. — user3482559, Apr 01 '14 at 06:12

score 2 · Accepted Answer · answered Apr 01 '14 at 05:57

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');

answered Apr 01 '14 at 05:57

Joakim M

1,793
2
14
29

You should be able to use this in most mobile browsers: http://caniuse.com/#search=local – Joakim M Apr 01 '14 at 06:39
Yep! It will erase previous data! – Joakim M Apr 01 '14 at 11:15
$(document).ready(function(){ yahoo_getdata(); }); was NOT present in your code and therefore nothing happened when entering numbers in the boxes in the JSFiddle you provided. – Joakim M Apr 01 '14 at 12:25
Fetch the values from the local storage (Parse the json). For calculation just use what you get! var first = parseDouble($(".itemOne").text(), 10); var second = parseDouble($(".itemTwo").text(), 10); $(".result").text(one * two); – Joakim M Apr 01 '14 at 12:34

score 0 · Answer 2 · edited May 23 '17 at 12:20

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)

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

2 Answers2