Detaillierte Erläuterung von Beispielen für die Verwendung von Cookies in jquery (Erfassung, Speicherung, Löschung usw.)

Die Beispiele in diesem Artikel beschreiben die Verwendung von Cookies in jquery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Cookie verfügt über eine bestimmte Cookie-Operationsklasse in jquery. Lassen Sie mich zunächst einige Probleme bei der Verwendung von Cookie-Operationsklassen vorstellen und dann die richtige Verwendungsmethode vorstellen.

Bei der Verwendung von JQuery zum Betreiben von Cookies tritt ein falscher Wert auf:
Es stellt sich heraus, dass Cookies vier verschiedene Attribute haben:
Name, Inhalt, Domain, Pfad

$.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

Nach dem Login kopieren

Verwendung:

Code kopieren Der Code lautet wie folgt:

$.cookie("currentMenuID", menuID);

Wenn Domäne und Pfad nicht angegeben sind.

Alle unterschiedlichen Cookies werden generiert, wenn Domäne und Pfad unterschiedlich sind

Code kopieren Der Code lautet wie folgt:

$.cookie("currentMenuID");

Bei der Wertermittlung treten Probleme auf.

Also:

Code kopieren Der Code lautet wie folgt:

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

abdecken. Dieselbe Cookie-ID in derselben Domäne entspricht einem Wert.

Schauen wir uns ein Beispiel an

Hinweis zur Pfadeinstellung von Cookies: Wenn Sie den Pfad „/“ nicht festlegen, wird der Pfad automatisch entsprechend dem Verzeichnis festgelegt [z. B.: http://www.xxx.com/user/“. Der Pfad wird auf ' /user']

gesetzt

$.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 &#63; '; path=' + options.path : ''; 
      var domain = options.domain &#63; '; domain=' + options.domain : ''; 
      var secure = options.secure &#63; '; 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; 
    } 
  } 
});

Nach dem Login kopieren

JQuery-Operations-Cookie zeichnet die Informationen auf, die der Benutzer abgefragt hat

Dies ist eine durch Cookie-Daten generierte Liste,

Jedes Mal, wenn Sie zum Abfragen klicken, wird ein Domänenname gespeichert und der zuletzt abgefragte Domänenname wird oben platziert. In diesem Beispiel können bis zu 10 Elemente gespeichert werden, Sie können sie entsprechend Ihrer eigenen Situation einstellen

Lassen Sie uns einen Blick darauf werfen, wie wir das erreichen können

Schreiben Sie zunächst eine JS-Datei, um Cookie wie folgt zu betreiben

function getid(id) {
return (typeof id == 'string') &#63; 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 &#63; 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);
}
}

Nach dem Login kopieren

Dies hat auch den Effekt, dass die Werte mehrerer Eingabefelder gleichzeitig eingegeben werden, wie unten gezeigt

Wenn Sie diesen Effekt in diesem Eingabefeld verwenden möchten, fügen Sie einfach ein Attribut als url="true" hinzu. Wenn Sie diesem Feld einen Effekt hinzufügen möchten, fügen Sie einfach dieses Attribut hinzu Ich möchte es nicht hinzufügen, füge es einfach nicht hinzu url="true"
Das ist in Ordnung.

Fügen Sie den folgenden Code zur Schnittstelle hinzu, die diesen Effekt verwendet

<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>

Nach dem Login kopieren

Platzieren Sie das andere JS direkt in einer Js-Datei und zitieren Sie es einfach in
Wie wird die Dropdown-Liste geladen? Schauen Sie sich einfach eine der folgenden Methoden an, um es herauszufinden

Liste wird geladen

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;
}

Nach dem Login kopieren

Nach Abschluss dieses Vorgangs müssen wir das Cookie nur dann speichern, wenn wir auf die Abfrage klicken. Siehe die Methode unten

Betriebs-Cookie-Klasse

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);
}

Nach dem Login kopieren

Schreiben Sie so, wenn Sie anrufen

Code kopieren Der Code lautet wie folgt:

setCookie("site", strdomin);

Ok, die Funktion ist abgeschlossen.

Führen Sie spezifische Tests durch

Der Code ist nicht sehr gut geschrieben. Ich hoffe, Sie können mir weitere Vorschläge machen, damit wir entsprechende Änderungen vornehmen können, um ihn zu verbessern.

Cookies werden auf der Clientseite nur auf Cookies unter demselben Domänennamen gespeichert. Die Speichermethode ist wie folgt

Code kopieren Der Code lautet wie folgt:

$.cookie("domain", value, { läuft ab: 7, Domain: " 7c.com" });

Schreiben Sie einfach $.cookie("domain");, um die Zeit zu erhalten. Solange es sich um einen Subdomainnamen handelt, können Sie ihn so aufrufen, dass Sie die Cookie-Sharing-Funktion unter diesem Domainnamen erreichen können.
Die effektive Verwendung von Cookies wird viele unerwartete Effekte und Funktionen auf unserer Website mit sich bringen, teilen Sie uns dies bitte mit

Weitere Informationen zum Cookie-Betrieb von jQuery finden Sie im speziellen Thema dieser Website: „

Zusammenfassung der Cookie-Betriebsfähigkeiten von JQuery“

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.