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

Question

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

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

然后我在回调中检索数据，如下所示：

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

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

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

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

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

日志告诉我未定义。所以看起来我可以在 data- 属性中存储简单的字符串，但我无法存储 JSON 对象...

我也尝试过使用这个语法，但没有运气：

<div data-foobar='{"foo":"bar"}'></div>

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

Answer 1

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

<div data-foobar='{"foo":"bar"}'></div>

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

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

（注意：为了使 data- 属性自动指定为 Object 类型而不是 String 类型，您必须小心编写有效的 JSON，特别是将键名称括在双引号中）。

Answer 2

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

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

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

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

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

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

Answer 3

这对我来说就是这样的。

对象

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

设置

使用 encodeURIComponent() 并设置为属性：

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

Get

要将值作为对象获取，请使用 decodeURIComponent()，属性值：

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

Answer 4

存储序列化数据的许多问题可以通过转换序列化字符串 到 base64。

Base64 字符串几乎可以在任何地方被接受，没有什么大惊小怪的。

看一下：

• btoa()

WindowOrWorkerGlobalScope.btoa()方法创建一个base-64编码的
String 对象中的 ASCII 字符串，其中的每个字符
string 被视为二进制数据的一个字节。

• atob()

WindowOrWorkerGlobalScope.atob() 函数解码数据字符串
它已使用 base-64 编码进行编码。

根据需要进行转换。

Answer 5

有一种更好的方法在 HTML 中存储 JSON：

HTML

<script id="some-data" type="application/json">{"param_1": "Value 1", "param_2": "Value 2"}</script>

JavaScript

JSON.parse(document.getElementById('some-data').textContent);

Answer 6

将 window.btoa 和 window.atob 结合使用
JSON.stringify 和 JSON.parse。

- 这适用于包含单引号的字符串

对数据进行编码：

var encodedObject = window.btoa(JSON.stringify(dataObject));

对数据进行解码：

var dataObject = JSON.parse(window.atob(encodedObject));

---

这是稍后如何构造和解码数据的示例
与点击事件。

构造 html 并对数据进行编码：

var encodedObject = window.btoa(JSON.stringify(dataObject));

"<td>" + "<a class='eventClass' href='#' data-topic='" + encodedObject + "'>" 
+ "Edit</a></td>"

在点击事件处理程序中解码数据：

$("#someElementID").on('click', 'eventClass', function(e) {
            event.preventDefault();
            var encodedObject = e.target.attributes["data-topic"].value;
            var dataObject = JSON.parse(window.atob(encodedObject));

            // use the dataObject["keyName"] 
}

Answer 7

对我来说，它是这样工作的，因为我需要将它存储在模板中...

// Generate HTML
var gridHtml = '<div data-dataObj=\''+JSON.stringify(dataObj).replace(/'/g, "\\'");+'\'></div>';

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

Answer 8

对我来说，诀窍是在键和值周围添加双引号。如果您使用像 json_encode 这样的 PHP 函数，将为您提供一个 JSON 编码字符串以及如何正确编码您的字符串的想法。

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

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

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

1. "{test: 1}" （test 周围没有双引号）。
2. "{'test': 1}" （'test' 使用单引号而不是双引号）。
3. "'test'" （'test' 使用单引号而不是双引号）。
4. ".1"（数字必须以数字开头；"0.1" 有效）。
5. "undefined"（undefined 不能用 JSON 字符串表示；但是 null 可以）。
6. "NaN" （NaN 不能用 JSON 字符串表示；无穷大的直接表示也是 n

Answer 9

这段代码对我来说工作得很好。

使用 btoa 编码数据

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

，然后使用 atob 解码

let tourData = $(this).data("json");
tourData = atob(tourData);

Answer 10

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

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

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

Answer 11

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

作为替代方案，我最终将数据写入 dom，并在需要时将其解析回来。也许它的效率较低，但对于我的目的来说效果很好，因为我实际上是在对数据进行原型设计，而不是为了生产而编写它。

为了保存我使用的数据：

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

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

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

如果我要使用 Chrome 的调试器检查元素，这样做也会使数据出现在 dom 中。

Answer 12

.data() 适用于大多数情况。我唯一遇到的问题是 JSON 字符串本身有单引号。我找不到任何简单的方法来解决这个问题，所以采用了这种方法（我使用 Coldfusion 作为服务器语言）：

    <!DOCTYPE html>
        <html>
            <head>
                <title>
                    Special Chars in Data Attribute
                </title>
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
                <script>
                    $(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.
                    });
                </script>
                <title>
                    Title of the document
                </title>
            </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 -->
                <div id="xxx" data-xxx='#urlencodedformat(serializejson(str))#'>
                </div>
            </body>
        </html>

Answer 13

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

<div id="my-data-div" data-namesarray='[]'></div>

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);

Answer 14

!DOCTYPE html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$("#btn1").click(function()
{
person = new Object();
person.name = "vishal";
person.age =20;
    $("div").data(person);
});
  $("#btn2").click(function()
{
    alert($("div").data("name"));
});

});

</script>
<body>
<button id="btn1">Attach data to div element</button><br>
<button id="btn2">Get data attached to div element</button>
<div></div>
</body>


</html>

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

Answer 15

我在 https://oblik.dev/utilities/config/ 中找到了更好的方法
基本上他们所做的是有一个解析器从类似 json 的对象不带双引号：

import { Parser } from 'oblik/utils/config'

let parser = new Parser()
let result = parser.parse('foo: bar, !baz')
console.log(result) // { foo: "bar", baz: false }

更多示例：

<div ob-foo="text: Hello, num: 42">My Foo component</div>

我希望看到类似这种标准化格式的东西