高效解析 JSON 数据到前端列表答案

【问题标题】：Parsing JSON data efficiently into front end list高效解析 JSON 数据到前端列表
【发布时间】：2014-08-15 19:19:01
【问题描述】：

过去 2 天我一直在浏览，但似乎无法在任何地方找到答案。

我正在使用 PHP 将我的所有 SQL 数据解析为 JSON 格式，这里是 JSON 的一个示例：

[
    {
        "id": "1",
        "name": "Jim",
        "age": "39",
        "address": "12 High Street, London",
        "hasCar": "1",
        "speaksForeignLanguage": "1",
        "canWorkNights": "1",
        "isStudent": "1"
    },
    {
        "id": "2",
        "name": "Fred",
        "age": "29",
        "address": "13 High Street, London",
        "hasCar": "1",
        "speaksForeignLanguage": "1",
        "canWorkNights": "1",
        "isStudent": "0"
    },
    {
        "id": "3",
        "name": "Bill",
        "age": "19",
        "address": "14 High Street, London",
        "hasCar": "1",
        "speaksForeignLanguage": "1",
        "canWorkNights": "0",
        "isStudent": "0"
    },
    {
        "id": "4",
        "name": "Tom",
        "age": "39",
        "address": "15 High Street, London",
        "hasCar": "1",
        "speaksForeignLanguage": "0",
        "canWorkNights": "0",
        "isStudent": "0"
    },
    {
        "id": "5",
        "name": "Cathy",
        "age": "29",
        "address": "16 High Street, London",
        "hasCar": "1",
        "speaksForeignLanguage": "0",
        "canWorkNights": "0",
        "isStudent": "1"
    },
    {
        "id": "6",
        "name": "Petra",
        "age": "19",
        "address": "17 High Street, London",
        "hasCar": "1",
        "speaksForeignLanguage": "0",
        "canWorkNights": "1",
        "isStudent": "0"
    },
    {
        "id": "7",
        "name": "Heide",
        "age": "39",
        "address": "18 High Street, London",
        "hasCar": "1",
        "speaksForeignLanguage": "1",
        "canWorkNights": "0",
        "isStudent": "0"
    },
    {
        "id": "8",
        "name": "William",
        "age": "29",
        "address": "19 High Street, London",
        "hasCar": "1",
        "speaksForeignLanguage": "1",
        "canWorkNights": "0",
        "isStudent": "1"
    },
    {
        "id": "9",
        "name": "Ted",
        "age": "19",
        "address": "20 High Street, London",
        "hasCar": "0",
        "speaksForeignLanguage": "0",
        "canWorkNights": "0",
        "isStudent": "1"
    },
    {
        "id": "10",
        "name": "Mike",
        "age": "19",
        "address": "21 High Street, London",
        "hasCar": "1",
        "speaksForeignLanguage": "0",
        "canWorkNights": "0",
        "isStudent": "1"
    },
    {
        "id": "11",
        "name": "Jo",
        "age": "19",
        "address": "22 High Street, London",
        "hasCar": "0",
        "speaksForeignLanguage": "1",
        "canWorkNights": "0",
        "isStudent": "1"
    }
]

这只是一个示例，并不是我使用的实际数据，我的 JSON 数据每行包含 8 个图像图像链接，并且包含更多字符串数据。

我需要在前端列出最多 120 条记录，这个列表会有过滤的搜索选项。

当客户端访问搜索页面时，我猜他们需要加载所有 JSON 数据，这可能会导致用户体验缓慢。

是否可以根据请求加载 JSON 数据，以便客户端不需要一次加载所有这些数据？因此，例如，可能只请求每页 10 条记录的数据，因此不会加载整个 JSON 文件？

任何建议都会很棒。

【问题讨论】：

当然有，使用local storage。
更改您的 php 脚本以仅提供 10 条记录？
你忘了这个吗？

标签： javascript json

【解决方案1】：

您可以使用local storage。应该是这样的：

// your json data
var json = {};

// you have store it as string
localStorage.setItem("data", JSON.stringify(json));

然后在你需要的页面中，这样获取即可：

var data = localStorage.getItem("data");

// if the "data" key isn't set on the storage, it returns null
if (data != null)
{
    // now deserialize the string to json
    data = JSON.parse(data);
}

本地存储在所有主要浏览器版本中都可用，如您所见here。

【讨论】：