HTML5 veri özniteliklerine ve javascript dizilerini saklamak ve almak

Question

Bir javascript Array bir HTML5 data özniteliğinde nasıl saklanabilir?

JSON.stringify katyonunun her çeşidini ve kaçan karakterleri denedim.

Diziyi saklamak ve tekrar almak için kesin yöntem nedir?

not ben [ $("#firstSelectedElement").val(), $("#secondSelectedElement").val() ] ile dizi kurmak. id="storageElement" data-storeIt="stuff"'u $("#storageElement").data('storeit') ile geri aldım.

Verileri hiçbir zaman doğru Array, yalnızca Array karakter olarak almayı başaramıyorum.

Answer 1

O html json benzeri dizisine sahip olmak eleman data Özellikte karakterlerin çıkışını (kodlandığı tırnak) de kullanabilir çıktı:

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

Ve sonra javascript herhangi bir ek büyü olmadan almak:

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

Bu fiddle çıkışını kontrol edin.

Düzenlendi (2017)
Sen html kullanmak gerekmez data Özellikte karakterleri kurtuldu.

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

Bu yeni fiddle çıkışını kontrol edin.

Answer 2

HTML5 veri özniteliği yalnızca dizeleri saklayabilir, böylece bir diziyi saklamak istiyorsanız, serileştirmeniz gerekir. JSON çalışacak ve doğru yolda olduğunuzu görünüyor. api documentation gözden

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

, jQuery otomatik JSON kodlanmış dize düzgün kodlanmış sağlanan çevirmesi gerektiği: Eğer seri hale getirilmiş verileri almak bir kez sadece JSON.parse() kullanmak gerekir. Sakladığınız değere bir örnek verebilir misiniz?

Ayrıca HTML5 veri bağlıyor ve jQuery .data() yöntemleri iki ayrı şeyler olduğunu unutmayın. Etkileşimde bulunurlar, fakat jQuery daha güçlüdür ve herhangi bir veri türünü depolayabilir. Bir javascript dizisini, seri hale getirmeden jQuery'yi kullanarak doğrudan depolayabilirsiniz. Bir HTML5 veri niteliği olarak biçimlendirme kendisinde olmasını gerekiyorsa, o zaman sadece dizeleri ile sınırlıdır.

Answer 3

Dizide sakladığınız verilerin türüne bağlıdır. (Göründüğü gibi) sadece dizeleri ve sen bilirsin bir karakter varsa verilerinizin bir parçası olmak asla (aşağıda benim örnekte virgül gibi) o zaman JSON seri hale getirme hakkında unutursun ve sadece dize kullanabilirsiniz. bölünmüş:

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

Sonra alınırken:

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

Bu JSON kullanarak biraz daha iyi işleyecektir. Daha az karakter kullanıyor ve JSON.parse'dan daha az "pahalı".

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

Ve almak için:

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

Bildirimi bu örnekte biz yarı tırnak kullanmak zorunda olduğu (Gerekirse, JSON uygulama aşağıdaki gibi görünecektir

Ama ') data-storeIt özelliğinde. JSON sözdizimi kendi verilerindeki dizeleri tırnak içinde kullanılır etmemizi gerektirir olmasıdır.

Böyle düğüm içine herhangi bir nesne saklayabilir

Answer 4

:

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

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

Answer 5

Kayıt için, benim için kodlanmış varlıklar ile çalışmadı, ancak bir nesne olarak ayrıştırılmak için veri özniteliğinin iyi biçimlendirilmiş bir JSON nesnesi olması gerektiği anlaşılıyor.

Yani içeren bir nesne kullanmak başardı:

data-myarray="{"key": "value"}" 

ya da belki sadece tek tırnak kullanın: eğlenmek

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

Saat! : D