JQuery如何读取json缓存？

Question

根据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 会话中创建的缓存？

Answer 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/

希望对你有帮助:)

Answer 2

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

如果您想通过 JavaScript（客户端）访问它，请使用 Ajax 返回 JSON，然后使用您的 JavaScript 解析它。如果您需要浏览器保留一份副本，请在从服务器检索到该副本后将其存储在localStorage。

Answer 3

在您提到的this 文章中，正确答案分为两部分。服务器端解释了如何将信息添加到 $_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 调用获取信息并存储在缓存中。所以它会像下面这样

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 上使用，如参考文章中所述。