Penjelasan terperinci tentang contoh penggunaan kuki dalam jquery (pemerolehan, penyimpanan, pemadaman, dll.)_jquery

Contoh dalam artikel ini menerangkan penggunaan kuki dalam jquery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Kuki mempunyai kelas operasi kuki yang ditetapkan dalam jquery. Biar saya mula-mula memperkenalkan beberapa masalah apabila kami menggunakan kelas operasi kuki, dan kemudian memperkenalkan kaedah penggunaan yang betul.

Apabila menggunakan JQuery untuk mengendalikan kuki, nilai yang salah berlaku:
Ternyata kuki mempunyai empat atribut berbeza:
nama, kandungan, domain, laluan

$.cookie('the_cookie'); // 读取 cookie 
$.cookie('the_cookie', 'the_value'); // 存储 cookie 
$.cookie('the_cookie', 'the_value', { expires: 7 }); // 存储一个带7天期限的 cookie 
$.cookie('the_cookie', '', { expires: -1 }); // 删除 cookie

Gunakan:

Salin kod Kod adalah seperti berikut:

$.cookie("currentMenuID", menuID);

Apabila domain dan laluan tidak ditentukan.

Semua kuki yang berbeza akan dijana apabila domain dan laluan berbeza

Salin kod Kod adalah seperti berikut:

$.cookie("currentMenuID");

Masalah timbul apabila mengambil nilai.

Jadi:

Salin kod Kod adalah seperti berikut:

$.cookie("currentMenuID", "menuID", { path: "/" });

untuk menutup. ID kuki yang sama dalam domain yang sama sepadan dengan nilai.

Mari kita lihat contoh

Perhatikan tentang tetapan laluan kuki Jika anda tidak menetapkan laluan:'/', laluan akan ditetapkan secara automatik mengikut direktori [seperti: http://www.xxx.com/user/, yang. laluan akan ditetapkan kepada ' /user']

$.extend({ 
/** 
 1. 设置cookie的值，把name变量的值设为value  
example $.cookie('name', ‘value'); 
 2.新建一个cookie 包括有效期 路径 域名等 
example $.cookie('name', ‘value', {expires: 7, path: ‘/', domain: ‘jquery.com', secure: true}); 
3.新建cookie 
example $.cookie('name', ‘value'); 
4.删除一个cookie 
example $.cookie('name', null); 
5.取一个cookie(name)值给myvar 
var account= $.cookie('name'); 
**/
  cookieHelper: function(name, value, options) { 
    if (typeof value != 'undefined') { // name and value given, set cookie 
      options = options || {}; 
      if (value === null) { 
        value = ''; 
        options.expires = -1; 
      } 
      var expires = ''; 
      if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { 
        var date; 
        if (typeof options.expires == 'number') { 
          date = new Date(); 
          date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); 
        } else { 
          date = options.expires; 
        } 
        expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE 
      } 
      var path = options.path ? '; path=' + options.path : ''; 
      var domain = options.domain ? '; domain=' + options.domain : ''; 
      var secure = options.secure ? '; secure' : ''; 
      document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); 
    } else { // only name given, get cookie 
      var cookieValue = null; 
      if (document.cookie && document.cookie != '') { 
        var cookies = document.cookie.split(';'); 
        for (var i = 0; i < cookies.length; i++) { 
          var cookie = jQuery.trim(cookies[i]); 
          // Does this cookie string begin with the name we want&#63; 
          if (cookie.substring(0, name.length + 1) == (name + '=')) { 
            cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
            break; 
          } 
        } 
      } 
      return cookieValue; 
    } 
  } 
});

Kuki operasi Jquery merekodkan maklumat yang telah ditanya oleh pengguna

Ini ialah senarai yang dijana oleh data Kuki,

Setiap kali anda mengklik untuk membuat pertanyaan, nama domain akan disimpan dan nama domain terakhir yang ditanya akan diletakkan di bahagian atas. Contoh ini boleh menyimpan sehingga 10 item, anda boleh menetapkannya mengikut situasi anda sendiri

Mari kita lihat cara untuk mencapainya

Mula-mula tulis fail JS untuk mengendalikan Kuki seperti berikut

