Как правильно хранить данные в DOM?

Question

Недавно я использовал тег title в различных элементах HTML для хранения данных в формате JSON в DOM.

Это плохой подход (я предполагаю, что это так)?Как правильно сделать это, что хорошо работает с JQuery?Под «хорошо работает» я имею в виду

$("myButton").click(function (e) {
     var myData;
     eval("myData=" + $(this).attr("title"));
});

Работает довольно хорошо, но опять-таки я предполагаю, что есть лучший способ сделать это, нет?элементы на самом деле работают?Кажется, я не могу найти, где на самом деле это заканчивается?

PSS: Могу ли я также получить ответ на основе jQuery и Non jQuery?(Извините за суету)

Answer 1

eval("myData=" + $(this).attr("title"));

Это почти законная причина, чтобы дать вам пощечину! (Дж / К)

Вы должны использовать свой собственный объект пространства имен для хранения данных «глобально». В этом контексте глобально означает только глобальный в коде вашего приложения и не использует global object (window в браузере).

var my_application = {};

$('myButton').click(function() {
  my_application.myData = $(this).attr('title');
});

Это очень простая стратегия, конечно. В вашем конкретном случае вы также можете использовать метод jQuery .data() для присоединения данных к узлу DOM.

$('myButton').click(function() {
   $.data(this, 'myData', this.title);
});

Ссылка: .data () , jQuery.data ()

Answer 2

В вашем примере я бы предложил сделать следующее, которое не подвергает вас риску безопасности 'eval':

myData = JSON.decode($(this).attr("title"));

В целом это правильный подход к хранению незащищенных данных.У вас также есть ряд других опций:

• Используйте методы JDuery .data ():

  myData = $ this.data ("foo");

• В HTML5 теперь вы можете использовать пользовательские атрибуты данных (например, "") в качестве атрибута для любого элемента.http://html5doctor.com/html5-custom-data-attributes/

• Вы можете использовать локальное хранилище, если вы знаете, что оно доступно.http://dev.w3.org/html5/webstorage/

• Вы можете использовать Backbone.js поверх Jquery, чтобы предоставить вам более абстрактный способ обработки данных в качестве моделей.http://documentcloud.github.com/backbone/

Answer 3

использовать jquery data ()

Метод jQuery.data () позволяет нам прикрепить данные любого типа к DOM элементы таким образом, что это безопасно от циркулярные ссылки и, следовательно, бесплатно от утечек памяти. JQuery гарантирует, что данные удаляются, когда элементы DOM удаляются с помощью методов jQuery и когда пользователь покидает страницу. Мы можем установить несколько различных значений для один элемент и получить их позже:

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

Answer 4

В мире jQuery обычно рекомендуется использовать плагин метаданных, поскольку он является официальным плагином jQuery и также поддерживает атрибуты данных HTML5.Для получения дополнительной информации вы можете посмотреть на это http://docs.jquery.com/Plugins/Metadata/metadata