Cache JSON object using jquery and retrieve it

Question

I want to cache the following JSON object in the page so that I can retrieve it on another page.

var test = {
        "lists":["list1","list2","list3","list4","list5"],
        "maps": {  
            "key4":"value4","key3":"value3","key5":"value5","key2":"value2","key1":"value1"
        },
        "number1":123456789,
        "numberarray1":[1,2,3,4,5,6,7,8,9],
        "string1":"A",
        "stringarray1":["A1","B1"]
    }

How do I cache it and retrieve it again?

Is this possible? If not are there other ways that I can save my JSON object and then retrieve it on another page.

Thank you.

If the "other page" is an entirely different page requireing a page refresh to access it, the only way you can store it is through either cookies or HTML5 storage, both of which are string only storage. — Kevin B, Oct 05 '12 at 15:25
You going to need to do use a [cookie](https://developer.mozilla.org/en-US/docs/DOM/document.cookie) or [localstorage](https://developer.mozilla.org/en-US/docs/DOM/Storage) — Selvakumar Arumugam, Oct 05 '12 at 15:25
yes i am talking about the html. so how can i do the cookie saving via jquery? if the data is confidential, is it safe to use? — newbie, Oct 05 '12 at 15:27

score 10 · Accepted Answer · answered Oct 05 '12 at 15:30

10

save that tasty cookie

$.cookie("test-data", JSON.stringify(test));

get that sweet cookie back

var test =  JSON.parse($.cookie("test-data"));

http://www.electrictoolbox.com/jquery-cookies/

answered Oct 05 '12 at 15:30

nicholmikey

348
2
16

my problem in using cookie is that it is permanent.. i cannot do this if(test == null) ... then create a cookie else.. use saved cookie... BECAUSE what if the json object is updated. – newbie Oct 05 '12 at 15:52
Well, that will be an issue no matter how you store it, web database or cookie. – nicholmikey Oct 05 '12 at 15:54
Can you give more details about what you are trying to do? What the final product is supposed to be? – nicholmikey Oct 05 '12 at 15:58
i received a json object by calling a url but retrieving it is so slow... 2min/retrieval... i need to use that json object in two of my pages... that's why i need to save it in order to retrieve it very fast. so if i reload my page, or if i go to the next page, the loading will be faster. Note: that json object can change... so i cannot store it in a cookie – newbie Oct 05 '12 at 16:01
that's why i think i need just to cache the data... because it is more likely temporary? – newbie Oct 05 '12 at 16:03
When you create a cookie you can specify an expiration time. So if you think the data will be valid for an hour, set it to expire in an hour. Another option would be an AJAX call that can be used to find out if the data has changed, if that can be done faster than retrieving the data. – Barmar Oct 05 '12 at 16:10
expiration example : http://stackoverflow.com/questions/1830246/how-to-expire-a-cookie-in-30-minutes-using-jquery – nicholmikey Oct 05 '12 at 16:27
What are you getting that takes 2 minutes? Do you control the service providing the json? – nicholmikey Oct 05 '12 at 16:28
cannot control the json provider... is this $.cookie a session cookie? – newbie Oct 05 '12 at 16:39
if it is, then this cookie will be ok to use. :) – newbie Oct 05 '12 at 16:40
Yes it is a session cookie , or you can set a lifespan – nicholmikey Oct 05 '12 at 16:56

score 4 · Answer 2 · edited Nov 15 '16 at 03:17

In addition to the provided answers, in more complex scenarios I would recommend using jStorage plugin.

Description from the website:

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. Additionally jStorage is library agnostic, it works well with any other JavaScript library on the same webpage, be it jQuery, Prototype, MooTools or something else. Though you still need to have either a third party library (Prototype, MooTools) or JSON2 on the page to support older IE versions.

jStorage supports storing Strings, Numbers, JavaScript objects, Arrays and even native XML nodes. jStorage also supports setting TTL values for auto expiring stored keys and - best of all - notifying other tabs/windows when a key has been changed or publishing/subscribing to events from the same or another tab/window, which makes jStorage also a local PubSub platform for web applications.

If jStorage is loaded on the page localStorage and sessionStorage polyfills are added to IE6 and IE7 in addition to regular $.jStorage methods. You can use regular setItem/getItem methods with the polyfills but getter/setters can be used as well - localStorage.mykey = myval; is absolutely valid with jStorage. The only downside is that you can't use onstorage event, you need to fall back to listenKeyChange instead.

jStorage is pretty small, about 10kB when minified and 4kB gzipped.

score 1 · Answer 3 · answered Oct 05 '12 at 15:25

1

Are you talking about caching in HTML? You could always use LocalStorage which will make it available to any pages in the same domain.

If you combine that with Modernizr and cookies, you can end up with some kind of solution.

answered Oct 05 '12 at 15:25

Maxime Rouiller

13,614
9
57
107

Cache JSON object using jquery and retrieve it

3 Answers3