JQuery如何读取json缓存?

时间:2016-03-17 04:33:23

标签: javascript php jquery json caching

根据this回答,我为我的json数据设置了缓存:

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

现在我想通过以下代码从javascript中读取此缓存:

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

但问题是localStorage.getItem("dataCache")返回null。

如何从JavaScript中读取在PHP会话中创建的缓存?

3 个答案:

答案 0 :(得分:1)

$_SESSION[]将存储在服务器端(php)。

如果你想通过JavaScript(客户端)访问它,那么使用Ajax返回JSON,然后用你的JavaScript解析它。如果您需要浏览器保留副本,请在从服务器检索后将其存储在localStorage中。

答案 1 :(得分:1)

问题是$_SESSION值只能在服务器端设置和使用。 如果您想在客户端javascript上使用此内容,则必须向php服务器发送dataCache值的请求,然后将其设置在local storage中。 您可以使用像

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

getDataCache.php你需要做一些像这样的事情

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

之后

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

将起作用

关于此问题的一篇好文章http://www.devshed.com/c/a/php/html5-client-side-cache-in-php/

希望它有所帮助:)

答案 2 :(得分:1)

this文章中,您提到的正确答案有2个部分。服务器端解释了如何向$ _SESSION添加信息并发送回视图。客户端解释了如何获取该信息并存储在客户端缓存中。你错过了客户端。答案是讨论ajax调用,虽然responseText是一个json,你需要将它转换为字符串。这部分

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

然后您可以稍后通过

获取缓存的数据
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
}

请注意,在这部分中,您实际测试是否有任何缓存,否则发送ajax调用获取信息并存储在缓存中。所以它会像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
        },
        ...
    });
}

请注意,此参考文章中提到的HTML5上提供了此解决方案。