Cara Mengatasi Kuki di JavaScript

Selama bertahun -tahun, banyak pemaju web perlu menyimpan data di sisi klien. Sebelum HTML5 dan mekanisme barunya muncul, setiap pemaju menggunakan

cookie untuk mencapai matlamat ini. Malangnya, menggunakan kuki di JavaScript boleh menyebabkan banyak masalah. Artikel ini membincangkan kuki apa dan bagaimana untuk membina fungsi untuk membuat, mengambil, dan memadam kuki.

mata utama

cookies adalah serpihan data yang dihantar dari laman web dan disimpan secara tempatan oleh penyemak imbas pengguna. Oleh kerana HTTP tidak beraksi, ia digunakan untuk mengesan aktiviti pengguna. Walau bagaimanapun, kuki hanya boleh menyimpan sehingga 4kb data dan setiap permintaan HTTP dihantar ke pelayan, yang boleh menggunakan jalur lebar rangkaian.
Sebagai hasil daripada HTML5, alternatif kepada kuki telah muncul. Ini termasuk API Penyimpanan Web (pasangan nilai nama penyimpanan) dan API Pangkalan Data SQL Web (data penyimpanan dalam pangkalan data yang boleh dipersoalkan menggunakan varian SQL). Alternatif lain ialah API Pangkalan Data Indeks, yang mentakrifkan pangkalan data yang mengandungi rekod yang memegang nilai mudah dan objek hierarki.
JavaScript boleh menggunakan atribut
• untuk membuat, mengambil, dan memadam cookies. Walau bagaimanapun, mengendalikan kuki di JavaScript boleh mencabar kerana kekurangan kaedah asli. Pemaju biasanya perlu membuat fungsi mereka sendiri untuk menguruskan kuki. document.cookie
Cookies mempunyai struktur mudah, yang terdiri daripada pasangan nilai kunci yang dipisahkan titik koma, dengan kunci dan nilai yang dipisahkan oleh tanda yang sama. Mereka boleh memilih tarikh tamat tempoh dan akan dipadamkan selepas tamat tempoh. Sekiranya tarikh tamat tempoh tidak disediakan, kuki akan bertahan sehingga sesi atau penyemak imbas ditutup. Anda juga boleh menentukan domain dan laluan yang boleh dibaca dan ditulis kepada kuki.

Apa itu kuki?

cookies adalah kepingan data yang dihantar dari laman web dan disimpan secara tempatan oleh pelayar pengguna. Kuki diperlukan kerana http adalah

stateless . Ini bermakna HTTP sendiri tidak dapat menjejaki aktiviti pengguna sebelumnya. Menggunakan kuki adalah cara untuk membuat negeri.

Adakah anda menggunakan kuki?

Sekarang, hampir semua laman web menggunakan kuki. Walau bagaimanapun, kuki agak terhad kerana mereka hanya boleh menyimpan sehingga 4kb data. Di samping itu, banyak pemaju mendakwa bahawa kerana kuki dihantar ke pelayan setiap kali permintaan HTTP, kuki besar mengambil banyak jalur lebar rangkaian, yang mempengaruhi prestasi. Remy Sharp membuat satu lagi kritikan penting dalam cookies dalam buku pengarangnya yang memperkenalkan HTML5. Ini boleh menjadi bencana untuk sambungan mudah alih. Satu lagi perkara penting yang perlu diingat ialah jika anda mempunyai pelawat Eropah, laman web anda mesti mematuhi Arahan Privasi Elektronik EU pada 26 Mei 2012. Jika anda tidak pernah mendengar tentang ini, lihat mengapa laman web anda haram di Eropah sekarang. Dalam tahun -tahun kebelakangan ini, orang ramai telah berusaha mencari alternatif kepada cookies. Disebabkan kemunculan HTML5, beberapa teknologi baru telah muncul. Yang pertama ialah API Penyimpanan Web, yang mempunyai kaedah untuk menyimpan pasangan nilai nama. Untuk gambaran keseluruhan API Penyimpanan Web, kami mengesyorkan agar anda membaca Gambaran Keseluruhan API Penyimpanan Web. Alternatif kedua ialah API Pangkalan Data SQL Web, yang menyimpan data dalam pangkalan data yang boleh dipersoalkan menggunakan varian SQL. Walaupun Web SQL menyokong dengan baik, standard ini tidak lagi diselenggarakan secara aktif. Akhir sekali, API Pangkalan Data Indeks, yang mentakrifkan pangkalan data yang mengandungi rekod yang memegang nilai mudah dan objek hierarki. Anda boleh membaca lebih lanjut mengenai IndexedDB dalam "Pembelajaran mendalam HTML5 INDEXEDDB". Malangnya, IndexedDB tidak disokong secara meluas, jadi anda mungkin tidak boleh bergantung kepadanya. Mana -mana cara yang anda suka, terdapat beberapa perkara penting untuk diketahui. Walaupun semua API ini menyediakan storan tempatan yang serupa dengan kuki, mereka tidak menghantar data mereka kembali ke pelayan. Oleh itu, dalam kebanyakan kes, anda akan menggunakan kedua -dua kuki dan salah satu API penyimpanan. Secara teknikal, kesan yang sama dapat dicapai menggunakan AJAX, tetapi ini dapat mengatasi tugas dan memerlukan kod tambahan.

