Функции $.data() и $.removeData(): работа с данными

Функция $.data() предназначена для сохранения и получения данных, имеет следующий формат:

$.data(<DOM-элемент>[, <Название>[, <Значение>]])

В параметре <Название> можно указать название данных, а в параметре <Значение> — данные, которые должны быть сохранены. Формат сохраняемых данных может быть любым. Сохраним строку под названием "myData" в элементе с идентификатором div1:

<div id="div1"></div>

var elem = $('#div1').get(0);
$.data(elem, 'myData', 'Строка с данными');

Сохраним числовое значение:

$.data(elem, 'myData2', 50);

Получить данные можно следующим образом:

console.log( $.data( $('#div1').get(0), 'myData') );
// Строка с данными
console.log( $.data( $('#div1').get(0), 'myData2') );
// 50

Если указан только первый параметр, то функция возвращает объект со всеми данными, сохраненными в элементе:

console.log( $.data( $('#div1').get(0) ) );
// Object { myData: "Строка с данными", myData2: 50 }

Теперь сохраним объект:

var elem = $('#div1').get(0);
$.data(elem, 'myData', { el1: 'Строка1', el2: 'Строка2' } );

Получить данные можно так:

var obj = $.data( $('#div1').get(0), 'myData' );
console.log('el1: ' + obj.el1 + '; ' + 'el2: ' + obj.el2);
// el1: Строка1; el2: Строка2

Сохраним массив:

var elem = $('#div1').get(0);
$.data( elem, 'myData', ['Строка1', 'Строка2'] );

Получить данные можно так:

var arr = $.data( $('#div1').get(0), 'myData' );
console.log(arr[0] + '; ' + arr[1]);
// Строка1; Строка2

С помощью функции $.hasData(<DOM-элемент>) можно проверить сохранены ли какие-либо данные в элементе. Она возвращает значение true, если данные сохранены, и false — в противном случае:

var elem = $('#div1').get(0);
console.log( $.hasData(elem) ); // false
$.data(elem, 'myData', 'Строка с данными');
console.log( $.hasData(elem) ); // true

Функция $.removeData(), предназначенная для удаления данных, имеет следующий формат:

$.removeData(<DOM-элемент>[, <Название>])

Если второй параметр не указан, то будут удалены все данные. Пример сохранения, получения и удаления данных приведен в листинге 1.30.

Листинг 1.30. Сохранение, получение и удаление данных

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <title>Сохранение, получение и удаление данных</title>
</head>
<body>
<div class="container my-3">
   <div id="div1"></div>
   <div id="log"></div>
   <input type="text" id="txt1" class="form-control my-2">
   <button type="button" class="btn btn-primary" id="btn1">
      Сохранить</button>
   <button type="button" class="btn btn-primary" id="btn2">
      Получить</button>
   <button type="button" class="btn btn-primary" id="btn3">
      Удалить</button>
</div>

<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $('#btn1').click( function() {
      var elem = $('#div1').get(0);
      $.data( elem, 'myData', $('#txt1').val() );
      $('#log').text('Данные сохранены');
   });
   $('#btn2').click( function() {
      var elem = $('#div1').get(0);
      $('#log').text( 'Данные: ' + $.data(elem, 'myData') );
   });
   $('#btn3').click( function() {
      var elem = $('#div1').get(0);
      $.removeData(elem, 'myData');
      $('#log').text('Данные удалены');
   });
});
</script>
</body>
</html>

Вместо функций $.data() и $.removeData() можно использовать методы data() и removeData(). Форматы метода data():

data([<Название>[, <Значение>]])
data(<Объект>)

Если параметр <Значение> не указан, то функция возвращает текущие данные первого элемента коллекции, включая значения параметров data-*. Если же параметр <Значение> указан, то данные будут сохранены во всех элементах коллекции. Если параметры не указаны, то метод возвращает объект со всеми данными, включая значения параметров data-*:

<div id="div1" data-test="12"></div>

$('#div1')
   .data( 'myData', 'Строка с данными' )
   .data( 'myData2', 50 );
