如何设置可以离线访问的 JSON 数据集？答案

【问题标题】：How do I set up a JSON data set that can be accessed offline?如何设置可以离线访问的 JSON 数据集？
【发布时间】：2016-11-15 13:33:03
【问题描述】：

我正在尝试构建一个包含多个用户可以离线使用和导航的页面的移动应用程序。它将具有搜索功能以在其内部查找某些页面。在之前的问题中，有人告诉我设置 JSON 数据集是最好的方法；但是，我阅读的关于 JSON 数据集和访问它们的每个示例、教程或书籍都与与服务器和浏览器的通信有关。我将如何设置 JSON 数据集并设置用户与其交互或通过调用以离线访问 JSON 数据集的能力？我只是假设它与我目前看到的示例不同

【问题讨论】：

如果LocalStorage 可用，您可以存储数据的字符串化版本。
您可以将JSON 存储在html 文档中或使用WebWorker 将JSON 提供给使用html 的本地html 文档postMessage
将您所有的 JSON 数据存储到您尊敬的数据库中的一列中，您可以长时间离线使用，并且在清除浏览器历史记录或 Cookie 后您的数据不会丢失。

标签： javascript jquery html json search

【解决方案1】：

您可以使用 localStorage 将 JSON 数据存储在浏览器中。

假设您在服务器上有一个名为 data.json 的文件，其内容如下：

[{ "name":"Name1", "surname":"Surname1" },
 { "name":"Name2", "surname":"Surname2"},
 { "name":"Name3", "surname":"Surname3" },
 { "name":"Name4", "surname":"Surname4" }]

当用户第一次访问移动应用程序时，您可以调用服务器，获取 JSON 数据并使用localStorage 将其存储在浏览器中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.getJSON("data.json", function (data) {
            localStorage.setItem('users', JSON.stringify(data));
        });
    });
</script>

谷歌浏览器 -> 资源 -> 本地存储：

现在您的 JSON 对象已存储在本地，您可以从本地存储中检索它并在您的应用程序中使用它，而无需连接到服务器。只要确保您始终执行 null 检查以确保数据仍然存在于本地，如果它你不需要发起服务器调用吗：

var users = JSON.parse(localStorage.getItem('users'));

if (users != null) {
    for (var i = 0; i < users.length; i++) {
        alert(users[i].name + " " + users[i].surname);
    }
}

【讨论】：

这太棒了，非常感谢，非常清晰透彻的解释
我唯一的问题，你能解释一下这条线在做什么吗？
它在 CDN 上添加了对 jQuery 库的引用。因此，不是将 jQuery 库文件作为您网站的一部分托管，而是使用 CDN 并让其他人为您托管。我总是使用它在我发布在 Stackoverflow 上的答案中，以便用户可以复制并粘贴我发布的代码，它会起作用。
啊，好的，我明白了，谢谢你的解释，你帮了我很大的忙，我很感激！

【解决方案2】：

您可以使用 sqlite 来保存您已经抓取的数据。因此，您可以决定在用户在线时再次抓取整个数据，还是只抓取新内容：

https://developer.android.com/training/basics/data-storage/databases.html

另一种可能性是将您的数据下载为 .json 文件并将其加载到您的应用程序中。所以你需要用户的读写权限。

【讨论】：