在<a> Tag</a>中包含JavaScript / jQuery对象数据

Question

我想在我的<a>标记中包含JavaScript对象。我希望我的用户能够将<a>标记的html复制并粘贴到他们的网站上并进行编辑。它们还将包含指向我的.js脚本的链接，该脚本将对其进行处理。

现在我有HTML：

<a id="test" href='#' jqueryData='{
    "name":"test",
    "type":"tag"
    }'>Click Here</a>

以下jQuery：

    var target=$('#test');
    var data= $.parseJSON(target.attr("jqueryData"));
    console.log(data);

产生所需的输出：

Object {name: "test", type: "tag"} 

所以它工作正常，但我总是想知道是否有更好的方法来做到这一点。我是否会遇到任何浏览器支持问题？我知道jqueryData不是<a>的官方属性......这会有问题吗？我是否会遇到数据中存在特殊字符的问题？

非常感谢你的帮助！

修改

感谢你们的回答！假设我要添加15-20个属性，您是否建议使用上面的一个jSon数据来接近它，或者只是为每个部分使用一个新属性：

<a id="test" href='#'  data-name="test" data-type="tag" data-width="100" data-test="1" .... >Click Here</a>

Answer 1

最好使用像data-jquery这样的属性。所有data-属性都旨在添加其他数据（它是HTML5规范的一部分）。浏览器不会抱怨。

只需确保转义代码以避免使用escape()出现问题，然后在解析JSON之前使用unescape()。

Answer 2

关于发明自己的标签的正确惯例是在它们前面添加“data-”，这样就像“data-jquery-data”。然后，您需要更改代码才能使用target.data("jquery-data")。

另一点是，如果要解析的字符串不是JSON，$ .parseJSON会抛出异常。所以你会想做像

这样的事情

var data;
try { 
    data = $.parseJSON(target.data('jquery-data'));
} catch() {
    if(data) {
        console.log(data);
    }   
}

除此之外，我认为它应该还不错。

Answer 3

您可以对对象进行base64编码然后解码。这可能不是最卑鄙的方式，但它确实起到了作用。你需要一个b64编码和解码功能

<a data-json="eydkYXRhJzogJ3ZhbHVlJ30="></a>
var json = JSON.parse(b64Decode(object.getAttribute('data-json')));
Console.log(Object.keys(json));