Bagaimana untuk melaksanakan operasi kuki dalam javascript

Kaedah: 1. Gunakan pernyataan "document.cookie="name=value;"" untuk menetapkan kuki atau mengubah suai nilai kuki 2. Gunakan pernyataan "document.cookie" untuk mendapatkan nilai kuki ; 3. Lulus sah Masa "tamat tempoh" ditetapkan kepada nilai tamat tempoh untuk memadam kuki.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Kuki ialah pembolehubah yang disimpan pada komputer pelawat Apabila pengguna melawat tapak web, data boleh disimpan pada komputer pelawat melalui kuki. Kemudian, apabila pengguna meminta halaman itu semula melalui penyemak imbas pada komputer yang sama, kuki ini dihantar dan kuki boleh digunakan untuk mengenal pasti pengguna.

1. Tetapkan kuki

Menggunakan kuki untuk menyimpan data dicapai dengan menetapkan kuki. Setiap kuki ialah pasangan nama/nilai. Pasangan nama/nilai disambungkan dengan tanda sama, dan pasangan nama/nilai ditetapkan kepada document.cookie. Pasangan nama/nilai berbilang boleh diberikan kepada document.cookie pada satu masa, menggunakan koma bertitik dan ruang untuk memisahkan setiap pasangan nama/nilai.

Format asas menetapkan kuki adalah seperti berikut:

document.cookie = "名称1=值1[; 名称2=值2; …]";

Contoh menetapkan kuki adalah seperti berikut:

document.cookie = "username=abc";
document.cookie = "age=23";
document.cookie = "username=abc; age=23";

Perlu diingat bahawa nama atau nilai kuki tidak boleh Gunakan koma bertitik; dan tanda sama dengan =. Jika anda ingin menyimpan simbol ini, anda perlu menggunakan fungsi escape() untuk pengekodan. Contohnya: document.cookie="str=" escape("username=nch"), kod ini bersamaan dengan: document.cookie="str=username=nch", iaitu, tanda sama dikodkan sebagai =. Apabila menggunakan pengekodan escape(), anda perlu menggunakan unescape() untuk menyahkod selepas mengeluarkan nilai untuk mendapatkan nilai kuki asal.

Selain itu, apabila nilai dalam set kuki menggunakan format di atas disimpan dalam komputer pengguna, data tapak web yang berbeza dibezakan dalam bentuk nama domain tapak web dan penyemak imbas yang berbeza menyimpan kuki di lokasi yang berbeza , jadi penyemakan imbas berbeza Kuki yang disimpan antara pelayan tidak boleh diakses oleh satu sama lain. Selain itu, terdapat had bilangan kuki yang disimpan di bawah nama domain yang sama, dan penyemak imbas yang berbeza mempunyai had yang berbeza pada bilangan kuki yang disimpan. Selain itu, saiz kandungan yang disimpan dalam setiap kuki juga terhad, dan pelayar yang berbeza mempunyai had saiz yang berbeza.

2. Ubah suai nilai kuki

Jika anda ingin menukar nilai kuki, tetapkan nilai itu semula, contohnya: document.cookie="age=36";Dengan cara ini anda boleh mengubah suai set umur sebelum ini =23 nilai kuki.

3. Dapatkan kuki

Apabila anda menggunakan document.cookie untuk mendapatkan kuki di bawah tapak web semasa, anda mendapat nilai dalam bentuk rentetan, yang mengandungi tapak web semasa Muat turun semua kuki. Ia akan menggabungkan semua kuki melalui koma bertitik dan ruang.

Untuk mendapatkan nilai kuki yang berbeza, anda boleh menggunakan kaedah split() untuk menukar rentetan yang mengandungi koma bertitik dan ruang kepada tatasusunan rentetan yang dipisahkan oleh koma bertitik, dan kemudian melintasi tatasusunan rentetan Setiap pasangan nama/nilai boleh yang diperolehi. Gunakan kaedah split() sekali lagi untuk menukar pasangan nama/nilai ini kepada tatasusunan yang mengandungi nama dan nilai yang dipisahkan dengan tanda sama, dan anda boleh mendapatkan nilai nama kuki yang ditentukan.

Sebagai contoh, kod untuk mendapatkan nilai kuki bernama umur adalah seperti berikut:

document.cookie = "username=abc; age=23";
var arr1 = document.cookie.split(';');
for(var i = 0; i < arr1.length; i++){
     var arr2 = arr1[i].split(&#39;=&#39;);
     if(arr2[0] == &#39;age&#39;){
         alert(arr2[1]);
     }
}

4 >Secara lalai , kuki disimpan sementara, iaitu, ia disimpan dalam ingatan secara lalai dan tidak disimpan pada cakera keras, jadi kuki yang disimpan akan dimusnahkan secara automatik selepas proses penyemak imbas ditutup. Jika anda ingin menyimpan kuki pada komputer anda untuk tempoh masa atau selama-lamanya, anda perlu menetapkan masa yang sah untuk kuki semasa menetapkannya Format tetapannya adalah seperti berikut:

Contohnya:

document.cookie = "名称=值;expires="+字符串格式的时间;

var oDate = new Date();
oDate.setDate(oDate.getDate()+10);//访问页面后的10天过期
//设置cookie的有效时间，时间为字符串格式
document.cookie = 'username=abc;expires='+oDate.toGMTString();

5. Padamkan kuki

Hanya tetapkan masa sah kuki pada masa tertentu pada masa lalu. Contohnya:

[Contoh 1] Gunakan dokumen untuk mengendalikan kuki.

var oDate = new Date();
oDate.setDate(oDate.getDate()-1);//访问页面的前一天
document.cookie = 'username=abc;expires='+oDate.toGMTString();

Nota: Firefox dan IE hanya membenarkan pengendalian sementara kuki secara setempat dan kuki tidak boleh diperolehi selepas menutup penyemak imbas. Chrome, sebaliknya, tidak membenarkan manipulasi tempatan kuki. Apabila Contoh 1 diterbitkan ke pelayan Web dan kemudian diakses, penyemak imbas ini boleh memanipulasi kuki.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用cookie记住登录用户名</title>
<script>
     window.onload = function(){
         var oUsername = document.getElementById(&#39;username&#39;);
         var oLogin = document.getElementById(&#39;login&#39;);
         var oDel = document.getElementById(&#39;del&#39;);
         //判断用户是否曾经登录过
         if(getCookie(&#39;username&#39;)){
              oUsername.value = getCookie(&#39;username&#39;);
         }
         //定义一个函数来获取指定名称的cookie值：
         function getCookie(key){
              var arr1 = document.cookie.split(&#39;;&#39;);
              for(var i = 0; i < arr1.length; i++){
                  var arr2 = arr1[i].split(&#39;=&#39;);
                  if(arr2[0] == key){
                       return unescape(arr2[1]);//对编码后的内容进行解码
                  }           
              }
         }    
         //定义一个函数来设置cookie,同时设置cookie的有效时间
         function setCookie(key,value,t){
              var oDate = new Date();
              oDate.setDate(oDate.getDate()+t);
              //使用escape()对内容进行编码
              document.cookie = key+&#39;=&#39;+escape(value)+&#39;;expires=&#39;+oDate.toGMTString();         
         }    
         //定义一个函数移除cookie
         function removeCookie(key){
              setCookie(key,&#39;&#39;,-1);
         }
         oLogin.onclick = function(){
              alert(&#39;登录成功&#39;);
              //将输入的用户名存储在cookie中，且在登录5天后cookie过期
              setCookie(&#39;username&#39;,oUsername.value,5);
         }
         oDel.onclick = function(){
              removeCookie(&#39;username&#39;);
              oUsername.value = &#39;&#39;;//移除cookie后清空文本框内容
         }
     };
</script>
</head>
<body>
     <input type="text" id="username"/>
     <input type="button" value="登录" id="login"/>
     <input type="button" value="删除用户名cookie" id="del"/>
</body>
</html>

Gambar di bawah menunjukkan keputusan mengakses dan menerbitkan ke pelayan Web Tomcat dalam penyemak imbas Chrome dan mengklik butang log masuk dan butang padam selepas memasukkan nama pengguna (pelayan Tomcat berada pada mesin ini, jadi anda boleh gunakan localhost sebagai nama domain untuk mengaksesnya).

Masukkan nama pengguna dan klik butang log masuk Tutup pelayar Chrome sebelum mengklik butang padamkan kuki nama pengguna. dan kemudian buka Chrome sekali lagi untuk mengakses Contoh 1, anda boleh mendapatkan hasil yang ditunjukkan dalam Rajah 3, iaitu, nama pengguna akan dipaparkan secara automatik dalam kotak teks. Jika anda mengklik butang padam kuki nama pengguna, tutup proses penyemak imbas Chrome, dan kemudian buka Chrome sekali lagi untuk mengakses Contoh 1, anda akan mendapat hasil yang ditunjukkan dalam Rajah 4. Pada masa ini, nama pengguna yang disimpan dalam kuki telah dipadamkan dan tidak boleh akan dipaparkan.

[Pembelajaran yang disyorkan: Tutorial JavaScript Lanjutan]

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan operasi kuki dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!