ProgramingTip

HTML5 데이터 속성에 자바 펼쳐 배열 저장 및 검색

bestdevel 2021. 1. 10. 22:55
반응형

HTML5 데이터 속성에 자바 펼쳐 배열 저장 및 검색


ArrayHTML5 data속성 자바 펼쳐를 어떻게 저장할 있습니까?

나는 의 모든 JSON.stringify과 이스케이프 문자 변형을 시도했습니다 .

배열을 저장하고 다시 검색하는 정확한 방법은 무엇입니까?

노트

나는 [ $("#firstSelectedElement").val(), $("#secondSelectedElement").val() ]. 내가 검색 id="storageElement" data-storeIt="stuff"과 함께 $("#storageElement").data('storeit').

나는 진정한로 데이터를 검색 할 것 없다 Array, 단지 Array문자를.


요소 data속성 에서 html 이스케이프 문자를 사용하여 json과 같은 배열 (인코딩 된 따옴표)을 발견 했습니다 .

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

그런 다음 자바 펼쳐에서 추가 마술없이 얻으십시오.

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

바이올린확인하십시오 .

편집 됨 (2017) 속성
에 html 이스케이프 문자를 사용할 필요가 없습니다 data.

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

이 새로운 바이올린을 확인하십시오 .


배열에 저장하는 데이터 유형에 따라 늘어납니다. (그것으로) 그냥 사용할 수 있고 당신은 당신이 문자가있는 경우 (아래에있는 내 예제에서 쉼표 같은) 데이터의 일부가 될하지 그럼 내가 JSON 사용 화 및 바로 사용 사항 String.split 누락 :

<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 구문에서 데이터의 인용으로 묶어야하기 때문입니다.


HTML5 데이터 속성은 배열을 저장해야합니다. JSON이 작동하고 올바른 경로에있는 것처럼 보입니다. JSON.parse()다음 화 된 데이터를 검색하면 다음 을 사용 합니다.

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

API 문서를 검토하면서 jQuery는 인코딩 된 경우 자동으로 변환을 시도해야합니다. 당신이 저장하고있는 가치의 예를 들어 줄 수있는 있습니까?

또한 HTML5 데이터 속성과 jQuery .data()메소드는 메시지의 두 가지입니다. 상호 작용하지만 jQuery는 더 강력하며 강력한 데이터 유형을 사용할 수 있습니다. 사용 화하지 않고 jQuery를 사용하여 배열을 직접 사용 가능합니다. 그러나 마크 업 자체에 HTML5 데이터 속성으로 포함해야하는 경우에만 제한됩니다.


레코드의 경우 인코딩 된 엔터티에서 작동하지 않는 개체로 구문 분석 되려면 데이터 속성 이 잘 구성된 JSON 개체가 있습니다.

그래서 다음과 같은 개체를 사용할 수 있습니다.

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

또는 작은 따옴표를 사용하십시오.

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

즐거운 시간! : 디


다음과 같이 모든 클래스를 노드에 등록 할 수 있습니다.

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

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

참조 URL : https://stackoverflow.com/questions/16223786/store-and-retrieve-javascript-arrays-into-and-from-html5-data-attributes

반응형