console.log( $('#div1').data('myData') );
// Строка с данными
console.log( $('#div1').data('myData2') );
// 50
console.log( $('#div1').data('test') );
// 12
console.log( $('#div1').data() );
// Object { myData: "Строка с данными", myData2: 50, test: 12 }

Данные из параметров data-* извлекаются при первом вызове метода data() и выполняется попытка преобразовать эти данные в объекты JavaScript: в число, в логическое значение, в массив и др. В дальнейшем значения этих параметров не изменяются, все данные хранятся внутри jQuery. Чтобы получить данные в виде строки, следует воспользоваться методом attr():

<div id="div1" data-test="12" data-arr="[1, 2, 3]"></div>

console.log( $('#div1').data('test') );
// 12
console.log( typeof $('#div1').data('test') );
// number
console.log( typeof $('#div1').attr('data-test') );
// string
console.log( $('#div1').data('arr') );
// Array [ 1, 2, 3 ]

В параметре <Объект> можно указать объект с названиями и их значениями:

<div id="div1" data-test-num="12"></div>

$('#div1').data( { 'my-data': 'Строка с данными', 'myData2': 50 } );
console.log( $('#div1').data() );
// Object { myData: "Строка с данными", myData2: 50, testNum: 12 }

Обратите внимание: если название содержит дефис, например, my-data, то выполняется преобразование названия. Дефис удаляется, а первая буква слова делается прописной: myData. С параметрами data-* ситуация аналогичная: название data-test-num преобразуется в testNum.

Для удаления данных предназначен метод removeData(). Форматы метода:

removeData([<Название>])
removeData(<Массив или строка>)

Если параметр <Название> не указан, то будут удалены все данные, в противном случае удаляются данные соответствующие заданному названию:

<div id="div1" data-test="12"></div>

$('#div1').data( { 'myData': 'Строка с данными', 'myData2': 50 } );
$('#div1').removeData('myData');
console.log( $('#div1').data() );
// Object { myData2: 50, test: 12 }
$('#div1').removeData();
console.log( $('#div1').data() );
// Object {  }

В качестве параметра можно указать массив с названиями или строку с названиями через пробел:

<div id="div1" data-test="12"></div>

$('#div1').data( { 'a': 1, 'b': 2, 'c': 3, 'd': 4 } );
$('#div1').removeData( ['a', 'b']);
console.log( $('#div1').data() );
// Object { c: 3, d: 4, test: 12 }
$('#div1').removeData('d test');
console.log( $('#div1').data() );
// Object { c: 3 }
console.log( $('#div1').data('test') );
// 12

Обратите внимание: параметр data-test при этом не удаляется и мы можем получить его значение при следующем вызове метода data(), хотя данные были удалены. Используйте дополнительно метод removeAttr() для удаления параметра data-*:

$('#div1').removeData('test').removeAttr('data-test');
console.log( $('#div1').data('test') );
// undefined

Переделаем наш предыдущий пример и используем методы data() и removeData() вместо функций $.data() и $.removeData() (листинг 1.31).

Листинг 1.31. Методы data() и removeData()

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <title>Методы data() и removeData()</title>
</head>
<body>
<div class="container my-3">
   <div id="div1"></div>
   <div id="log"></div>
   <input type="text" id="txt1" class="form-control my-2">
   <button type="button" class="btn btn-primary" id="btn1">
      Сохранить</button>
   <button type="button" class="btn btn-primary" id="btn2">
      Получить</button>
   <button type="button" class="btn btn-primary" id="btn3">
      Удалить</button>
</div>

<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $('#btn1').click( function() {
      $('#div1').data( 'myData', $('#txt1').val() );
      $('#log').text('Данные сохранены');
   });
   $('#btn2').click( function() {
      $('#log').text( 'Данные: ' + $('#div1').data('myData') );
   });
   $('#btn3').click( function() {
      $('#div1').removeData('myData');
      $('#log').text('Данные удалены');
   });
});
</script>
</body>
</html>

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов