Question

我的数据具有以下结构：

唯一ID（int）|名字（字符串）|姓氏（字符串）| Pct（双倍）

一组数据可能如下所示：

1 |约翰|汉考克| 49.5
2 |约翰|汉考克| 95.0
3 |简|汉考克| 89.5
4 |简|汉考克| 73.5
5 |简|汉考克| 96.5
6 |弗雷德|打火石| 45.8

我需要的是将这些数据存储在客户端，以便浏览器可以访问它并使用jQuery进行操作。

例如，我在页面上有一个下拉列表（选择），其中包含三个值：

1）低百分位
2）中等百分比
3）高百分位

当用户选择下拉列表中的一个值时，我需要能够从上面的数据中选择符合所选值的项目。例如，如果他们选择Low Percentile值，那么我需要从数据中检索百分比低于60％的所有项目。

我对jQuery非常多才多艺，但我从来没有用它来存储这类客户端检索的任何东西。我可以以某种方式将这些数据存储在客户端的JSON对象中，而JSON对象又可以随意选择和操作吗？

Answer 1

基本上是这样的：

var javascriptObject = $.parseJSON(jsonString);

var jasonString = JSON.stringify(javascriptObject);

Javascript与任何其他OOP非常相似。

var foo = {}; //NEW Object
foo.bar = 1;
foo.bars = 2;
foo.bar.date = 3;
var jsonString = JSON.stringify(foo);
//jsonString is now a "JSON Object" that holds the data found in object foo.
console.log(jsonString); //To see what it looks like.

但是，如果所有这些都是为了客户端使用，只需坚持使用javascript对象。无需将它们转换为JSON。 JSON对象实际上是用于将数据发送到其他源，因为它们是字符串。通常用于AJAX请求。

基于评论的编辑

$(document).ready(function(){
    var globalObject = {};
    globalObject.foo = 1;
    globalObject.bar = 2;

    $(el).change(function(){
        globalObject.foo = $(this).val();
    });
});

Answer 2

JSON代表Javascript Object Notation。如果您熟悉对象，则应该能够使用它。

对于您的示例，我可能会将变量保存为对象数组（因为它首先编号）。希望你不介意将数字重新分配给从零开始的增量（0,1,2 ......）。

如果你想在客户端保存它，也许你可以做这样的事情：

var data = [
{ fname : "John", lname : "Hancock", value : 49.5 },
{ fname : "John", lname : "Hancock", value : 95.0 }
];

这只是前两个例子。然后，您可以使用for循环for(var i=0, count = data.length; i < count; i++)迭代数组，并对data[i].value < 60的数据执行某些操作。

jQuery有一个很好的函数叫.each()，你可以很容易地使用它。此外，如果您需要，可以将JSON保存在.json文件中并由jQuery.getJSON()调用。两者都可以成为了解这一点的良好开端。

Answer 3

虽然我对这个答案并不感到自豪，但它可能会满足您的需求。它也不需要浏览器具有HTML5本地存储。

<input type="hidden" id="json_data" />

<script type="text/javascript>
    var theData = [
        {
            id: 1,
            firstName: 'John',
            lastName: 'Hancock',
            pct: 49.5
        },
        // other objects
        {
            id: 6,
            firstName: 'Fred',
            lastName: 'Flintstone',
            pct: 45.8
        }
    ];
    var dataAsJsonString = JSON.stringify(theData);
    $('#json_data').val(dataAsJsonString); // store data in hidden field

    // later on...
    var getDataBackOut = $.parseJSON($('#json_data').val());
    // you can now iterate over the array to find what you need
</script>

Answer 4

var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);

Use HTML5 Local storage

如何在JSON对象中存储数据

4 个答案: