存储要与jquery一起使用的数据的最佳方法是什么？

Question

I am not a heavy user of Javascript/jQuery, but I have start to really get into creating my own UI stuff, such as gallery viewer, alert animations, popup forms etc...

But what is the best way to store data to pull together when needed?

For example: With the gallery viewer, much like Lightbox, I pull in the href of anchors that have the rel=viewer.

<a href="url" rel=viewer" />
<a href="url" rel=viewer" />

I then extended this for admin users to be able to delete these images, but I needed to pass the media id to do this. So I added...

<a href="url" rel=viewer" viewerid="123" />
<a href="url" rel=viewer" viewerid="456" />

I do not like the idea of creating my own attributes, because I will no doubt forget what I have. But is it possible to store a javascript object/array of data within an anchor? Something like...

<a href="url" rel=viewer" data="{'id':'123', 'foo':'bar'}" />

and then...

var photos = new Array();
$('a[rel=viewer]').each(function(){
    photos.push(  new Array( $(this).attr('data') )  );
});

to give me something like

photos[0] = array('id' => 123, 'foo' => 'bar')
photos[1] = array('id' => 456, 'foo' => 'bar')

Answer 1

JQuery 数据功能听起来像您所需要的。

Answer 2

try this one jQuery.data

jQuery.data(document.body, 'foo', 52);
jQuery.data(document.body, 'bar', 'test');

Answer 3

as i know data inside tag have to be named? valid syntactic would be

<a href="url" rel=viewer" data-array="{'id':'123', 'foo':'bar'}" />

and you can read it later like that:

$('a').data('array')

Answer 4

For simple purposes, I'd stick with custom data attributes , which are perfectly valid in HTML5.

If you need a deeper approach, you'd better decouple data from DOM /jQuery.data, and use a proper model layer in you application [think about Backbone.js ], though it implies a little hard learning curve and may be overkill sometimes.

Answer 5

The best way I find is using HTML5 data attributes and jQuery.

Here is an example using JSON to stringify the object and the turn it back into an object when you need the data.

var obj = 
{
  type: "something",
  id: 3,
  src: "somesrc"    
}

var data = JSON.stringify(obj);
$('a').attr('data-object', data);

var returned = $('a').attr('data-object');
returned = $.parseJSON(returned);
console.log(returned);

​