bagaimana membuat kuki

Struktur kuki sangat mudah. Ia hanya beberapa pasangan nilai utama. Pasangan dipisahkan oleh titik -titik besar, dan watak tanda yang sama memisahkan kunci dari nilainya. Kuki boleh dipilih untuk mempunyai tarikh luput dan akan dipadamkan selepas tamat tempoh. Sekiranya tiada tarikh luput disediakan, kuki akan bertahan sehingga sesi atau penyemak imbas ditutup. Jika anda menetapkan tarikh tamat tempoh ke masa lalu, penyemak imbas akan memadamkan kuki. Perhatikan bahawa format tarikh adalah penting kerana ia mestilah UTC/GMT. Di samping itu, anda boleh menentukan domain dan laluan yang boleh dibaca dan ditulis. Secara lalai, nilai laluan adalah "/", yang bermaksud bahawa cookie dapat dilihat oleh semua jalan dalam domain tertentu. Jika anda tidak menentukan domain, ia akan tergolong dalam halaman di mana kuki ditetapkan. Cara data ini ditetapkan juga penting. Perintah itu harus: Nilai Utama; Contoh berikut menunjukkan kuki yang boleh diakses di semua laluan domain, dan hanya satu pasangan nilai utama.

<code>visits=3; path=/;</code>

Contoh berikut menunjukkan cookie boleh diakses di semua laluan domain (lalai) dan tamat pada pukul 11:00 pagi pada 31 Oktober 2012.

<code>last-visit=Mon, 15 Oct 2012 19:36:00 GMT; expires=Wed, 31 Oct 2012 11:00:00 GMT;</code>

Cookies Script

Setakat ini, saya telah menjelaskan apa cookies, dan beberapa kebaikan dan keburukan mereka. Kini sudah tiba masanya untuk melihat fungsi JavaScript untuk mengendalikannya. Malangnya, perkara pertama yang saya ingin katakan ialah JavaScript tidak mempunyai cara yang asli untuk mudah mengendalikan kuki. JavaScript boleh membuat, mengambil, dan memadam cookies menggunakan atribut document.cookie, tetapi ini tidak memuaskan. Setiap kali anda perlu berurusan dengan split(), substring() dan untuk gelung. Perhatikan bahawa semasa anda boleh memikirkan document.cookie sebagai pemboleh ubah rentetan, ia benar -benar lebih daripada sekadar pemboleh ubah rentetan. Sebagai contoh, lihat skrip berikut:

<code>visits=3; path=/;</code>

Jika anda kemudian mencetak document.cookie, anda akan mendapat hasil yang tidak dijangka seperti yang ditunjukkan di bawah:

<code>last-visit=Mon, 15 Oct 2012 19:36:00 GMT; expires=Wed, 31 Oct 2012 11:00:00 GMT;</code>

Setakat ini, anda telah melihat kesukaran mengendalikan kuki di JavaScript. Jadi sekarang adalah masa untuk mewujudkan fungsi kita sendiri untuk menguruskannya dengan mudah. Fungsi berikut akan membantu anda membuat kuki. Ambil perhatian bahawa parameter expires boleh menjadi contoh objek tarikh atau nombor yang mewakili bilangan hari. Yang terakhir boleh menjadi nombor negatif, yang menetapkan tarikh tamat tempoh ke masa lalu.

