0

我在这样做的同时尝试添加任意数据，但我心中有以下疑问：

  1. 我可以添加多少数据，有什么限制吗？

  2. 它是否会影响性能/执行速度？

  3. 那么数据的安全性呢，它安全吗？

  4. 这些存储在哪里？

4

3 回答 3

1

由于您没有提供任何带有您想使用的属性的真实或示例标记，所以让我们简单地谈谈HTML5's data--prefixed 属性：它们是什么，它们为什么存在，以及它们不存在什么。这应该对消除你的焦虑大有帮助。

首先，它们是什么？W3C 规范很明确：

3.2.3.9 使用 data-* 属性嵌入自定义不可见数据

... 没有名称空间中的属性，其名称以字符串“data-”开头 ...旨在存储自定义数据...没有更合适的属性或元素。

您可能会注意到，它还着重说明了它们不打算做什么。在我们开始讨论之前，以及为它们的适当实现而设计的机制之前，让我们简单地退后一步，考虑一下之前data-的情况。

如果您熟悉 HTML，就会知道定义了所有元素都继承的核心（全局）属性（id、class等）。src由于不同的原因（ ，accesskey？等） ，有些属性在组之间浮动。有专门的事件属性，一些相当具体或已弃用或其他古怪的属性。

甚至还有微语法和微格式。不过，让我们集中在这里；前者是关于表达性属性语法（<input type="email" required ...），后者禁止包含属性data-（由于结构化属性特异性规则）。

你应该得到一个想法，最终，有人把这些东西想通了。以上所有内容都与向浏览器有目的地（如果可能的话）描述此标记内容的方式有关。它不是随意存在的。它既不是一成不变的（HTML5 现在已经存在），也不等同于XHTML-doctype 网页声称的那种无 XML 名称空间的流氓行为。

如果您从未翻阅过一个，请阅读 HTML5 规范。有趣的是，一旦你掌握了阅读的窍门，它就会变得生硬和摇摆不定，不符合人性。

回去的路上，我们现在得到了这种奇怪data-*的语法，加上一个笨拙的散文描绘了一些dataset和脚本野兽，这将使这一切变得美妙。

所以你（自然地）认为这是为了什么，我能用它做什么？好问题。

有两个答案，你应该做什么，以及你应该不惜一切代价避免什么。前者将让您在菊花林立的芬芳花园中嬉戏；后者，别西卜本人可能会寻找你的灵魂。（或者至少想知道你在做什么。）

您应该做的是data-解决需要将某种数据与页面上的一个或多个元素相关联的情况。不是任性的；不要被地狱的烧烤火焰所诱惑。当您需要这些数据并且您发现自己可能会诉诸以下方法时：

var = '<?=json_encode($restaurants)?>'; // This is so sad, really.

或者，上帝帮助我们：

<a id="client-005" rel="200907,$5000;200908:$3500;oh,why" ...

得到它？该元素中“客户”的销售数据（我们认为……希望……）。异步抓取数据已经消除了对这些古怪方法的一些需求。此外，一些聪明的人发现你可以：

<script type="text/x-data-csv">
Client, Year, Sales
Bill's Salon, 200904, $5300
...

漂亮。对于数据球，一个庞大的 d3.js 立体数据可视化，这绝对足够好。此外，它不太适合data-属性。但这可能是：

<select name="service_tech">
  <option data-name="Bobby Jones" 
          data-email="bjones@job.com" 
          data-phone="xxx.xxx.xxxx"
          data-title="Diesel Mechanic"
          data-days-available="MON-THU"
          data-shifts-available="2ND3RD"
          value="EMP00345">Bobby Jones</option>

或者：

<section id="quiz"
         class="quiz stage block"
         data-quiz-hard-end="2013-03-10 00:00:00"
         data-question-total="10"
         data-question-current="6"
         data-session-keep-alive="30 minutes">
  <article id="question"
           class="single view deadline warning"
           data-question-save-state="true"
           data-question-record-incorrect="false"
           data-question-incorrect="block with hint"
    <ol id="quiz-possibles"
        class="block multiples unanswered"
        data-answer-timeout="60 seconds"
        data-answer-time-expiry-action="replace in-place random fresh"
        data-answer-timer-display="top right #quez.frame"
        data-answer-hint-pop="elapse 30 seconds"
        data-answer-hint="The square of the hypotenuse is left of right to this.">

棒极了。想一想，在不通过一千个查询导致疯狂、沮丧或 AJAX 死亡的情况下嵌入这样的临时相关数据块会有多麻烦？

想象一下该配置与Select2$.change()以及对这些属性的自定义搜索相结合。现在我们用煤气做饭。

什么data-属性不是更抽象，因为从本质上讲，它都是关于某种糟糕的实现。所以考虑：

<body data-wednesday-salutation="Hello" ...

<img data-class-name="dogs"
     data-filename="rover.png" 
     data-url="/some/path/rover.png"
     data-dog-bark="yes" ...

<p data-groovy-font="blue dog demi mono" ...

