在 HTML 页面中包含隐藏数据以供 javascript 处理
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4745325/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Including hidden data in an HTML page for javascript to process
提问by derekcohen
I produce a complex HTML summary report from data in a database which could be a summary of maybe 200,000 rows in the database. The user can click a link to request an Excel version.
我从数据库中的数据生成一个复杂的 HTML 摘要报告，该报告可能是数据库中 200,000 行的摘要。用户可以单击链接以请求 Excel 版本。
When they do a JS script extracts the key components of the report and stuffs them into a form in a hidden iframe. This form submits to a server-side script which generates the Excel version of the report (without the graphics etc).
当他们执行 JS 脚本时，会提取报告的关键组件并将它们塞入隐藏 iframe 中的表单中。此表单提交到服务器端脚本，该脚本生成报告的 Excel 版本（不含图形等）。
As the calculations for the report are complex and "costly" it makes sense not to run them again to create the Excel version as all the data is on the page already. Also the user may have customised the report once it is loaded and I can use JS to pass those preferences to the form as well so the Excel doc reflects them too.
由于报告的计算复杂且“成本高昂”，因此不要再次运行它们来创建 Excel 版本，因为所有数据都已在页面上。此外，一旦加载报告，用户可能已经自定义了报告，我也可以使用 JS 将这些首选项传递给表单，以便 Excel 文档也能反映它们。
The way I am doing this is to include the following for each component of the report that transfers to a row in the Excel version. I've hiHymaned an HTML tag that isn't otherwise used.
我这样做的方法是为报告的每个组件包含以下内容，这些组件传输到 Excel 版本中的一行。我劫持了一个不使用的 HTML 标签。
<code id="xl_row_211865_2_x" class="rowlabel">Musicals}{40%}{28.6%}{6</code>
The code element above is a summary of the row below in the HTML report which becomes one row in the Excel doc and includes the label and various data elements. There may be a thousand or more such elements in one report.
上面的代码元素是 HTML 报告中下面一行的摘要，它成为 Excel 文档中的一行，包括标签和各种数据元素。一份报告中可能有上千个或更多这样的元素。
As the data contains text I've had to use something like }{as a field separator as this is unlikely to occur in any real text in the report. I have codeset to display:none in the CSS.
由于数据包含文本，我不得不使用类似}{字段分隔符的内容，因为这不太可能出现在报告中的任何真实文本中。我已经code设置为 display:none 在 CSS 中。
When the user wants an Excel version of their report the JS code searches the HTML for any <code>elements and puts their className and innerHTML in the form. The className indicates how to format the row in Excel and the data is then put into adjacent cells on the Excel row.
当用户想要他们报告的 Excel 版本时，JS 代码会在 HTML 中搜索任何<code>元素并将它们的 className 和 innerHTML 放入表单中。className 指示如何格式化 Excel 中的行，然后将数据放入 Excel 行上的相邻单元格中。
The HTML report shows one percentage base (they can toggle between them) but the user preference when requesting an Excel version was to include both.
HTML 报告显示一个百分比基数（他们可以在它们之间切换），但请求 Excel 版本时的用户首选项是同时包含两者。
Is there a better way of doing this?
有没有更好的方法来做到这一点？
(As this is a part of a complex web app no user is going to turn CSS off or lack javascript or they wouldn't get this far) ADDED: I can't use HTML5 as the users are corporates often on older browsers like IE6
（因为这是复杂网络应用程序的一部分，没有用户会关闭 CSS 或缺少 javascript，否则他们不会走这么远）补充：我不能使用 HTML5，因为用户通常是使用 IE6 等旧浏览器的公司
采纳答案by David M?rtensson
Use the new data- attributes
使用新的数据属性
http://www.javascriptkit.com/dhtmltutors/customattributes.shtml
http://www.javascriptkit.com/dhtmltutors/customattributes.shtml
<div data-row="[["Musicals",40,28.6,6], ...]">
The div could be the TDtag or TRtag or any other relevant tag already related to the row and the "is the escaped ".
div 可以是TD标签或TR标签或已经与行相关的任何其他相关标签，并且"是转义的".
That makes the data hidden from view and also ensures that there will come standard solutions to process the data.
这使得数据从视图中隐藏，并确保将出现处理数据的标准解决方案。
Also for encoding data I would suggest using JSONas that is also a standard that is easy to use.
同样对于编码数据，我建议使用JSON，因为这也是一个易于使用的标准。
回答by Spudley
Standard solutions:
标准解决方案：
1) Use a Javascript data block:
1）使用Javascript数据块：
<script>
var mydata = {
'Musicals': ['6','40%','28.6%'],
"That's Life": ['2','13.2%','0.5%'],
...etc....
}
</script>
2) Use element attributes: (see http://ejohn.org/blog/html-5-data-attributes/for more info)
2）使用元素属性：（更多信息见http://ejohn.org/blog/html-5-data-attributes/）
<div class='my_data_row' data-name='Musicals' data-col1='6' data-col2='40%' data-col3='26.6%'>
...and then use Javascript to load the attributes as required.
...然后使用 Javascript 根据需要加载属性。
This second option would be used when the data is related to the element in question. You wouldn't normally want to use this for data that's going to be used elsewhere; I would say that in your case, the simple Javascript data block would be a far better solution.
当数据与相关元素相关时，将使用第二个选项。您通常不希望将它用于将要在其他地方使用的数据；我会说，在您的情况下，简单的 Javascript 数据块将是一个更好的解决方案。
If you do go with the data attributes as per the second option, note the use of the 'data-' prefix on the attributes. This is an HTML5 specification that keeps user-defined attributes separate from normal HTML ones. See the linked page for more info on that.
如果您确实按照第二个选项使用数据属性，请注意在属性上使用了“data-”前缀。这是一个 HTML5 规范，它将用户定义的属性与普通的 HTML 属性分开。有关更多信息，请参阅链接页面。
回答by gion_13
You could try the newhtml5 feature localStorageinstead of using hidden html fields, that is if you're sure that your users use only latestmodern browsers.
你可以试试 新的html5 功能localStorage而不是使用隐藏的 html 字段，也就是说，如果您确定您的用户使用只有最新的现代浏览器。
Anyway, an improvement on your code would be to actually store the data in JSONformat:
Instead of
无论如何，对您的代码的改进是实际以JSON格式存储数据：
而不是
Musicals}{40%}{28.6%}{6
you would use something like
你会使用类似的东西
{
"label": "Musicals",
"percentage1": 40,
"percentage2": 28.6,
"otherLabel": 6
}
This way you can build javascript objects just by evaluating (eval) orparsing (JSON.parse) the innerHTML of the hidden element, in a faster way than you interpret your own curly brackets protocol.
这样你就可以构建javascript对象了 评估 (eval) 或解析 ( JSON.parse) 隐藏元素的innerHTML，比解释自己的大括号协议更快。
回答by Matías Fidemraizer
My point to solve that in a better way would be take these results and save in some temporal XML file in the server, show the contents in the browser and when the user request for the Excel version, you only need to take the temporal XML.
我要解决的更好的方法是将这些结果保存在服务器中的某个时态 XML 文件中，在浏览器中显示内容，当用户请求 Excel 版本时，您只需要获取时态 XML。
Take a look to Linq-to-XML, because its fluent-style programming would help you in reading the XML file in few lines and then creating such Excel file.
看看 Linq-to-XML，因为它流畅的编程风格将帮助您在几行中读取 XML 文件，然后创建这样的 Excel 文件。
Another solution would be serialize your object collection to JSON and deserialize them with the DataContractJsonSerializer. That would make the size of temp file smaller than XML approach.
另一种解决方案是将您的对象集合序列化为 JSON，然后使用 DataContractJsonSerializer 将它们反序列化。这将使临时文件的大小小于 XML 方法。
