Document.Cookie_javascript テクニックの詳細な説明-jsチュートリアル-php.cn

Document.Cookie_javascript テクニックの詳細な説明

WBOY

リリース： 2016-05-16 15:23:24

オリジナル

2093 人が閲覧しました

具体的には、Cookie メカニズムはクライアント側で状態を維持するソリューションを使用し、セッションメカニズムはサーバー側で状態を維持するソリューションを使用します。

同時に、サーバー側で状態を維持するソリューションではクライアント側でも ID を保存する必要があるため、セッションメカニズムは、ID を保存するという目的を達成するために Cookie メカニズムを使用する必要がある可能性があることもわかります。アイデンティティですが、実際には他のオプションもあります。

Cookie を設定

各 Cookie は名前と値のペアです。次の文字列を document.cookie に割り当てることができます。

document.cookie="userId=828";

ログイン後にコピー

複数の名前と値のペアを一度に保存する場合は、セミコロンとスペース (;) を使用してそれらを区切ることができます。次に例を示します。

document.cookie="userId=828; userName=hulk";

ログイン後にコピー

セミコロン (;)、カンマ (,)、等号 (=)、およびスペースは、Cookie の名前または値に使用できません。これを Cookie の名前で行うのは簡単ですが、保存される値は未定義です。これらの値を保存するにはどうすればよいでしょうか?この方法では、escape() 関数を使用してエンコードします。これにより、一部の特殊な記号を 16 進表現で使用できます。たとえば、スペースは「20%」としてエンコードされ、Cookie 値に保存できます。中国語の文字化けの発生も回避します。例:

document.cookie="str="+escape（"I love ajax"）；

ログイン後にコピー

以下と同等:

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

ログイン後にコピー

escape() エンコードを使用する場合、値を取り出した後に unescape() を使用してデコードする必要があり、以前に紹介した元の Cookie 値を取得します。

document.cookie はプロパティのように見えますが、異なる値を割り当てることができます。ただし、一般的な属性とは異なります。たとえば、次の 2 つのステートメントを連続して実行しても、元の値が失われるわけではありません。

document.cookie="userId=828";
  document.cookie="userName=hulk";

ログイン後にコピー

現時点では、ブラウザーは userId と userName という 2 つの Cookie を維持するため、document.cookie に値を割り当てることは、次のようなステートメントを実行することに似ています:

document.addCookie（"userId=828"）；
  document.addCookie（"userName=hulk"）；

ログイン後にコピー

実際、ブラウザは次のように Cookie を設定します。Cookie の値を変更したい場合は、次のように再割り当てするだけです。

これにより、userId という名前の Cookie 値が 929 に設定されます。

 document.cookie="userId=929";

ログイン後にコピー

Cookie 値を取得します

Cookie の値を取得する方法は次のとおりです。 Cookie の値は、document.cookie から直接取得できます:

これにより、セミコロンで区切られた複数の名前と値のペアで構成される文字列が取得されます。これらの名前と値のペアには、ドメイン名の下にあるすべての Cookie が含まれます。例:

var strCookie=document.cookie;

ログイン後にコピー

  <script language="JavaScript" type="text/javascript">
  <!--
  document.cookie="userId=828";
  document.cookie="userName=hulk";
  var strCookie=document.cookie;
  alert（strCookie）；
  //-->
  </script>

ログイン後にコピー

図 7.1 は、出力された Cookie の値を示しています。すべての Cookie 値を一度に取得することしかできないことがわかりますが、指定した値を取得するために Cookie 名を指定することはできません。これが Cookie 値の処理で最も面倒な部分です。ユーザーはこの文字列を自分で分析して、指定された Cookie 値を取得する必要があります。たとえば、userId の値を取得するには、次のようにします。

この方法では、1 つの Cookie の値を取得できます。同様の方法を使用して、1 つ以上の Cookie の値を取得できます。主な手法はやはり文字列と配列の関連操作です。

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

ログイン後にコピー

Cookie の有効期限を設定します

これまでのところ、すべての Cookie はシングルセッション Cookie です。つまり、これらの Cookie はブラウザを閉じると失われます。実際、これらの Cookie は対応するハードディスクファイルを作成せずにメモリに保存されるだけです。

実際の開発では、ユーザーのログイン状態の保存など、Cookieを長期間保存する必要があることがよくあります。これは、次のオプションを使用して実現できます:

ここで、GMT_String は GMT 形式で表される時刻文字列です。このステートメントは、userId Cookie を GMT_String で表される有効期限に設定します。この時間が経過すると、Cookie は消えてアクセスできなくなります。例: Cookie の有効期限が 10 日後に切れるように設定したい場合は、次のように設定できます:

document.cookie="userId=828; expires=GMT_String";

ログイン後にコピー

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

ログイン後にコピー

ps: Jquery Cookie 操作パラメータ:

セッション Cookie を作成します:

注: Cookie の時間が指定されていない場合、作成された Cookie はデフォルトでユーザーのブラウザが閉じるまで有効であるため、セッション Cookie と呼ばれます。

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

ログイン後にコピー

永続的な Cookie を作成します:

注: 時間が指定されている場合、それは永続 Cookie と呼ばれ、有効期間は日です。

$.cookie(‘cookieName','cookieValue'，｛expires：7｝);

ログイン後にコピー

有効なパスを使用して永続的な Cookie を作成します:

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

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

$.cookie(‘cookieName','cookieValue'，｛expires：7，path：'/'，domain: ‘chuhoo.com'，secure: false，raw:false｝);

ログイン後にコピー

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

获取cookie：

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

删除cookie：