Cara menyimpan data acak untuk beberapa tag HTML

Saya membuat halaman yang memiliki beberapa interaksi yang disediakan oleh javascript. Sama seperti contoh: tautan yang mengirim permintaan AJAX untuk mendapatkan konten artikel dan kemudian menampilkan data itu dalam div. Jelas dalam contoh ini, saya memerlukan setiap tautan untuk menyimpan sedikit informasi tambahan: id artikel. Cara saya menanganinya adalah dengan meletakkan informasi itu di tautan href ini:

<a class="article" href="#5">

Saya kemudian menggunakan jQuery untuk menemukan elemen a.article dan melampirkan pengendali event yang sesuai. (jangan terlalu terpaku pada kegunaan atau semantik di sini, itu hanya contoh)

Lagi pula, metode ini berfungsi, tetapi baunya sedikit, dan tidak dapat diperluas sama sekali (apa yang terjadi jika fungsi klik memiliki lebih dari satu parameter? Bagaimana jika beberapa dari parameter tersebut bersifat opsional?)

Jawaban langsung yang jelas adalah menggunakan atribut pada elemen. Maksudku, itu untuk apa mereka, bukan? (Agak).

<a articleid="5" href="link/for/non-js-users.html">

Dalam pertanyaan terakhir saya, saya bertanya apakah metode ini valid, dan ternyata kurang mendefinisikan DTD saya sendiri (saya tidak), maka tidak, itu tidak valid atau dapat diandalkan. Respons umum adalah memasukkan data ke dalam classatribut (meskipun itu mungkin karena contoh yang saya pilih tidak tepat), tetapi bagi saya, ini bahkan lebih berbau. Ya itu secara teknis valid, tetapi itu bukan solusi yang bagus.

Metode lain yang saya gunakan di masa lalu adalah untuk benar-benar menghasilkan beberapa JS dan menyisipkannya ke halaman dalam <script>tag, membuat struct yang akan dikaitkan dengan objek.

var myData = {
    link0 : {
        articleId : 5,
        target : '#showMessage'
        // etc...
    },
    link1 : {
        articleId : 13
    }
};

<a href="..." id="link0">

Tapi ini bisa menjadi sakit nyata di pantat untuk mempertahankan dan umumnya sangat berantakan.

Jadi, untuk sampai ke pertanyaan, bagaimana Anda menyimpan informasi yang acak untuk tag HTML ?

Versi HTML apa yang Anda gunakan?

Dalam HTML 5, benar-benar valid untuk memiliki atribut khusus yang diawali dengan data- , misalnya

<div data-internalid="1337"></div>

Dalam XHTML, ini tidak benar-benar valid. Jika Anda berada dalam mode XHTML 1.1, browser mungkin akan mengeluh tentang hal itu, tetapi dalam mode 1.0, sebagian besar browser hanya akan mengabaikannya secara diam-diam.

Jika saya jadi Anda, saya akan mengikuti pendekatan berbasis skrip. Anda dapat membuatnya secara otomatis di sisi server sehingga tidak sakit untuk mempertahankannya.

Jika Anda sudah menggunakan jQuery maka Anda harus memanfaatkan metode "data" yang merupakan metode yang disarankan untuk menyimpan data sewenang-wenang pada elemen dom dengan jQuery.

Untuk menyimpan sesuatu:

$('#myElId').data('nameYourData', { foo: 'bar' });

Untuk mengambil data:

var myData = $('#myElId').data('nameYourData');

Hanya itu yang ada tapi lihatlah dokumentasi jQuery untuk info lebih lanjut / contoh.

Hanya dengan cara lain, saya pribadi tidak akan menggunakan ini tetapi berfungsi (yakinkan JSON Anda valid karena eval () berbahaya).

<a class="article" href="link/for/non-js-users.html">
    <span style="display: none;">{"id": 1, "title":"Something"}</span>
    Text of Link
</a>

// javascript
var article = document.getElementsByClassName("article")[0];
var data = eval(article.childNodes[0].innerHTML);

Atribut sewenang-wenang tidak valid, tetapi sangat dapat diandalkan di browser modern. Jika Anda mengatur properti melalui javascript, maka Anda tidak perlu khawatir tentang validasi juga.

Alternatifnya adalah mengatur atribut dalam javascript. jQuery memiliki metode utilitas yang bagus hanya untuk tujuan itu, atau Anda dapat memutar sendiri.

Peretasan yang akan bekerja dengan hampir semua peramban yang memungkinkan adalah dengan menggunakan kelas terbuka seperti ini: <a class='data\_articleid\_5' href="link/for/non-js-users.html>;

Ini tidak semua yang elegan untuk kaum puritan, tetapi didukung secara universal, sesuai standar, dan sangat mudah untuk dimanipulasi. Ini sepertinya metode terbaik. Jika Anda serialize, memodifikasi , menyalin tag Anda, atau melakukan banyak hal lainnya, dataakan tetap melekat, disalin, dll.

Satu-satunya masalah adalah bahwa Anda tidak dapat menyimpan objek non-serializable seperti itu , dan mungkin ada batasan jika Anda meletakkan sesuatu yang sangat besar di sana.

Cara kedua adalah menggunakan atribut palsu seperti:<a articleid='5' href="link/for/non-js-users.html">

Ini lebih elegan, tetapi melanggar standar, dan saya tidak 100% yakin tentang dukungan. Banyak browser mendukung sepenuhnya, saya pikir IE6 mendukung JSakses untuk itu tetapi tidakCSS selectors (yang tidak terlalu penting di sini), mungkin beberapa browser akan benar-benar bingung, Anda perlu memeriksanya.

Melakukan hal-hal lucu seperti serialisasi dan deserialisasi akan lebih berbahaya.

Menggunakan hash idsmurni JSsebagian besar berfungsi, kecuali ketika Anda mencoba menyalin tag Anda. Jika sudah tag <a href="..." id="link0">, salin melalui JSmetode standar , lalu coba modifikasi yang datadilampirkan ke satu salinan saja, salinan yang lain akan dimodifikasi.

Bukan masalah jika Anda tidak menyalin tag, atau menggunakan data hanya baca . Jika Anda menyalin tagdan dimodifikasi, Anda harus menanganinya secara manual.

Menggunakan jquery,

menyimpan: $('#element_id').data('extra_tag', 'extra_info');

mendapatkan kembali: $('#element_id').data('extra_tag');

Saya tahu bahwa Anda saat ini menggunakan jQuery, tetapi bagaimana jika Anda mendefinisikan inclick handler inline. Maka Anda bisa melakukan:

 <a href='/link/for/non-js-users.htm' onclick='loadContent(5);return false;'>
     Article 5</a>

Anda dapat menggunakan tag input tersembunyi. Saya tidak mendapatkan kesalahan validasi di w3.org dengan ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <meta content="text/html;charset=UTF-8" http-equiv="content-type" />
    <title>Hello</title>
  </head>
  <body>
    <div>
      <a class="article" href="link/for/non-js-users.html">
        <input style="display: none" name="articleid" type="hidden" value="5" />
      </a>
    </div>
  </body>
</html>

Dengan jQuery Anda akan mendapatkan ID artikel dengan sesuatu seperti (tidak diuji):

$('.article input[name=articleid]').val();

Tapi saya akan merekomendasikan HTML5 jika itu opsi.

Mengapa tidak memanfaatkan data yang bermakna yang sudah ada di sana, alih-alih menambahkan data acak?

yaitu menggunakan <a href="https://stackoverflow.com/articles/5/page-title" class="article-link">, dan kemudian secara terprogram Anda bisa mendapatkan semua tautan artikel pada halaman (melalui nama kelas) dan ID artikel (cocok dengan regex /articles\/(\d+)/terhadap this.href).

Sebagai pengguna jQuery saya akan menggunakan plugin Metadata . HTML terlihat bersih, memvalidasi, dan Anda dapat menyematkan apa pun yang dapat dijelaskan menggunakan notasi JSON.

Jadi harus ada empat pilihan untuk melakukannya:

1. Masukkan data dalam atribut id.
2. Masukkan data dalam atribut arbitrer
3. Letakkan data dalam atribut class
4. Masukkan data Anda di tag lain

http://www.shanison.com/?p=321

