хранить и извлекать массивы JavaScript в HTML5 атрибуты данных

как может javascript Array храниться в HTML5

42
arrays html5-data javascript jquery parsing

5 ответов

оказалось, что можно использовать HTML-мнемоники символов в элементе data атрибут, чтобы иметь JSON-подобный массив (закодированы кавычки):

<div id="demo" data-stuff='[&#34;some&#34;, &#34;string&#34;, &#34;here&#34;]'></div>

и затем в javascript получите его без какой-либо дополнительной магии:

var ar = $('#demo').data('stuff');

проверить это скрипка выход.

редактировать (2017)
Вам не нужно использовать HTML-экранированные символы в .

<div id="demo" data-stuff='["some", "string", "here"]'></div>

проверьте это новое скрипка выход.

48

это зависит от того, какие данные вы храните в массиве. Если это просто строки (как кажется) и у вас есть персонаж которого вы знаю никогда не будет частью ваших данных (например, запятая в моем примере ниже), тогда я забуду о сериализации JSON и просто использую строку.сплит:

<div id="storageElement" data-storeIt="stuff,more stuff"></div>

затем при получении:

var storedArray = $("#storageElement").data("storeIt").split(",");

он будет работать немного лучше, чем с помощью JSON. Он использует меньше символов и является менее "дорогим", чем JSON.parse.

но, если необходимо, ваша реализация JSON будет выглядеть примерно так:

<div id="storageElement" data-storeIt='["hello","world"]'></div>

и получить:

var storedArray = JSON.parse($("#storageElement").data("storeIt"));

обратите внимание, что в этом примере мы должны были использовать полу-кавычки (') в районе data-storeIt собственность. Это связано с тем, что синтаксис JSON требует, чтобы мы использовали кавычки вокруг строк в его данных.

43

атрибут данных HTML5 может хранить только строки, поэтому, если вы хотите сохранить массив, вам нужно будет сериализовать его. JSON будет работать, и похоже, что вы на правильном пути. Вам просто нужно использовать JSON.parse() после извлечения сериализованных данных:

var retrieved_string = $("#storageElement").data('storeit');
var retrieved_array = JSON.parse(retrieved_string);

обзор документация api, jQuery должен попытаться автоматически преобразовать строку в кодировке JSON при условии, что она правильно закодирована. Можете ли вы привести пример ценности, которой вы являетесь хранение?

также обратите внимание, что атрибут данных HTML5 и jQuery .data() методы-это две разные вещи. Они взаимодействуют, но jQuery более мощный и может хранить любой тип данных. Вы можете просто сохранить массив javascript непосредственно с помощью jQuery без его сериализации. Но если вам нужно иметь его в самой разметке как атрибут данных HTML5, то вы ограничены только строками.

3

для записи он не работал с закодированными сущностями для меня, но кажется, что для того, чтобы быть проанализированным как объект, атрибут data должен быть хорошо сформированный объект JSON.

поэтому я смог использовать объект с:

data-myarray="{&quot;key&quot;: &quot;value&quot;}"

или может просто использовать одинарные кавычки:

data-myobject='{"key1": "value1", "key2": value2}'

время, чтобы повеселиться! : D

3

вы можете хранить любой объект в узле так:

$('#storageElement').data('my-array', ['a', 'b', 'c']);

var myArray = $('#storageElement').data('my-array');
1