Explication détaillée des exemples d'utilisation de cookies dans jquery (acquisition, stockage, suppression, etc.)_jquery

Les exemples de cet article décrivent l'utilisation des cookies dans jquery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Cookie a une classe d'opération de cookie désignée dans jquery. Permettez-moi d'abord de présenter quelques problèmes lorsque nous utilisons des classes d'opération de cookie, puis de présenter la méthode d'utilisation correcte.

Lors de l'utilisation de JQuery pour exploiter des cookies, une valeur incorrecte apparaît :
Il s'avère que les cookies ont quatre attributs différents :
nom, contenu, domaine, chemin

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

Utilisation :

Copier le code Le code est le suivant :

$.cookie("currentMenuID", menuID);

Lorsque le domaine et le chemin ne sont pas spécifiés.

Tous les cookies différents seront générés lorsque le domaine et le chemin sont différents

Copier le code Le code est le suivant :

$.cookie("currentMenuID");

Des problèmes surviennent lors de la prise de valeurs.

Donc :

Copier le code Le code est le suivant :

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

couvrir. Le même cookieID dans le même domaine correspond à une valeur.

Regardons un exemple

Remarque sur le paramétrage du chemin des cookies Si vous ne définissez pas path:'/', le chemin sera automatiquement défini en fonction du répertoire [tel que : http://www.xxx.com/user/, le le chemin sera défini sur '/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; 
    } 
  } 
});

Le cookie d'opération Jquery enregistre les informations que l'utilisateur a demandées

Ceci est une liste générée par les données des cookies,

Chaque fois que vous cliquez pour interroger, un nom de domaine sera stocké, et le dernier nom de domaine interrogé sera placé en haut. Cet exemple peut stocker jusqu'à 10 éléments, vous pouvez les définir en fonction de votre propre situation

Voyons comment y parvenir

Écrivez d'abord un fichier JS pour faire fonctionner Cookie comme suit

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

Cela a également pour effet de saisir les valeurs​​de plusieurs zones de saisie en même temps, comme indiqué ci-dessous

Si vous souhaitez utiliser cet effet dans cette zone de saisie, ajoutez simplement un attribut comme url="true", ce qui est pratique et exploitable. Si vous souhaitez ajouter un effet à cette zone, ajoutez simplement cet attribut. je ne veux pas l'ajouter, mais ne l'ajoute pas url="true"
. C'est OK.

Ajoutez le code suivant à l'interface qui utilise cet effet

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

Placez l'autre JS directement dans un fichier Js et citez-le simplement dans
Comment la liste déroulante est-elle chargée ? Il suffit de regarder l'une des méthodes ci-dessous pour le savoir

Chargement de la liste

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

Après avoir terminé cela, nous n'avons besoin de stocker le cookie que lorsque nous cliquons sur la requête. Voir la méthode ci-dessous

Classe de cookies de fonctionnement

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

Écrivez ainsi lorsque vous appelez

Copier le code Le code est le suivant :

setCookie("site", strdomin);

Ok, la fonction est terminée.

Effectuer des tests spécifiques

Le code n'est pas très bien écrit. J'espère que vous pourrez me donner plus de suggestions afin que nous puissions apporter les modifications correspondantes pour l'améliorer.

Les cookies sont stockés côté client. Un cookie ne peut accéder qu'aux cookies sous le même nom de domaine. Les noms de sous-domaines peuvent accéder les uns aux autres. La méthode de stockage est la suivante.

Copier le code Le code est le suivant :

$.cookie("domain", value, { expires : 7, domaine : " 7c.com" });

Écrivez simplement $.cookie("domain"); pour obtenir l'heure. Tant qu'il s'agit d'un nom de sous-domaine, vous pouvez l'appeler ainsi, afin de pouvoir réaliser la fonction de partage de cookies sous ce nom de domaine.
L'utilisation efficace des cookies apportera de nombreux effets et fonctions inattendus à notre site Web, veuillez les partager avec nous

Pour plus d'informations sur le fonctionnement des cookies de jQuery, veuillez consulter le sujet spécial de ce site : "

Résumé des compétences en matière de fonctionnement des cookies de JQuery"

J'espère que cet article sera utile à tous ceux qui programment jQuery.