function getid(id) {
return (typeof id == 'string') ? document.getElementById(id) : id
};
function getOffsetTop(el, p) {
var _t = el.offsetTop;
while (el = el.offsetParent) {
if (el == p) break;
_t += el.offsetTop
}
return _t
};
function getOffsetLeft(el, p) {
var _l = el.offsetLeft;
while (el = el.offsetParent) {
if (el == p) break;
_l += el.offsetLeft
}
return _l
};
var currentInput = null;
function BoxShow(e) {
var input = e;
if (!input.id) {
input = e.target ? e.target : e.srcElement;
}
currentInput = input;
FillUrls("site");
var box = getid("allSitesBoxHdl");
if (box.style.display == 'block' && currentInput.id == input.id) {
return;
}
box.style.left = (getOffsetLeft(input)) + 'px';
box.style.top = (getOffsetTop(input) + (input.offsetHeight - 1)) + 'px';
box.style.width = (input.offsetWidth - 4) + 'px';
box.style.display = 'block';
}
function BoxShowUrls(e) {
BoxShow(e);
}
function InputSetValue(val) {
var obj = currentInput;
obj.value = val;
if (obj.getAttribute('url') == 'true') {
var tags = document.getElementsByTagName('input');
for (var i = 0; i < tags.length; i++) {
if (tags[i].getAttribute('url') == 'true' && tags[i] != obj) {
tags[i].value = val;
}
}
}
BoxHide();
}
//删除时使用，传入一个要删除的值就可以删除
function DelAllSitesValue(value) {
var allSites = $.cookie("site");
allSites = allSites.replace(value + "|", "");
$.cookie("site", allSites, { expires: 7 });
FillUrls("site");
}
function BoxHide() {
if (getid("allSitesBoxHdl")) {
getid("allSitesBoxHdl").style.display = 'none';
}
}
//加载列表
function FillUrls(cookieName) {
var urls = $.cookie(cookieName);
var html = "";
if (urls) {
var urllist = urls.split('|');
var forlength = 0;
var stringcookie;
for (var i = urllist.length - 1; i >= 0; i--) {
var textval = urllist[i];
if ($.trim(textval) != "" && $.trim(textval) != "undefined") {
html += "<li class="lis"><a href="javascript:InputSetValue('" + textval + "');">" + textval + "</a></li><br/>";
forlength = forlength + 1;
if (forlength > 10) {
$.cookie("site", stringcookie, { expires: 7 });
break;
} else {
stringcookie = textval + "|" + stringcookie;
}
}
}
} else {
html += "<li>没有记录</li>"
}
getid("allSitesBoxContent").innerHTML = html;
}
function closeIME(e) {
var obj = e.target &#63; e.target : e.srcElement;
obj.style.imeMode = 'disabled';
}
function OnPaste(e) {
var obj = e.target &#63; e.target : e.srcElement;
setTimeout("MoveHttp('" + obj.id + "')", 100);
}
function MoveHttp(id) {
var val = getid(id).value;
val = val.replace("http://", "");
if (val[val.length - 1] == '/') {
val = val.substring(0, val.length - 1);
}
getid(id).value = val;
}
function OnKeyup(e) {
var obj = e.target &#63; e.target : e.srcElement;
setTimeout("addInput('" + obj.id + "')", 200);
}
function addInput(id) {
var obj = getid(id);
//如果是一个没有True的input不执行
if (obj.getAttribute('url') == 'true') {
if (obj.value.indexOf('。') > 0) {
obj.value = obj.value.replace('。', '.');
}
var tags = document.getElementsByTagName('input');
for (var i = 0; i < tags.length; i++) {
if (tags[i].getAttribute('url') == 'true' && tags[i] != obj) {
tags[i].value = obj.value;
}
}
}
}
function Init() {
$("#allSitesBoxHdl")[0].style.display = 'none';
$(":text").each(function () {
$(this).bind("keyup", OnKeyup);
$(this).bind("mousedown", BoxShowUrls);
$(this).bind("mouseout", BoxHide);
$(this).bind("focus", closeIME);
$(this).bind("paste", OnPaste);
$(this).bind("mouseout", BoxHide);
$(this)[0].setAttribute('autocomplete', 'off');
});
//取出Cookie
var icpSite = $.cookie("site");
if (icpSite) {
//取出Cookie不为空的话就给当前框
icpSite = icpSite.split('|')[0];
$("#site").val(icpSite);
}
}

