如何重复使用JSON对象

Question

如何重复使用JSON对象

javascriptjqueryjson

5

情境：

MVC网页获取包含大量数据的JSON对象。在点击按钮（存在相当数量的按钮）时，我希望重复使用这个JSON对象并选择所需的JSON属性（无需向服务器发出请求）。

由于它不是HTML5，因此无法使用浏览器本地存储。目前，我在全局变量上存储JSON对象并重复使用它。

是否有任何优雅的选项可用于在客户端存储和重复使用返回的JSON对象？

- Nil Pun

3

"复用"的意思是什么？在页面刷新之间也可以吗？ - Jakub Konecki

全局变量是一种完全可以接受的方式，假设您不需要在页面刷新后重新使用数据。但是，使用某种名称空间方案（适用于您的所有代码）更好：您可以在名称空间内使变量“全局”。 - nnnnnn

@JakubKonecki，在同一页上重复使用。不要在刷新后使用，因为刷新会触发服务器请求 :-) - Nil Pun

1

@nilpun - 比起作用域变量或数据属性，使用scoped variable或data-attribute更好一些... - Jakub Konecki

3个回答

2

另一个选项是创建一个全局变量，您可以在页面上随意更新和检索它。全局变量会附加到window对象上，所以只需在您的<head>部分编写此代码即可。

<script type="text/javascript">
   window.jsonData = {};
</script>

然后无论您在哪里检索数据，只需更新该对象即可。

<script type="text/javascript">
    $.ajax(..., function(data) {
        window.jsonData = data;
    });
</script>

然后你可以在页面上的任何代码中使用它。

<script type="text/javascript">
    console.dir(jsonData);
</script>

- Marko

这种方法和全局变量有什么区别？ - Nil Pun

@nilpun：这种方法是“使用全局变量”吗？ - Bergi

1

你可以将对象存储在元素的 data- 属性中，最好是页面表示数据部分（表格、网格）的容器中：

var json = {};

$('#mygrid').data('mydata', json);

你可以稍后检索它

var json = $('#mygrid').data('mydata')

jQuery data() 方法文档：http://api.jquery.com/data/

- Jakub Konecki

1

@JakubKonecki，Data不是HTML 5属性吗？ - Nil Pun

1

数据属性不是HTML5本地存储。如果您想要，可以在IE4中使用data-attributes。请参见https://dev59.com/UXE95IYBdhLWcg3wMrEB#5696483。 - Marko

数据属性可能是官方的html5，但它们可以在旧版浏览器中使用，至少可以追溯到IE5时代，所以......此外，jQuery的.data()方法可以检索html5样式的数据属性，但它不会将数据存储在元素属性中（它在内部维护自己的结构并为您跟踪元素关联）。 - nnnnnn

@Marko＆nilpun，恐怕你们两个都错了。当您使用data来设置值时，它使用的是jQuery缓存，而不是属性。 - gdoron

1

@Marko - .data() 不会将数据存储在 DOM 对象上。你上面提供的链接并没有说明它这样做，jQuery 的文档也是如此。如果你需要 "证明"，只需考虑到.data()可以存储（更多）不仅仅是字符串... - nnnnnn

显示剩余4条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bergi · Accepted Answer

只需缓存数据，无需将JSON存储在全局变量中。我相信你可以在MVC应用程序中找到一个作用域为本地变量的地方。你需要实现带有回调的数据读取器函数。使用缓存，它看起来像这样：

var getData = (function(){
    var cache;
    var loading = false;
    var callbacks = [];
    return function(callback) {
        if (typeof cache != "undefined")
            callback(cache);
        else {
            callbacks.push(callback);
            if (!loading) {
                loading = true;
                doSingleHeavyAjaxCall(options, function success(data) {
                    cache = data;
                    for (var cb; cb = callbacks.shift();)
                        cb(cache);
                });
            }
        }
     };
 })();

然后，您可以随时使用getData（function callback（data）{...}），它只会触发一个ajax请求。