Saya menganjurkan penggunaan atribut "rel". XHTML memvalidasi, atribut itu sendiri jarang digunakan, dan data diambil secara efisien.

Ini saran yang bagus. Terima kasih kepada @Prestaul

Jika Anda sudah menggunakan jQuery maka Anda harus memanfaatkan metode "data" yang merupakan metode yang disarankan untuk menyimpan data sewenang-wenang pada elemen dom dengan jQuery.

Sangat benar, tetapi bagaimana jika Anda ingin menyimpan data sewenang-wenang dalam HTML biasa-biasa saja? Inilah alternatif lain ...

<input type="hidden" name="whatever" value="foobar"/>

Masukkan data Anda dalam atribut nama dan nilai elemen input tersembunyi. Ini mungkin berguna jika server menghasilkan HTML (yaitu skrip PHP atau apa pun), dan kode JavaScript Anda akan menggunakan informasi ini nanti.

Diakui, bukan yang terbersih, tapi itu alternatif. Ini kompatibel dengan semua browser dan ini adalah XHTML yang valid. Anda TIDAK boleh menggunakan atribut khusus, atau Anda seharusnya benar-benar menggunakan atribut dengan awalan 'data-', karena mungkin tidak bekerja di semua browser. Dan, di samping itu, dokumen Anda tidak akan lulus validasi W3C.

Anda bisa menggunakan data- awalan atribut buatan Anda sendiri dari elemen acak (<span data-randomname="Data goes here..."></span> ), tetapi ini hanya valid dalam HTML5. Dengan demikian browser dapat mengeluh tentang validitas.

Anda juga bisa menggunakan a <span style="display: none;">Data goes here...</span> tag. Tetapi dengan cara ini Anda tidak dapat menggunakan fungsi atribut, dan jika css dan js dimatikan, ini juga bukan solusi yang rapi.

Tetapi apa yang saya pribadi sukai adalah sebagai berikut:

<input type="hidden" title="Your key..." value="Your value..." />

Masukan dalam semua kasus akan disembunyikan, atributnya benar-benar valid, dan itu tidak akan dikirim jika ada di dalam <form>tag, karena tidak punya nama, kan? Di atas semua itu, atributnya sangat mudah diingat dan kodenya terlihat bagus dan mudah dimengerti. Anda bahkan dapat memasukkan atribut-ID di dalamnya, sehingga Anda dapat dengan mudah mengaksesnya dengan JavaScript juga, dan mengakses pasangan nilai kunci input.title; input.value.

Satu kemungkinan adalah:

• Buat div baru untuk menyimpan semua data yang diperluas / arbitrer
• Lakukan sesuatu untuk memastikan bahwa div ini tidak terlihat (mis. CSS plus atribut class dari div)
• Letakkan data yang diperluas / sewenang-wenang dalam tag HTML [X] (mis. Sebagai teks di dalam sel tabel, atau apa pun yang mungkin Anda suka) dalam div yang tidak terlihat ini

Pendekatan lain dapat menyimpan kunci: pasangan nilai sebagai kelas sederhana menggunakan sintaks berikut:

<div id="my_div" class="foo:'bar'">...</div>

Ini valid dan dapat dengan mudah diambil dengan pemilih jQuery atau fungsi yang dibuat khusus.

Di perusahaan saya sebelumnya, kami menggunakan tag HTML khusus setiap saat untuk menyimpan info tentang elemen formulir. Tangkapan: Kami tahu bahwa pengguna terpaksa menggunakan IE.

Itu tidak bekerja dengan baik untuk FireFox pada saat itu. Saya tidak tahu apakah FireFox telah mengubah ini atau tidak, tetapi perlu diketahui bahwa menambahkan atribut Anda sendiri ke elemen HTML mungkin atau mungkin-tidak didukung oleh browser pembaca Anda.

Jika Anda dapat mengontrol browser mana yang digunakan pembaca Anda (yaitu applet web internal untuk suatu perusahaan), maka tentu saja, cobalah. Apa yang bisa menyakitkan, kan?

Ini adalah bagaimana saya melakukan Anda halaman ajax ... itu metode yang cukup mudah ...

    function ajax_urls() {
       var objApps= ['ads','user'];
        $("a.ajx").each(function(){
               var url = $(this).attr('href');
               for ( var i=0;i< objApps.length;i++ ) {
                   if (url.indexOf("/"+objApps[i]+"/")>-1) {
                      $(this).attr("href",url.replace("/"+objApps[i]+"/","/"+objApps[i]+"/#p="));
                   }
               }
           });
}

Cara kerjanya adalah pada dasarnya terlihat pada semua URL yang memiliki kelas 'ajx' dan itu menggantikan kata kunci dan menambahkan tanda # ... jadi jika js dimatikan maka url akan bertindak seperti biasanya ... semua " apps "(setiap bagian situs) memiliki kata kunci sendiri ... jadi yang perlu saya lakukan adalah menambahkan ke array js di atas untuk menambahkan lebih banyak halaman ...

Jadi misalnya pengaturan saya saat ini diatur ke:

 var objApps= ['ads','user'];

Jadi jika saya punya url seperti:

www.domain.com/ads/3923/bla/dada/bla

skrip js akan menggantikan bagian / ads / sehingga URL saya akan berakhir

www.domain.com/ads/#p=3923/bla/dada/bla

Kemudian saya menggunakan plugin jquery bbq untuk memuat halaman yang sesuai ...

http://benalman.com/projects/jquery-bbq-plugin/

Saya telah menemukan plugin metadata menjadi solusi yang sangat baik untuk masalah menyimpan data sewenang-wenang dengan tag html dengan cara yang membuatnya mudah untuk diambil dan digunakan dengan jQuery.

Penting : File aktual yang Anda sertakan hanya 5 kb dan bukan 37 kb (yang merupakan ukuran paket unduhan lengkap)

Berikut adalah contoh penggunaannya untuk menyimpan nilai yang saya gunakan saat membuat acara pelacakan google analytics (catatan: data.label dan data.value merupakan params opsional)

$(function () {
    $.each($(".ga-event"), function (index, value) {
        $(value).click(function () {
            var data = $(value).metadata();
            if (data.label && data.value) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label, data.value]);
            } else if (data.label) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label]);
            } else {
                _gaq.push(['_trackEvent', data.category, data.action]);
            }
        });
    });
});

<input class="ga-event {category:'button', action:'click', label:'test', value:99}" type="button" value="Test"/>

Dalam html, kita dapat menyimpan atribut khusus dengan awalan 'data-' sebelum nama atribut seperti

<p data-animal='dog'>This animal is a dog.</p>. Periksa dokumentasi

Kita dapat menggunakan properti ini untuk secara dinamis mengatur dan mendapatkan atribut menggunakan jQuery seperti: Jika kita memiliki tag ap like

<p id='animal'>This animal is a dog.</p>

Kemudian untuk membuat atribut yang disebut 'breed' untuk tag di atas, kita dapat menulis:

$('#animal').attr('data-breed', 'pug');

Untuk mengambil data kapan saja, kita dapat menulis:

var breedtype = $('#animal').data('breed');

Selama pekerjaan Anda sebenarnya dilakukan di sisi server, mengapa Anda memerlukan informasi khusus di tag html di output? semua yang perlu Anda ketahui kembali di server adalah indeks apa pun jenis daftar struktur dengan info khusus Anda. Saya pikir Anda mencari untuk menyimpan informasi di tempat yang salah.

Saya akan mengakui, betapapun disayangkan, bahwa dalam banyak kasus solusi yang tepat bukanlah solusi yang tepat. Dalam hal ini saya sangat menyarankan menghasilkan beberapa javascript untuk menyimpan informasi tambahan.

Bertahun-tahun kemudian:

Pertanyaan ini diposting kira-kira tiga tahun sebelum data-...atribut menjadi pilihan yang valid dengan munculnya html 5 sehingga kebenaran telah berubah dan jawaban asli yang saya berikan tidak lagi relevan. Sekarang saya sarankan untuk menggunakan atribut data .

<a data-articleId="5" href="link/for/non-js-users.html">

<script>
    let anchors = document.getElementsByTagName('a');
    for (let anchor of anchors) {
        let articleId = anchor.dataset.articleId;
    }
</script>