Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung der Document.Cookie_javascript-Techniken

WBOY
Freigeben: 2016-05-16 15:23:24
Original
2064 Leute haben es durchsucht

Konkret verwendet der Cookie-Mechanismus eine Lösung, die den Zustand auf der Clientseite beibehält, während der Sitzungsmechanismus eine Lösung verwendet, die den Zustand auf der Serverseite beibehält.

Gleichzeitig sehen wir auch, dass der Sitzungsmechanismus möglicherweise den Cookie-Mechanismus verwenden muss, um den Zweck der Speicherung zu erreichen, da die Lösung zur Aufrechterhaltung des Status auf der Serverseite auch eine Identität auf der Clientseite speichern muss Identität, aber tatsächlich hat es andere Möglichkeiten.

Cookie setzen

Jedes Cookie ist ein Name/Wert-Paar. Sie können document.cookie die folgende Zeichenfolge zuweisen:

document.cookie="userId=828";
Nach dem Login kopieren

Wenn Sie mehrere Name/Wert-Paare gleichzeitig speichern möchten, können Sie Semikolons und Leerzeichen (;) verwenden, um sie zu trennen, zum Beispiel:

document.cookie="userId=828; userName=hulk";
Nach dem Login kopieren

Semikolons (;), Kommas (,), Gleichheitszeichen (=) und Leerzeichen können nicht in Cookie-Namen oder -Werten verwendet werden. Dies lässt sich leicht im Namen des Cookies machen, der zu speichernde Wert ist jedoch undefiniert. Wie speichert man diese Werte? Die Methode besteht darin, zum Kodieren die Funktion escape() zu verwenden, die eine hexadezimale Darstellung einiger Sonderzeichen verwenden kann. Beispielsweise werden Leerzeichen als „20 %“ kodiert, die im Cookie-Wert gespeichert werden können, und diese Lösung kann verwendet werden Vermeiden Sie auch die Entstehung verstümmelter chinesischer Schriftzeichen. Zum Beispiel:

document.cookie="str="+escape("I love ajax");
Nach dem Login kopieren

Entspricht:

  document.cookie="str=I%20love%20ajax";

Nach dem Login kopieren

Wenn Sie die Escape()-Codierung verwenden, müssen Sie unescape() zum Decodieren verwenden, nachdem Sie den Wert herausgenommen haben, um den ursprünglichen Cookie-Wert zu erhalten, der zuvor eingeführt wurde.

Obwohl document.cookie wie eine Eigenschaft aussieht, können ihr unterschiedliche Werte zugewiesen werden. Es unterscheidet sich jedoch von allgemeinen Attributen, die beispielsweise den Verlust des ursprünglichen Werts bedeuten:

document.cookie="userId=828";
  document.cookie="userName=hulk";
Nach dem Login kopieren

Zu diesem Zeitpunkt verwaltet der Browser zwei Cookies, nämlich Benutzer-ID und Benutzername. Das Zuweisen eines Werts zu document.cookie ähnelt also eher dem Ausführen einer Anweisung wie dieser:

document.addCookie("userId=828");
  document.addCookie("userName=hulk");
Nach dem Login kopieren

Tatsächlich setzt der Browser Cookies auf diese Weise. Wenn Sie den Wert eines Cookies ändern möchten, müssen Sie ihn nur neu zuweisen, zum Beispiel:

 document.cookie="userId=929";
Nach dem Login kopieren

Dadurch wird der Cookie-Wert namens userId auf 929 gesetzt.

Holen Sie sich den Cookie-Wert

So ermitteln Sie den Wert des Cookies. Der Wert des Cookies kann direkt von document.cookie abgerufen werden:

var strCookie=document.cookie;
Nach dem Login kopieren

Dadurch wird eine Zeichenfolge erhalten, die aus mehreren durch Semikolons getrennten Name/Wert-Paaren besteht. Diese Name/Wert-Paare umfassen alle Cookies unter dem Domänennamen. Zum Beispiel:

  <script language="JavaScript" type="text/javascript">
  <!--
  document.cookie="userId=828";
  document.cookie="userName=hulk";
  var strCookie=document.cookie;
  alert(strCookie);
  //-->
  </script>
Nach dem Login kopieren

Abbildung 7.1 zeigt den Ausgabe-Cookie-Wert. Es ist ersichtlich, dass Sie nur alle Cookie-Werte auf einmal abrufen können, aber Sie können den Cookie-Namen nicht angeben, um den angegebenen Wert zu erhalten. Dies ist der problematischste Teil der Verarbeitung von Cookie-Werten. Benutzer müssen diese Zeichenfolge selbst analysieren, um den angegebenen Cookie-Wert zu erhalten. Um beispielsweise den Wert von userId zu erhalten, können Sie Folgendes tun:

 <script language="JavaScript" type="text/javascript">
  <!--
  //设置两个cookie
  document.cookie="userId=828";
  document.cookie="userName=hulk";
  //获取cookie字符串
  var strCookie=document.cookie;
  //将多cookie切割为多个名/值对
  var arrCookie=strCookie.split("; ");
  var userId;
  //遍历cookie数组,处理每个cookie对
  for(var i=0;i<arrCookie.length;i++){
  var arr=arrCookie[i].split("=");
  //找到名称为userId的cookie,并返回它的值
  if("userId"==arr[0]){
  userId=arr[1];
  break;
  }
  }
  alert(userId);
  //-->
  </script>
