将JSON存储在HTML属性中的最佳方法？

Question

我需要将JSON对象放入HTML元素的属性中。

1. HTML不必验证。

昆汀回答： 将JSON存储在data-*有效HTML5
的attribute中。

1. JSON对象可以是任何大小-即巨大

2. 如果JSON包含特殊字符怎么办？ 例如 {foo: '<"bar/>'}

昆汀回答：按照常规惯例，将JSON字符串放入属性之前，先对其进行编码。 对于PHP，请使用
htmlentities() 函数。

编辑-使用PHP和jQuery的示例解决方案

将JSON写入HTML属性：

<?php
    $data = array(
        '1' => 'test',
        'foo' => '<"bar/>'
    );
    $json = json_encode($data);
?>

<a href="#" data-json="<?php echo htmlentities($json, ENT_QUOTES, 'UTF-8'); ?>">CLICK ME</a>

使用jQuery检索JSON：

$('a').click(function() {

    // Read the contents of the attribute (returns a string)
    var data = $(this).data('json');

    // Parse the string back into a proper JSON object
    var json = $.parseJSON($(this).data('json'));

    // Object now available
    console.log(json.foo);

});

Answer 1

HTML不必验证。

为什么不？验证真的很容易进行质量检查，它会捕获很多错误。使用HTML 5 data-*属性。

JSON对象可以是任何大小（即巨大）。

我还没有看到有关属性大小的浏览器限制的任何文档。

如果确实遇到了问题，请将数据存储在中<script>。定义一个对象，然后将ids 映射到该对象中的属性名称。

如果JSON包含特殊字符怎么办？（例如{test：’<“ myString />’}）

只需遵循将不可信数据包含在属性值中的常规规则即可。使用&和"（如果将属性值用双引号引起来）或'（如果将属性值用单引号引起来）。

但是请注意，它不是JSON（这要求属性名称为字符串，并且字符串只能用双引号分隔）。