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

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

HTML不必验证。

昆汀回答：这是有效的HTML5

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

森喜朗回答：

---

如果JSON包含特殊字符怎么办？e、 g.

{foo:'这里没什么特别的。在PHP中，让JSON字符串运行
htmlspecialchars
，以确保没有特殊字符可以解释为HTML。在Javascript中，无需转义；只需设置属性即可

HTML不必验证

为什么不呢？验证非常容易，会发现很多错误。使用HTML5
data-*
属性

JSON对象可以是任意大小（即，巨大）

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

如果确实遇到它们，则将数据存储在
中。定义一个对象并将元素
id
s映射到该对象中的属性名称

如果JSON包含特殊字符怎么办？（例如{test:'，取决于您将它放在哪里


按照您的要求，在
中，您需要确保JSON不包含可能启动标记、HTML注释、嵌入式doctype等的HTML特殊项。您至少需要转义

在事件处理程序中，您需要确保JSON保留其含义，即使它具有类似HTML实体的内容，并且不会打破属性边界（
“
或
”
）

对于前两种情况（以及对于旧的JSON解析器），您应该对U+2028和U+2029进行编码，因为它们在JavaScript中是换行符，即使它们在JSON中未编码的字符串中是允许的

为了保证正确性，您需要转义
\
和JSON引号字符，始终对NUL进行编码从来都不是一个坏主意

如果HTML可能在没有内容编码的情况下提供，则应编码
+
，以防止出现错误

在任何情况下，以下转义表都将起作用：


NUL->
\u0000
CR->
\n
或
\u000a
LF->
\r
或
\u000d
“
->
\u0022
&
->
\u0026
”
->
\u0027
+
->
\u002b
/
->
\/
或
\u002f
\u003c

->
\u003e
\
->
\
或
\u005c
->
\u2028
U+2029->
\u2029

因此，文本
Hello，！
的JSON字符串值（末尾有一个换行符）将是
“Hello，\u003cWorld\u003e！\r\n”
，您可以使用knockoutjs

<p>First name: <strong data-bind="text: firstName" >todo</strong></p>
<p>Last name: <strong data-bind="text: lastName">todo</strong></p>

输出

名字：杰森
姓氏：蒙特罗索

选中此项：
你能做的就是像这样在你的元素周围使用cdata

<![CDATA[  <div class='log' mydata='${aL.logData}'>${aL.logMessage}</div>     ]]>  

${aL.logMessage}]>

其中mydata是一个原始json字符串。希望这对您和其他人有所帮助。
另一种方法是将json数据放入
标记中，但不是使用
type=“text/javascript”
，而是使用
type=“text/bootstrap”
或
type=“text/json”
类型，以避免javascript执行

然后，在程序的某个地方，您可以通过以下方式请求：

function getData(key) {
  try {
    return JSON.parse($('script[type="text/json"]#' + key).text());
  } catch (err) { // if we have not valid json or dont have it
    return null;
  } 
}

在服务器端，您可以执行以下操作（本例使用php和）：


{{my_model}json_encode（）| raw}
另一个选项是对JSON字符串进行base64编码，如果需要在javascript中使用它，请使用
atob（）
函数对其进行解码

var data = JSON.parse(atob(base64EncodedJSON));

可以使用的另一种方法是将JSON数据作为base64字符串存储在属性中，然后使用
window.atob
或
window.btoa
将其还原为可用的JSON数据

<?php
$json = array("data"=>"Some json data thing");
echo "<div data-json=\"".base64_encode(json_encode($json))."\"></div>";
?>

对于简单的JSON对象，下面的代码可以工作

编码：

var jsonObject = { numCells: 5, cellWidth: 1242 };
var attributeString = escape(JSON.stringify(jsonObject));

解码：

var jsonString = unescape(attributeString);
var jsonObject = JSON.parse(jsonString);

您可能应该解释原因并要求不同的解决方案，因为我很确定这不是最好的。您可以使用data something属性，但我不确定它们是否可以容纳“大量”文本。至于特殊字符，您可以只编码（escape（）和unescape（））文本。是的，限制为65536个字符（）顺便说一句，如果您的属性名为
data json
，您应该使用
$（this）.data（'json'）
，jQuery已经涵盖了这一部分。请注意，不需要将数据后缀命名为json。如果您在任何data-custom_属性中放入有效的json，它将与jQuery一起工作。请修复大括号序列）}；=>；那么你是说我应该在将其放入HTML属性之前执行
htmlentities（$json）
？那么，当我想在jQuery中阅读它时，我该如何解码它呢？那么，我如何使用jQuery以与PHP相同的方式写回它呢？你是说我应该在将它放入html属性之前进行html_编码（$json）如果您使用的是PHP，那么就可以了。那么，当我想在jQuery中阅读它时，我该如何解码呢从属性中解码？当浏览器将HTML解析为DOM时，它就会这样做。然后，我如何使用jQuery以与PHP相同的方式编写它呢您正在设置DOM节点的属性，而不是生成原始HTML，浏览器会处理它。此时我遇到了一个问题，我的浏览器当前没有在Google Chrome上解码它，当我去解析JSON时，所有HTML实体都在那里并且失败了。如果您将它放在脚本标记中，由于脚本标记的特殊处理，您必须以不同的方式进行转义。e、 g.一个包含的值将结束脚本标记。这个解决方案是如何工作的？如果我想储存像这样的东西呢<
var data = JSON.parse(atob(base64EncodedJSON));

<?php
$json = array("data"=>"Some json data thing");
echo "<div data-json=\"".base64_encode(json_encode($json))."\"></div>";
?>

var jsonObject = { numCells: 5, cellWidth: 1242 };
var attributeString = escape(JSON.stringify(jsonObject));

var jsonString = unescape(attributeString);
var jsonObject = JSON.parse(jsonString);