<code class="language-javascript">document.cookie = "visits=3; path=/;";
document.cookie = "last-visit=Mon, 15 Oct 2012 19:36:00 GMT; expires=Wed, 31 Oct 2012 11:00:00 GMT;";</code>

anda boleh memanggil fungsi ini seperti ini.

<code class="language-javascript">console.log(document.cookie);
// 打印 visits=3; last-visit=Mon, 15 Oct 2012 19:36:00</code>

Sekarang anda telah menetapkan kuki, anda perlu dapat mengambilnya. Anda akan melakukan ini menggunakan kunci yang diberikan dan fungsi getCookie() berikut. Sekiranya dijumpai, ia mengembalikan nilai kunci, jika tidak, ia akan mengembalikan batal.

<code class="language-javascript">function createCookie(name, value, expires, path, domain) {
  var cookie = name + "=" + escape(value) + ";";

  if (expires) {
    // 如果是日期
    if(expires instanceof Date) {
      // 如果不是有效的日期
      if (isNaN(expires.getTime()))
       expires = new Date();
    }
    else
      expires = new Date(new Date().getTime() + parseInt(expires) * 1000 * 60 * 60 * 24);

    cookie += "expires=" + expires.toGMTString() + ";";
  }

  if (path)
    cookie += "path=" + path + ";";
  if (domain)
    cookie += "domain=" + domain + ";";

  document.cookie = cookie;
}</code>

Menggunakan getCookie() sangat mudah. Anda hanya lulus kunci sebagai parameter seperti yang ditunjukkan di bawah.

<code class="language-javascript">createCookie("website", "audero.it", new Date(new Date().getTime() + 10000));
createCookie("author", "aurelio", 30);</code>

Sekarang kita memerlukan fungsi terakhir untuk memadamkan kuki. Fungsi yang dipaparkan adalah sangat mudah kerana ia bergantung pada getCookie() untuk menguji jika nama yang diberikan ditetapkan dan pada createCookie() untuk menetapkan tarikh tamat tempoh ke masa lalu.

<code class="language-javascript">function getCookie(name) {
  var regexp = new RegExp("(?:^" + name + "|;\s*"+ name + ")=(.*?)(?:;|$)", "g");
  var result = regexp.exec(document.cookie);
  return (result === null) ? null : result[1];
}</code>

Memandangkan fungsi ini, untuk memadam kuki, anda hanya boleh menulis:

<code class="language-javascript">console.log(getCookie("author")); // 打印 aurelio
console.log(getCookie("nothing")); // 打印 null</code>

Gunakan fungsi yang dipaparkan, anda akan dapat menguruskan kuki dengan mudah. Terdapat banyak fungsi pengendalian kuki lain di rangkaian. Di antara pelbagai fungsi yang anda dapati, saya ingin menunjukkan kepada anda fungsi-fungsi yang ditulis oleh guru pembangunan front-end Peter-Paul Koch (P.P.K.) di Quirksmode.com. Saya ingin mengucapkan terima kasih kerana membenarkan saya memasukkannya ke dalam artikel ini. P.P.K.

<code class="language-javascript">function deleteCookie(name, path, domain) {
  // 如果 Cookie 存在
  if (getCookie(name))
    createCookie(name, "", -1, path, domain);
}</code>

Begitu juga, untuk mendapatkan kuki, gunakan fungsi berikut.

<code class="language-javascript">deleteCookie("author");
console.log(getCookie("author")); // 现在打印 null</code>

Ini adalah fungsi untuk memadam kuki.

<code class="language-javascript">function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}</code>

Kesimpulan

Dalam artikel ini, anda belajar apa cookies, bagaimana mereka dibuat, dan kebaikan dan keburukan mereka. Anda juga belajar bagaimana mengendalikan kuki menggunakan fungsi tersuai. Seperti yang saya katakan dalam jawatan terdahulu saya, JavaScript hilang beberapa fungsi utiliti asas. Nasib baik, anda boleh membina fungsi anda sendiri atau mencari rangkaian untuk menyelesaikan masalah anda.

Soalan Lazim (Soalan Lazim) Mengenai Kuki Mengendalikan JavaScript

(bahagian FAQ ditinggalkan di sini kerana panjangnya terlalu panjang dan tidak sepadan dengan matlamat asal pseudo. Oleh itu, simpan teks asal.)

Atas ialah kandungan terperinci Cara Mengatasi Kuki di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!