<em data-what-is="today" data-answer="Monday!" ...

这有什么意义吗？当然，还有更微妙的方式可以让愚蠢或胡思乱想地蠕虫或闯入data-误用和盗用，但它们或多或少都归结为上述相同的问题：

  1. 这可能完全没用。另外，你知道它会在一周中的每一天结束。
  2. 什么？行。class已经存在，filename应该是src价值的一部分data-url，以及关于狗吠的任何东西。
  3. 我敢肯定这对某人来说意味着什么。（如果这不是一个人为的例子。）
  4. 荒谬, 正方形.

我很难给出一组明确的无知和值得大张旗鼓的不当行为。我能想到的最糟糕的事情就是去快乐data-和死记硬背。单。元素。在页面上。与. 不只是可怕的健谈和不熟练的人浪费带宽。data-

那么，在这之后，该怎么办？这完全取决于你如何处理它。考虑：

  1. 它并不是针对所有远程数据问题的。至少按照规范（想象一下这里的手指摇摆），如果它适合另一个属性，它是data-不可行的。如果它是围绕由专家或系统发布的可广泛访问和标准化的格式构建的，那么它就是一种微格式，因此不再是data--land。

例如：

<div class="vcard">
    <span class="fn">Sally Ride</span>
    (<span class="n">
        <span class="honorific-prefix">Dr.</span>
        <span class="given-name">Sally</span>
        <abbr class="additional-name">K.</abbr>
        <span class="family-name">Ride</span>
        <span class="honorific-suffix">Ph.D.</span></span>),
    <span class="nickname">sallykride</span> (IRC)
    <div class="org">Sally Ride Science</div>
    <img class="photo" src="http://example.com/sk.jpg"/>
    <a class="url" href="http://sally.example.com">w</a>,
    <a class="email" href="mailto:sally@example.com">e</a>
    <div class="tel">+1.818.555.1212</div>
    <div class="adr">
        <div class="street-address">123 Main st.</div>
        <span class="locality">Los Angeles</span>,
        <abbr class="region" title="California">CA</abbr>,
        <span class="postal-code">91316</span>
        <div class="country-name">U.S.A</div></div>
    <time class="bday">1951-05-26</time> birthday
    <div class="category">physicist</div>
    <div class="note">1st American woman in space.</div>
</div>

那是一个人的微格式hcard描述。它可以而且可能通常不那么冗长，但这说明了一点。走近一看，注意类和缺少data-属性怎么用？

尽管data-以一种有意义的方式进行操作是一种赋权，但不要使用散弹枪的方法在每一个棉花采摘的标记中添加任何和所有可能——可能不是——数据片段到您的内容中。它没有，也不应该，必须是这样。抵制这种冲动。

  1. 明智地使用它。当您遇到某种非常广泛的列表时（例如一个跨度为 20 年的中型公司的客户列表），不要将所有这些都推送到页面中并期望所有浏览器都能处理 20,000 行data-客户细节aside. 换句话说，它不是一个全面的数据存储。必要或适当时，使用 AJAX，或往返，或诸如此类。

  2. 具有现代硬件的现代浏览器和现代浏览器（是的，甚至 IE8，IE7 都没有）可以相当轻松地处理大量标记（尤其是 Chrome）。但是，这并不意味着您不应该找到最小化该大小的方法或制定远离 3mb HTML 文档的策略。

  3. 如果您过度使用和过度使用它，您可能会发现自己因属性太多而无法轻松管理而头疼。data-有目的的使用。同样，明智的管理和对所需内容的明确关注应该可以帮助您管理任何用看不见的字节可能未使用（或无法访问）的数据字节来膨胀内容的冲动。

我给你留下了这个：

一句警告

随着数据属性的使用越来越广泛，命名约定发生冲突的可能性也越来越大。如果您使用一个难以想象的属性名称，例如 data-height，那么您很可能最终会遇到使用相同属性名称的库或插件。多个脚本获取和设置公共数据属性可能会导致混乱。为了避免这种情况，我鼓励人们选择一个标准字符串（可能是站点/插件名称）作为所有数据属性的前缀——例如 data-html5doctor-height或data-my-plugin-height。

http://html5doctor.com/html5-custom-data-attributes/

于 2013-03-09T16:57:39.940 回答
0

您可以使用 jquery数据将数据存储到任何元素

在这里演示：http: //jsfiddle.net/namkha87/TGxdH/

$('h1').data('a', "abc");

您可以存储任何数据类型（对象、数字、字符串...），当然，存储太多会损害性能，但这取决于客户端计算机。

使用data方法存储数据是没有问题的，事实上，大多数jquery插件都使用数据来存储它们的数据（状态，配置......）。

于 2013-03-09T09:29:46.063 回答
0

关于问题 #4 和 #5：几乎没有安全性，因为任何其他脚本以及用户可以查看和操作数据。并且数据属性不会存储在任何地方，因为它可以在页面刷新或任何情况下幸存下来。

于 2013-03-09T09:39:52.593 回答