Ini juga disertakan dengan kesan memasukkan nilai ​​​​berbilang kotak input pada masa yang sama, seperti yang ditunjukkan di bawah

Jika anda ingin menggunakan kesan ini dalam kotak input itu, tambahkan atribut sebagai url="true", yang mudah dan boleh dikendalikan. Jika anda ingin menambah kesan pada kotak itu, tambahkan sahaja atribut ini tidak mahu menambahnya, cuma jangan menambahnya url="true"
Itu OK.

Tambahkan kod berikut pada antara muka yang menggunakan kesan ini

<div style="display: none; position: absolute;" id="allSitesBoxHdl" class="classlist"
  onmouseover="this.style.display='block'" onmouseout="this.style.display='none'">
  <ul id="allSitesBoxContent">
  </ul>
</div>
<script type="text/javascript">
Init();
</script>

Letakkan JS yang lain terus dalam fail Js dan hanya sebutkan dalam
Bagaimanakah senarai juntai bawah dimuatkan? Lihat sahaja salah satu kaedah di bawah untuk mengetahui

Memuatkan senarai

function FillUrls(cookieName) {
var urls = $.cookie(cookieName);
var html = "";
if (urls) {
var urllist = urls.split('|');
var forlength = 0;
var stringcookie;
for (var i = urllist.length - 1; i >= 0; i--) {
var textval = urllist[i];
if ($.trim(textval) != "" && $.trim(textval) != "undefined") {
html += "<li class="lis"><a href="javascript:InputSetValue('" + textval + "');">" + textval + "</a></li><br/>";
forlength = forlength + 1;
if (forlength > 10) {//在这里我只加载10条，大家可以根据自己的情况进行调整
$.cookie("site", stringcookie, { expires: 7 });
break;
} else {//如果超出10个的话就取最后10个
stringcookie = textval + "|" + stringcookie;
}
}
}
} else {
html += "<li>没有记录</li>"
}
getid("allSitesBoxContent").innerHTML = html;
}

Selepas melengkapkan ini, kami hanya perlu menyimpan kuki apabila kami mengklik pertanyaan Lihat kaedah di bawah

Kelas Kuki Pengendalian

function setCookie(name, value) {
var oldcookie = $.cookie(name);
if (oldcookie == null) {
$.cookie(name, value, { expires: 7 });
} else {
if ($.cookie(name).indexOf(value) == -1) {
$.cookie(name, oldcookie + "|" + value, { expires: 7 });
} else {
$.cookie(name, oldcookie.replace(value, "") + "|" + value, { expires: 7 });
}
}
FillUrls(name);
}

Tulis seperti ini apabila memanggil

Salin kod Kod adalah seperti berikut:

setCookie("site", strdomin);

Ok fungsi selesai.

Menjalankan ujian khusus

Kod ini tidak ditulis dengan baik. Saya harap anda boleh memberi saya lebih banyak cadangan supaya kami boleh membuat pengubahsuaian yang sepadan untuk memperbaikinya.

Kuki disimpan di bahagian klien hanya boleh mengakses kuki di bawah nama domain yang sama boleh mengakses satu sama lain

Salin kod Kod adalah seperti berikut:

$.cookie("domain", nilai, { tamat tempoh: 7, domain: " 7c.com" });

Hanya tulis $.cookie("domain"); untuk mendapatkan masa selagi ia adalah nama subdomain, anda boleh memanggilnya seperti ini, supaya anda boleh mencapai fungsi perkongsian kuki di bawah nama domain ini.
Penggunaan kuki yang berkesan akan membawa banyak kesan dan fungsi yang tidak dijangka ke laman web kami, sila kongsi dengan kami

Untuk mendapatkan maklumat lanjut tentang pengendalian kuki jQuery, sila lihat topik khas tapak ini: "

Ringkasan kemahiran pengendalian kuki JQuery"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.