我发现元数据插件可以很好地解决使用html标记存储任意数据的问题，并且可以很容易地检索和使用jQuery。

重要提示:您包含的实际文件只有5 kb，而不是37 kb(这是完整下载包的大小)

下面是一个例子，它被用来存储值时，我使用生成谷歌分析跟踪事件(注:数据。标签和数据。值碰巧是可选参数)

$(function () {
    $.each($(".ga-event"), function (index, value) {
        $(value).click(function () {
            var data = $(value).metadata();
            if (data.label && data.value) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label, data.value]);
            } else if (data.label) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label]);
            } else {
                _gaq.push(['_trackEvent', data.category, data.action]);
            }
        });
    });
});

<input class="ga-event {category:'button', action:'click', label:'test', value:99}" type="button" value="Test"/>

任意属性都是无效的，但在现代浏览器中是完全可靠的。如果您通过javascript设置属性，那么您也不必担心验证问题。

另一种方法是用javascript设置属性。jQuery有一个很好的实用工具方法，也可以使用自己的方法。

这就是我怎么做你ajax页面…这是一个非常简单的方法…

    function ajax_urls() {
       var objApps= ['ads','user'];
        $("a.ajx").each(function(){
               var url = $(this).attr('href');
               for ( var i=0;i< objApps.length;i++ ) {
                   if (url.indexOf("/"+objApps[i]+"/")>-1) {
                      $(this).attr("href",url.replace("/"+objApps[i]+"/","/"+objApps[i]+"/#p="));
                   }
               }
           });
}

它的工作原理是，它基本上会查看所有具有'ajx'类的url，它会替换关键字并添加#符号…所以如果js被关闭了，那么url就会像往常一样…所有“应用程序”(网站的每个部分)都有自己的关键字……所以我所需要做的就是添加到js数组上面添加更多的页面…

例如，我的当前设置设置为:

 var objApps= ['ads','user'];

因此，如果我有一个url，如:

www.domain.com/ads/3923/bla/dada/bla

js脚本将取代/ads/部分，所以我的URL将结束

www.domain.com/ads/ p = 3923 /爸爸/ bla bla

然后我使用jquery bbq插件加载相应的页面…

http://benalman.com/projects/jquery-bbq-plugin/

只是另一种方式，我个人不会使用它，但它工作(确保您的JSON是有效的，因为eval()是危险的)。

<a class="article" href="link/for/non-js-users.html">
    <span style="display: none;">{"id": 1, "title":"Something"}</span>
    Text of Link
</a>

// javascript
var article = document.getElementsByClassName("article")[0];
var data = eval(article.childNodes[0].innerHTML);

你可以使用你自己的随机元素属性的data-前缀(<span data-randomname=" data goes here…"></span>)，但这只在HTML5中有效。因此，浏览器可能会抱怨有效性问题。

你也可以使用<span style="display: none;">数据在这里…跨度< / >标记。但是这样你就不能使用属性函数了，如果css和js被关闭了，这也不是一个很好的解决方案。

但我个人更喜欢的是:

<input type="hidden" title="Your key..." value="Your value..." />

输入将在所有情况下被隐藏，属性是完全有效的，如果它在<form>标记内，它将不会被发送，因为它没有任何名称，对吗? 最重要的是，属性真的很容易记住，代码看起来很漂亮，很容易理解。你甚至可以在里面放一个id属性，这样你也可以很容易地用JavaScript访问它，并通过input.title访问键值对;input.value。

在html中，我们可以存储自定义属性，在属性名之前加上“data-”前缀

<p data-animal='dog'>这个动物是一只狗。 检查文档

我们可以使用这个属性使用jQuery动态设置和获取属性，例如: 如果我们有一个p标签

<p id='animal'>这个动物是一只狗

然后为上面的标签创建一个名为'breed'的属性，我们可以这样写:

$(" #动物”)。attr(“data-breed”、“哈巴狗”);

为了随时检索数据，我们可以这样写:

var breedtype = $（'#animal'）.data（'breed'）;