JQuery how to read json cache?

Question

According to this answer, I set cache for my json data:

session_start();
if(isset($_SESSION['dataCache'])) {
    echo json_encode($_SESSION['dataCache']);
} else {
    $file = 'data.json';
    if (!is_file($file) || !is_readable($file)) {
        die("File not accessible.");
    }
    $contents = file_get_contents($file);
    $_SESSION['dataCache'] = json_decode($contents, true);
    echo $contents;
}

Now I want to read this cached from javascript by this code:

if(localStorage.getItem("dataCache")) {
    data = JSON.parse(localStorage.getItem("dataCache"));

But, the problem is localStorage.getItem("dataCache") returns null.

How do I read cache that created in PHP session from JavaScript?

You're trying to access a server-side cache from the client-side? That's not going to work. — Robby Cornelissen, Mar 17 '16 at 04:35
Sorry, never worked with caches. Could you please explain how to access server side caches? — Sevi, Mar 17 '16 at 04:38
The fact that you're calling it a cache is just incidental. You're just trying to access server data from the client. This is the basis of mostly any form of web application development, so it might not be unwise to look into that before you start worrying about caching... — Robby Cornelissen, Mar 17 '16 at 04:52

score 1 · Answer 1 · answered Mar 17 '16 at 04:46

The $_SESSION[] will be stored on the server-side (php).

If you want to access it via JavaScript (client-side) then use Ajax to return the JSON and then parse it with your JavaScript. If you need the browser to keep a copy then store it in localStorage after you retrieve it from the server.

score 1 · Accepted Answer · answered Mar 17 '16 at 04:49

Well the problem is $_SESSION value can be set and used on server side only. if you want this content on client side javascript you will have to send a request to php server for dataCache value and then set it in your local storage. You may use ajax call like

$.ajax({url: "getDataCache.php", success: function(result){
        localStorage.setItem('dataCache', result);
    }});

in getDataCache.php you need to do some thing like this

echo json_encode($_SESSION['dataCache']);

After that

if(localStorage.getItem("dataCache")) {
    data = JSON.parse(localStorage.getItem("dataCache"));

will work

A good article on this issue http://www.devshed.com/c/a/php/html5-client-side-cache-in-php/

hope it helps :)

score 1 · Answer 3 · edited May 23 '17 at 12:10

In this article that you mentioned the correct answer has 2 parts. The server side explains how to add information to $_SESSION and send back to view. The client side explains how to get that information and store in client cache. You missed the client side. The answer is talking about ajax call though where the responseText is a json and you need to convert it to string. This part

$.ajax({
    ...
    success: function (res) {
        localStorage.setItem("dataCache", JSON.stringify(res));
    },
    ...
});

Then you can get the cached data later by

if(localStorage.getItem("dataCache")) {
    data = JSON.parse(localStorage.getItem("dataCache"));
} else {
    // Make ajax call, fetch object and store in localStorage in the success or done callbacks as described above
}

Note that in this part you actually test if there is anything on cache else send ajax call get the information and also store in cache. So it would be something like bellow

if(localStorage.getItem("dataCache")) {
    data = JSON.parse(localStorage.getItem("dataCache")); // get from cache
} else {
    $.ajax({
        ...
        success: function (res) {
            var dataToCache = JSON.stringify(res);
            localStorage.setItem("dataCache", dataToCache); // set cache
            data = JSON.parse(dataToCache); // set data
        },
        ...
    });
}

And note that this solution is available on HTML5 as mentioned in the referenced article.

As I understand, before `success` have to be `url: "getDataCacheFromServerSide.php`? — Sevi, Mar 17 '16 at 17:20
Yes, add URL before success. Hre you can find jquery ajax documentation http://api.jquery.com/jquery.ajax/ — Navid, Mar 17 '16 at 17:34

JQuery how to read json cache?

3 Answers3