Including JavaScript/jQuery Object Data in Tag

Including JavaScript/jQuery Object Data in Tag

I want to include JavaScript object in my <a> tag. I want my users to be
able to copy and paste the html for the <a> tag onto their site and edit
it. They will also include a link to my .js script which will process it.
Right now I have the HTML:
<a id="test" href='#' jqueryData='{
"name":"test",
"type":"tag"
}'>Click Here</a>
And the following jQuery:
var target=$('#test');
var data= $.parseJSON(target.attr("jqueryData"));
console.log(data);
Which produces the desired output:
Object {name: "test", type: "tag"}
So it works fine, but I am always wondering if there is a better way to do
this. Am I going to run into any browser support issues? I know jqueryData
is not an official attribute of <a>...will that be a problem? Will I run
into problems with special characters being in the data?
Thanks a ton for your help!