Rumah > Artikel > hujung hadapan web > Contoh pembelajaran JavaScript untuk membaca dan menulis kuki
Artikel ini terutamanya memperkenalkan mata pengetahuan yang berkaitan tentang kuki membaca dan menulis JavaScript melalui contoh Rakan yang memerlukan ini boleh merujuknya.
Pertama sekali, mari kita memahami secara ringkas kuki
Dalam proses membuat halaman web, kita sering perlu memindahkan maklumat dari satu halaman ke halaman yang lain, kita perlu menggunakan JavaScript Mekanisme kuki dalam . Ringkasnya, kuki menyediakan cara yang mudah untuk menyimpan sejumlah kecil data pada komputer pengguna dan mendapatkannya dari jauh, membolehkan tapak web menyimpan butiran seperti tetapan tabiat pengguna atau masa lawatan terakhir ke tapak web. Kuki itu sendiri ialah sekeping maklumat ringkas yang boleh disimpan pada komputer pengguna mengikut halaman dan kemudian dibaca oleh halaman lain. Kuki biasanya ditetapkan untuk tamat tempoh selepas tempoh masa tertentu.
Sudah tentu, kuki juga mempunyai had: penyemak imbas mempunyai had pada bilangan kuki yang boleh disimpan, biasanya beberapa ratus atau lebih. Dalam keadaan biasa, 20 kuki dibenarkan bagi setiap nama domain, dan setiap domain boleh menyimpan sehingga 4KB kuki Selain masalah yang mungkin disebabkan oleh sekatan saiz, terdapat juga banyak sebab yang boleh menyebabkan kuki pada cakera keras menjadi. hilang, seperti mencapai tarikh tamat tempoh Atau pengguna mengosongkan maklumat kuki, atau beralih ke penyemak imbas lain. Oleh itu, kuki tidak sesuai untuk menyimpan data penting Semasa menulis kod, anda juga mesti mempertimbangkan cara mengendalikan pengecualian pemerolehan kuki.
Dalam JavaScript, gunakan atribut kuki objek dokumen untuk menyimpan dan mendapatkan semula kuki Biasanya, maklumat dalam document.cookie ialah rentetan yang terdiri daripada pasangan nama dan nilai, dan setiap pasangan data berada dalam. borang :
name=value;
Di bawah kami akan menggunakan contoh mudah untuk menunjukkan cara membaca dan menulis kuki dalam JavaScript.
Yang pertama ialah createCookie.html, di mana halaman akan dibuat kuki , kod lengkap adalah seperti berikut:
<html> <head> <title>createCookie</title> <script> function createCookie(){ //get name and password var name = document.getElementById("name").value; var pwd = document.getElementById("pwd").value; //create cookie document.cookie = name+'|'+pwd; //go to showCookie.html page window.location.href = "showCookie.html"; } </script> </head> <body> Userame: <input id="name" type="text" /><br><br> Password: <input id="pwd" type="password" /><br><br> <button onclick="createCookie()">Submit</submit> </body> </html>
Tangkapan skrin halaman adalah seperti berikut:
Klik butang hantar dan kuki akan menjadi dibuat. Maklumat Nama Pengguna dan Kata Laluan disimpan di dalamnya, dan ia akan melompat ke halaman showCookie.html. Antaranya, kod lengkap halaman showCookie.html adalah seperti berikut:
<html> <head> <title>showCookie</title> <script> function showCookie(){ //document.cookie is a string, using split() function to get cookie date in array form var arr = document.cookie.split('|'); //processing data in cookie var cookie_info = 'Data in cookie:<br>username is: '+arr[0]+"<br>password is: "+arr[1]+'<br>'; //set content of element of id "res" document.getElementById("res").innerHTML = cookie_info; } </script> </head> <body> <button onclick="showCookie()">Show Cookie</button> <p id="res"></p> </body> </html>
Tangkapan skrin halaman adalah seperti berikut:
Mengklik butang tunjukkan Kuki akan memaparkan maklumat dalam kuki .
Seterusnya, kami akan menjalankan program ini secara setempat dan pada pelayan, dan menjalankan program ini pada pelayar IE dan pelayar Chrome masing-masing untuk melihat pengendalian kuki.
Mula-mula kami menjalankan program ini secara tempatan, dan kami meletakkan dua fail di atas dalam pemacu E. Mula-mula jalankannya pada pelayar IE, masukkan maklumat pada halaman createCookie.html, dan klik butang hantar Tangkapan skrin adalah seperti berikut:
Selepas melompat ke showCookie. Halaman .html, klik butang tunjukkan Kuki, tangkapan skrin halaman adalah seperti berikut:
Kuki berjalan seperti biasa dalam pelayar IE dalam persekitaran setempat.
Seterusnya, mari lihat cara ia berfungsi dalam penyemak imbas Chrome Mula-mula, buka halaman createCookie.html dalam penyemak imbas Chrome, masukkan maklumat, dan klik butang serah Tangkapan skrin adalah seperti berikut:
Selepas melompat ke halaman showCookie.html, klik butang tunjukkan Kuki Tangkapan skrin halaman adalah seperti berikut:
Sama. prosedur, kali ini kuki berada dalam Chrome Ia gagal dijalankan dalam penyemak imbas.
Kemudian mari kita jalankan program ini dalam pelayan Kita perlu menggunakan xampp, buka pelayan Apache, dan letakkan dua fail html di atas dalam folder htdocs di bawah folder pemasangan xampp (kaedah operasi tertentu boleh. Rujuk blog ini: Menggunakan AJAX dengan JavaScript (untuk pemula)). Kami kini menjalankan program dalam pelayar IE, masukkan URL dalam pelayar IE: http://localhost/createCookie...:
Klik butang Hantar untuk melompat Pergi ke halaman showCookie.html dan klik butang show Cookie Tangkapan skrin adalah seperti berikut:
Kemudian kami masukkan URL dalam pelayar Chrome: http://localhost /createCookie... :
Klik butang Hantar, lompat ke halaman showCookie.html, dan klik butang tunjukkan Cookie Tangkapan skrin adalah seperti berikut:
Kali ini dalam persekitaran pelayan. , pelayar IE dan kuki penyemak imbas Chrome berfungsi dengan baik!
Di atas adalah keseluruhan kandungan bab ini Untuk lebih banyak tutorial berkaitan, sila lawati Tutorial Video JavaScript!