Nach dem Login kopieren

Auf diese Weise können Sie den Wert eines einzelnen Cookies ermitteln. Mit einer ähnlichen Methode können Sie den Wert eines oder mehrerer Cookies ermitteln. Die Haupttechnik besteht weiterhin aus den zugehörigen Operationen von Zeichenfolgen und Arrays.

Ablaufdatum für Cookie festlegen

Bisher handelt es sich bei allen Cookies um Single-Session-Cookies, das heißt, diese Cookies gehen nach dem Schließen des Browsers verloren. Tatsächlich werden diese Cookies nur im Speicher gespeichert, ohne dass entsprechende Festplattendateien erstellt werden.

In der tatsächlichen Entwicklung müssen Cookies häufig über einen längeren Zeitraum gespeichert werden, beispielsweise um den Anmeldestatus des Benutzers zu speichern. Dies kann mit den folgenden Optionen erreicht werden:

document.cookie="userId=828; expires=GMT_String";
Nach dem Login kopieren

Wobei GMT_String eine im GMT-Format ausgedrückte Zeitzeichenfolge ist. Diese Anweisung setzt das userId-Cookie auf die durch GMT_String dargestellte Ablaufzeit. Beispiel: Wenn Sie ein Cookie so einstellen möchten, dass es nach 10 Tagen abläuft, können Sie das so machen:

 <script language="JavaScript" type="text/javascript">
  <!--
  //获取当前时间
  var date=new Date();
  var expireDays=10;
  //将date设置为10天以后的时间
  date.setTime(date.getTime()+expireDays*24*3600*1000);
  //将userId和userName两个cookie设置为10天后过期
  document.cookie="userId=828; userName=hulk; expire="+date.toGMTString();
  //-->
  </script>
 
  删除cookie
 
  为了删除一个cookie,可以将其过期时间设定为一个过去的时间,例如:
 
  <script language="JavaScript" type="text/javascript">
  <!--
  //获取当前时间
  var date=new Date();
  //将date设置为过去的时间
  date.setTime(date.getTime()-10000);
  //将userId这个cookie删除
  document.cookie="userId=828; expire="+date.toGMTString();
  //-->
  </script>
Nach dem Login kopieren

ps: Jquery Cookie-Betriebsparameter:

Erstellen Sie ein Sitzungscookie:

 <script language="JavaScript" type="text/javascript">
<!--
//获取当前时间
var date=new Date();
var expireDays=10;
//将date设置为10天以后的时间
date.setTime(date.getTime()+expireDays*24*3600*1000);
//将userId和userName两个cookie设置为10天后过期
document.cookie="userId=828; userName=hulk; expire="+date.toGMTString();
//-->
</script>

删除cookie

为了删除一个cookie,可以将其过期时间设定为一个过去的时间,例如:

<script language="JavaScript" type="text/javascript">
<!--
//获取当前时间
var date=new Date();
//将date设置为过去的时间
date.setTime(date.getTime()-10000);
//将userId这个cookie删除
document.cookie="userId=828; expire="+date.toGMTString();
//-->
</script>
Nach dem Login kopieren

Hinweis: Wenn die Cookie-Zeit nicht angegeben ist, bleibt das erstellte Cookie standardmäßig gültig, bis der Browser des Benutzers geschlossen wird, daher wird es als Sitzungscookie bezeichnet.

Erstellen Sie ein dauerhaftes Cookie:

$.cookie(‘cookieName','cookieValue',{expires:7});
Nach dem Login kopieren

Hinweis: Wenn die Zeit angegeben ist, spricht man von einem dauerhaften Cookie und die Gültigkeitsdauer beträgt Tage.

Erstellen Sie ein dauerhaftes Cookie mit einem gültigen Pfad:

$.cookie(‘cookieName','cookieValue',{expires:7,path:'/'});
Nach dem Login kopieren

注:如果不设置有效路径,在默认情况下,只能在cookie设置当前页面读取该cookie,cookie的路径用于设置能够读取cookie的顶级目录。

创建一个持久并带有效路径和域名的cookie:

$.cookie(‘cookieName','cookieValue',{expires:7,path:'/',domain: ‘chuhoo.com',secure: false,raw:false});
Nach dem Login kopieren

注:domain: 创建cookie所在网页所拥有的域名;secure:默认是false,如果为true,cookie的传输协议需为https;raw:默认为 false,读取和写入时候自动进行编码和解码(使用encodeURIComponent编码,使用decodeURIComponent解码),关闭 这个功能,请设置为true。

获取cookie:

$.cookie(‘cookieName'); //如果存在则返回cookieValue,否则返回null。

删除cookie:

$.cookie(‘cookieName',null);
Nach dem Login kopieren

注:如果想删除一个带有效路径的cookie,如下:$.cookie(‘cookieName',null,{path:'/'});

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage