Rumah >hujung hadapan web >tutorial js >jquery menggunakan kuki dan JSON untuk merekod sejarah_jquery penyemakan imbas terkini pengguna

jquery menggunakan kuki dan JSON untuk merekod sejarah_jquery penyemakan imbas terkini pengguna

WBOY
WBOYasal
2016-05-16 15:04:462002semak imbas

Pada sesetengah tapak web e-dagang, terdapat fungsi "sejarah penyemakan imbas produk", dan beberapa tapak web video dan novel juga boleh merekodkan sejarah penyemakan imbas terkini pengguna. Artikel ini akan menggunakan Cookies dan JSON untuk menerangkan cara melaksanakan fungsi ini.
Kuki boleh digunakan untuk merekodkan ID pengguna pelanggan, kata laluan, halaman web yang dilayari, tempoh penginapan dan maklumat lain jQuery menyediakan pemalam kuki yang boleh membaca dan menulis maklumat kuki dengan sangat mudah.
Proses asas:
1. Dapatkan tajuk dan alamat halaman artikel pada halaman butiran artikel; 2. Dapatkan maklumat kuki sejarah penyemakan imbas dan tentukan sama ada sejarah penyemakan imbas artikel semasa sudah wujud dalam kuki sejarah penyemakan imbas, maka tiada operasi akan dilakukan
3. Jika tiada rekod penyemakan imbas artikel semasa dalam kuki sejarah penyemakan imbas, maklumat kuki artikel semasa (tajuk artikel dan alamat halaman) akan ditulis ke dalam maklumat kuki sejarah penyemakan imbas. Maklumat kuki yang ditulis adalah dalam format data JSON, yang mudah dibaca.
4. Dapatkan maklumat kuki sejarah menyemak imbas, merentasi data JSON, menganalisis dan mengeluarkan rekod sejarah penyemakan imbas.

Penjelasan terperinci:
1. Pastikan halaman butiran artikel untuk merekodkan sejarah penyemakan imbas telah memuatkan pemalam jquery dan kuki. Dapatkan tajuk artikel dan alamat halaman halaman artikel semasa:

var art_title = $(".blog_txt h2").text(); //文章标题 
var art_url = document.URL; //页面地址 
2. Dapatkan rekod penyemakan imbas sejarah pengguna Jika sejarah penyemakan imbas sudah wujud, analisa maklumat kuki rekod sejarah (format data JSON) dan dapatkan panjang rekod.


 var canAdd = true; //初始可以插入cookie信息 
var hisArt = $.cookie("hisArt"); 
var len = 0; 
if(hisArt){ 
  hisArt = eval("("+hisArt+")"); 
  len = hisArt.length; 
} 
3. Jika maklumat kuki sejarah penyemakan imbas sudah wujud, lalui maklumat kuki dan bandingkan tajuk artikel semasa Jika tajuk artikel semasa sudah wujud dalam maklumat kuki, program akan ditamatkan dan tiada operasi akan dilakukan.


 $(hisArt).each(function(){ 
  if(this.title == art_title){ 
    canAdd = false; //已经存在,不能插入 
    return false; 
  } 
}); 
4. Jika artikel semasa tidak wujud dalam kuki sejarah penyemakan imbas, maklumat kuki artikel semasa boleh dimasukkan ke dalam kuki sejarah penyemakan imbas. Pada masa ini, anda perlu membina data json, menggabungkan kuki rekod penyemakan imbas sedia ada dan maklumat kuki halaman semasa ke dalam data JSON, dan kemudian menulisnya ke dalam rekod sejarah penyemakan imbas melalui kaedah $.cookie().


 if(canAdd==true){ 
  var json = "["; 
  var start = 0; 
  if(len>4){start = 1;} 
  for(var i=start;i<len;i++){ 
    json = json + "{\"title\":\""+hisArt[i].title+"\",\"url\":\""+hisArt[i].url+"\"},"; 
  } 
  json = json + "{\"title\":\""+art_title+"\",\"url\":\""+art_url+"\"}]"; 
  $.cookie("hisArt",json,{expires:1}); 
} 
Dengan cara ini, kami mendapat maklumat kuki sejarah penyemakan imbas pengguna Nama kuki ialah hisArt dan nilainya ialah data dalam format JSON, seperti: [{"title":"article1","url":"a. html" },{"title":"article2","url":"b.html"},]

5. Seterusnya, kita perlu memaparkan maklumat kuki sejarah penyemakan imbas pengguna. Dalam halaman tunjuk cara yang sepadan dengan contoh ini, anda mesti mendapatkan nilai kuki sejarah penyemakan imbas dahulu: hisArt, kemudian menganalisis, melintasi dan menggabungkannya menjadi rentetan untuk menghasilkan kod tersebut seperti berikut:

 $(function(){ 
  var json = eval("("+$.cookie("hisArt")+")"); 
  var list = ""; 
  for(var i=0; i<json.length;i++){ 
    list = list + "<li><a href='"+json[i].url+"' target='_blank'>"+json[i].title+"</a></li>"; 
  } 
  $("#list").html(list); 
}); 
Kami telah meletakkan senarai #senarai pada halaman demo Sudah tentu, halaman ini juga perlu pramuat perpustakaan jquery dan pemalam kuki.


Di atas ialah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang untuk mempelajari pemalam kuki.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn