将JSON对象存储在HTML jQuery的data属性中


Store JSON object in data attribute in HTML jQuery

我使用data-方法在HTML标记中存储数据，如下所示：

1
<td><"button class='delete' data-imagename='"+results[i].name+"'>Delete"</button></td>

然后，我在这样的回调中检索数据：

1
$(this).data('imagename');

很好 我所坚持的是尝试保存对象，而不仅仅是保存其属性之一。 我试图这样做：

1
<td><button class='delete' data-image='"+results[i]+"'>Delete</button></td>

然后，我尝试像这样访问name属性：

1
2
var imageObj = $(this).data('image');
console.log('Image name: '+imageObj.name);

日志告诉我undefined。 所以看来我可以在data-属性中存储简单的字符串，但不能存储JSON对象...

我也尝试过使用这种语法的孩子，但运气不好：

1
 

关于如何使用data-方法将实际对象存储在HTML标记中的任何想法？

实际上，您的最后一个示例：

1
 

似乎运行良好(请参阅http://jsfiddle.net/GlauberRocha/Q6kKU/)。

令人高兴的是，data-属性中的字符串会自动转换为JavaScript对象。相反，我认为这种方法没有任何缺点！一个属性足以存储整套数据，可以通过对象属性在JavaScript中使用。

(注意：要为data-attribute属性自动分配为Object类型而不是String类型，您必须小心编写有效的JSON，尤其是将键名括在双引号中)。

相关讨论

而不是将其嵌入文本中，只需使用$('#myElement').data('key',jsonObject);

它实际上不会存储在html中，但是如果您使用的是jquery.data，则无论如何都是抽象的。

要获取JSON，请不要解析它，只需调用：

1
var getBackMyJSON = $('#myElement').data('key');

如果获取的是[Object Object]而不是直接JSON，只需通过数据键访问JSON：

1
var getBackMyJSON = $('#myElement').data('key').key;
相关讨论

这就是它为我工作的方式。

宾语

1
var my_object ={"Super Hero":["Iron Man","Super Man"]};

组

使用encodeURIComponent()对字符串化的对象进行编码，并将其设置为属性：

1
2
var data_str = encodeURIComponent(JSON.stringify(my_object));
$("div#mydiv").attr("data-hero",data-str);

得到

要将值作为对象获取，请使用decodeURIComponent()属性值解析解码后的内容：

1
2
var data_str = $("div#mydiv").attr("data-hero");
var my_object = JSON.parse(decodeURIComponent(data_str));

对我来说，它就像那样工作，因为我需要将其存储在模板中。

1
2
3
4
5
// Generate HTML
var gridHtml = '';

// Later
var dataObj = $('div').data('dataObj'); // jQuery automatically unescape it
相关讨论

通过将序列化的字符串转换为base64，可以解决存储序列化数据的许多问题。

base64字符串几乎可以在任何地方接受而不必大惊小怪。

看一眼：

  • btoa()

The WindowOrWorkerGlobalScope.btoa() method creates a base-64 encoded
ASCII string from a String object in which each character in the
string is treated as a byte of binary data.

  • atob()

The WindowOrWorkerGlobalScope.atob() function decodes a string of data
which has been encoded using base-64 encoding.

根据需要转换。

相关讨论

对我来说，技巧是在键和值周围添加双引号。如果您使用类似json_encode的php函数，则会为您提供json编码的字符串以及如何正确编码您的字符串的想法。

如果字符串正确编码为json，则jQuery('＃elm-id')。data('datakey')将返回字符串的对象。

根据jQuery文档：(http://api.jquery.com/jquery.parsejson/)

传递格式错误的JSON字符串会引发JavaScript异常。例如，以下都是无效的JSON字符串：

  • " {test：1}"(测试周围没有双引号)。
  • " {'test'：1}"('test'使用单引号而不是双引号)。
  • "'test'"(" test"使用单引号而不是双引号)。
  • " .1"(数字必须以数字开头；" 0.1"有效)。
  • "未定义"(未定义不能用JSON字符串表示；但是可以为null)。
  • " NaN"(NaN不能用JSON字符串表示； Infinity的直接表示也为n

    • 这段代码对我来说很好用。

    使用btoa编码数据

    1
    2
    let data_str = btoa(JSON.stringify(jsonData));
    $("#target_id").attr('data-json', data_str);

    然后用atob解码

    1
    2
    let tourData = $(this).data("json");
    tourData = atob(tourData);
    相关讨论

    1
    !DOCTYPE html>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    $("#btn1").click(function()
    {
    person = new Object();
    person.name ="vishal";
    person.age =20;
        $("div").data(person);
    });
      $("#btn2").click(function()
    {
        alert($("div").data("name"));
    });

    });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <body>
    <button id="btn1">Attach data to div element</button>
    <button id="btn2">Get data attached to div element</button>

    </body>


    </html>

    Anser:-Attach data to selected elements using an object with name/value pairs.
    GET value using object propetis like name,age etc...

    作为记录，我发现以下代码有效。它使您能够从数据标签中检索数组，将新元素压入，然后以正确的JSON格式将其存储回数据标签中。因此，如果需要，可以再次使用相同的代码将其他元素添加到数组中。我发现$('#my-data-div').attr('data-namesarray', names_string);正确存储了数组，但是$('#my-data-div').data('namesarray', names_string);无法正常工作。

    1
    2
    3
    4
    var names_array = $('#my-data-div').data('namesarray');
    names_array.push("Baz Smith");
    var names_string = JSON.stringify(names_array);
    $('#my-data-div').attr('data-namesarray', names_string);

    .data()在大多数情况下均可完美运行。我唯一的问题是JSON字符串本身带有单引号。我找不到任何简单的方法来克服这个问题，所以诉诸这种方法(我使用Coldfusion作为服务器语言)：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
        <!DOCTYPE html>
            <html>
                <head>
                   
                        Special Chars in Data Attribute
                   
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <script src="https://code.jquery.com/jquery-1.12.2.min.js">
                   
                        $(function(){
                            var o = $("##xxx");
                            /**
                                1. get the data attribute as a string using attr()
                                2. unescape
                                3. convert unescaped string back to object
                                4. set the original data attribute to future calls get it as JSON.
                            */
                            o.data("xxx",jQuery.parseJSON(unescape(o.attr("data-xxx"))));
                            console.log(o.data("xxx")); // this is JSON object.
                        });
                   
                   
                        Title of the document
                   
                </head>
                <body>
                    <cfset str = {name:"o'reilly's stuff",code:1}>
    <!-- urlencode is a CF function to UTF8 the string, serializeJSON converts object to strin -->
                   
                   
                </body>
            </html>

    出于某种原因，仅当在页面上使用一次时，可接受的答案才对我有用，但就我而言，我试图将数据保存在页面上的许多元素上，并且除第一个元素之外，所有这些数据都丢失了。

    作为替代方案，我最终将数据写出到dom，然后在需要时将其解析回去。也许它的效率较低，但是可以很好地达到我的目的，因为我实际上是在对数据进行原型设计，而不是将其编写用于生产。

    保存我使用的数据：

    1
    $('#myElement').attr('data-key', JSON.stringify(jsonObject));

    然后读回数据与接受的答案相同，即：

    1
    var getBackMyJSON = $('#myElement').data('key');

    如果我要使用Chrome的调试器检查元素，以这种方式进行操作也会使数据显示在dom中。

    使用记录的jquery .data(obj)语法，可以将对象存储在DOM元素上。检查该元素将不会显示data-属性，因为没有为该对象的值指定键。但是，可以使用.data("foo")通过键引用对象内的数据，也可以使用.data()返回整个对象。

    因此，假设您设置了循环和result[i] = { name:"image_name" }：

    1
    2
    3
    $('.delete')[i].data(results[i]); // => <button class="delete">Delete</delete>
    $('.delete')[i].data('name'); // =>"image_name"
    $('.delete')[i].data(); // => { name:"image_name" }