JavaScript操作のCookieメソッド

Cookieとは

「Cookieとは、訪問者のコンピュータに保存される変数です。このCookieは、同じコンピュータがブラウザを通じてページをリクエストするたびに送信されます。JavaScriptを使用してCookie値を作成および取得できます。」 – w3school

Cookie は、プロフィール情報などの閲覧情報を保存するために、訪問した Web サイトによって作成されるファイルです。

JavaScript の観点から見ると、Cookie は単なる文字列情報です。この情報はクライアントのコンピュータに保存され、クライアント コンピュータとサーバーの間で情報を転送するために使用されます。

この情報は、JavaScript の document.cookie を通じて読み取りまたは設定できます。 Cookie は主にクライアントとサーバー間の通信に使用されるため、JavaScript に加えてサーバー側言語 (PHP など) も Cookie にアクセスできます。

Cookie の基本

Cookie にはサイズ制限があります。各 Cookie に保存されるデータは 4kb を超えることはできません。Cookie 文字列の長さが 4kb を超える場合、この属性は空の文字列を返します。

Cookie は最終的にファイルの形式でクライアント コンピューターに保存されるため、Cookie を表示したり変更したりするのに非常に便利です。これが、Cookie には重要な情報を保存できないと言われる理由です。

各 Cookie の形式は次のとおりです: =; 名前と値の両方が有効な識別子である必要があります。

Cookieには有効期限があります。デフォルトでは、Cookie のライフサイクルはブラウザを閉じると終了します。ブラウザを閉じた後も Cookie を使用できるようにするには、Cookie の有効期間、つまり Cookie の有効期限を設定する必要があります。

alert(typeof document.cookie) 結果は文字列です、私も配列だと思って冗談を言ったこともあります...囧

cookieにはドメインとパスの概念があります。ドメインはドメインの概念です。ブラウザはセキュリティを重視した環境であるため、異なるドメインが相互に Cookie にアクセスすることはできません (もちろん、特別な設定を使用すれば、Cookie へのクロスドメイン アクセスを実現できます)。パスはルーティングの概念です。Web ページによって作成された Cookie は、この Web ページと同じディレクトリまたはサブディレクトリにあるすべての Web ページからのみアクセスできますが、他のディレクトリにある Web ページからはアクセスできません (この文は少しわかりにくいので、後で見ていきます)。後で説明します）例を使うと理解しやすいです）。

実際、Cookie を作成する方法は、変数を定義する方法に似ています。どちらも、Cookie 名と Cookie 値を使用する必要があります。同じ Web サイトで複数の Cookie を作成でき、複数の Cookie を同じ Cookie ファイルに保存できます。

Cookie FAQ

Cookieには2種類あります:

現在閲覧しているWebサイトによって設定されるCookie

他のドメインのWebページなどに広告や画像を埋め込むサードパーティソースからのCookie(Webサイトはこれらの Cookie を使用して追跡されます。あなたの使用状況情報)

先ほど基礎知識として Cookie のライフサイクルの問題について触れました。現在の使用中にウェブサイトにはお客様の個人情報の一部が保存され、ブラウザを閉じるとこの情報もコンピューターから削除されます

有効期限のある Cookie を設定します。ブラウザを閉じても、この情報はコンピュータ上に残ります。ログイン名とパスワードなど。特定のサイトにアクセスするたびにログインする必要はありません。この種の Cookie は、数日、数か月、場合によっては数年間もコンピューター上に残る可能性があります。

Cookie をクリアするには、次の 2 つの方法があります:

ブラウザ ツールを使用して Cookie をクリアする (サードパーティ ツールもあり、ブラウザ自体にもこの機能があります。) )

Cookieの有効期限を設定してCookieをクリアします

注: Cookieを削除すると、一部のWebページが正しく機能しなくなる場合があります

ブラウザはCookieへのアクセスを許可または拒否するように設定できます。

機能とパフォーマンスの理由から、使用する Cookie の数を減らし、小さな Cookie を使用することをお勧めします。

Cookie エンコードの詳細については、高度な Cookie の章で別途紹介します。

ローカル ディスク上のページの場合、Chrome コンソールは JavaScript を使用して Cookie を読み書きすることができません。解決策はブラウザを変更します^_^。

Cookie の基本的な使用法

1. 簡単なアクセス操作

JavaScript を使用して Cookie にアクセスする場合は、Document オブジェクトの cookie 属性を使用する必要があります。次のコード行で Cookie を作成および変更する方法を説明します。 document.cookie = 'ユーザー名=ダレン';

上記のコードでは、「username」は Cookie 名を表し、「Darren」はこの名前に対応する値を表します。 Cookie 名が存在しない場合は新しい Cookie が作成され、存在する場合は Cookie 名に対応する値が変更されます。 Cookie を複数回作成したい場合は、この方法を繰り返し使用してください。

2. Cookie の読み取り操作

Cookie を正確に読み取るのは非常に簡単で、文字列を操作するだけです。分析のために w3school からこのコードをコピーします:

function getCookie(c_name){
　　　　if (document.cookie.length>0){　　//先查询cookie是否为空，为空就return ""
　　　　　　c_start=document.cookie.indexOf(c_name + "=")　　//通过String对象的indexOf()来检查这个cookie是否存在，不存在就为 -1　　
　　　　　　if (c_start!=-1){
　　　　　　　　c_start=c_start + c_name.length+1　　//最后这个+1其实就是表示"="号啦，这样就获取到了cookie值的开始位置
　　　　　　　　c_end=document.cookie.indexOf(";",c_start)　　
　　　　　　　　//其实我刚看见indexOf()第二个参数的时候猛然有点晕，后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。
　　　　　　　　//因为需要考虑是否是最后一项，所以通过";"号是否存在来判断
　　　　　　　　if (c_end==-1) c_end=document.cookie.length　　
　　　　　　　　return unescape(document.cookie.substring(c_start,c_end))　　
　　　　　　　　//通过substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基础，想了解的可以搜索下，在文章结尾处也会进行讲解cookie编码细节
　　　　　　}
　　　　}
　　　　return ""
　　}

もちろん、配列、正規表現など、Cookie を読み取る方法はたくさんあるので、ここでは詳しく説明しません。

3. Cookieの有効期間を設定する

記事でよく登場するCookieのライフサイクルは、Cookieの有効期間と有効期限、つまりCookieの存在時間です。デフォルトでは、Cookie はブラウザを閉じると自動的にクリアされますが、有効期限までに Cookie の有効期間を設定できます。構文は次のとおりです:

document.cookie = "name=value;expires=date";

上記のコードの日付値は、GMT (グリニッジ標準時) 形式の日付文字列であり、世代メソッドは次のとおりです:

var _date = new Date();

_date.setDate(_date.getDate()+30);

_date.toGMTString();

上記の 3 行のコード

new を通じて Date インスタンスを生成して現在の時刻を取得します;

getDate() メソッドは現在のローカル月の特定の日を取得し、30 を追加します。この Cookie が保存できることを願っています。 30 日間ローカルで実行します。

次に、setDate() メソッドを使用して時刻を設定します。

最後に、toGMTString() メソッドを使用して Date オブジェクトを文字列に変換し、結果を返します。

次の完全な関数は、何を行うかを示します。 Cookie の作成プロセスに注意を払う必要があります – w3school からコピー。 Cookie に情報を保存する関数を作成します:

function setCookie(c_name, value, expiredays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
//使用方法：setCookie('username','Darren',30)

これで、私たちの関数は日数に応じて Cookie の有効期間を設定します。他の単位 (時間など) で設定したい場合は、3 行目を変更します。コード:

exdate.setHours(exdate.getHours() +expiredays);

この方法で設定された Cookie の有効期間は時間に基づきます。

FAQ に記載されている Cookie をクリアする方法は 2 つあります。これから説明するのは、有効期限を期限切れに設定して Cookie を無効にする方法です。有効期限を設定する方法があるので、興味のある友達は自分で設定してください^_^。 Cookie についてさらに詳しく説明しましょう。

Cookie 上級編

1. Cookie のパスの概念

基礎知識では、Cookie にはドメインとパスの概念があると述べました。次に、Cookie におけるパスの役割を紹介します。

Cookieは通常、ユーザーがページにアクセスしたときに作成されますが、このCookieはCookieが作成されたページからのみアクセスできるわけではありません。

デフォルトでは、Cookie を作成したページと同じディレクトリまたはサブディレクトリにある Web ページのみにアクセスできます。これはセキュリティ上の考慮事項によるもので、すべてのページが他のページによって作成された Cookie に自由にアクセスできるわけではありません。例:

ページ「http://www.jb51.net/Darren_code/」に Cookie を作成すると、パス「/Darren_code/」の下のページは次のようになります。 net/Darren_code/archive/2011/11/07/Cookie.html" このページはデフォルトで Cookie 情報を取得できます。

デフォルトでは、「http://www.jb51.net」または「http://www.jb51.net/xxxx/」はこの Cookie にアクセスできません (見るだけでは役に立たないので、実際に試してみてください^ _^) 。

したがって、この Cookie を他のディレクトリまたは親ディレクトリからアクセスできるようにするには、Cookie のパスを設定することで実現できます。例は次のとおりです。

document.cookie = "name=value;path=path"

document.cookie = "name=value;expires=date;path=path"

パス赤いフォントは Cookie です。最も一般的な例は、Cookie を次のディレクトリに配置して、どのサブページが Cookie を作成しても、すべてのページがそれにアクセスできるようにすることです:

document.cookie = "name=Darren ;path=/" ;

2. Cookie ドメインの概念

path は、同じドメイン内の Cookie にアクセスする問題を解決できます。続いて、同じドメイン間のアクセスを実現する Cookie の問題について話しましょう。構文は次のとおりです:

document.cookie = "name=value;path=path;domain=domain";

赤いドメインは、Cookie ドメイン セットの値です。

例如 ”www.qq.com” 与 “sports.qq.com” 公用一个关联的域名”qq.com”，我们如果想让 “sports.qq.com” 下的cookie被 ”www.qq.com” 访问，我们就需要用到 cookie 的domain属性，并且需要把path属性设置为 “/”。例：

document.cookie = "username=Darren;path=/;domain=qq.com";

注：一定的是同域之间的访问，不能把domain的值设置成非主域的域名。

三.cookie 安全性

通常 cookie 信息都是使用HTTP连接传递数据，这种传递方式很容易被查看，所以 cookie 存储的信息容易被窃取。假如 cookie 中所传递的内容比较重要，那么就要求使用加密的数据传输。

所以 cookie 的这个属性的名称是“secure”，默认的值为空。如果一个 cookie 的属性为secure，那么它与服务器之间就通过HTTPS或者其它安全协议传递数据。语法如下：

document.cookie = "username=Darren;secure"

把cookie设置为secure，只保证 cookie 与服务器之间的数据传输过程加密，而保存在本地的 cookie文件并不加密。如果想让本地cookie也加密，得自己加密数据。

注：就算设置了secure 属性也并不代表他人不能看到你机器本地保存的 cookie 信息，所以说到底，别把重要信息放cookie就对了，囧…

四.cookie 编码细节

原本来想在常见问题那段介绍cookie编码的知识，因为如果对这个不了解的话编码问题确实是一个坑，所以还是详细说说。

在输入cookie信息时不能包含空格，分号，逗号等特殊符号，而在一般情况下，cookie 信息的存储都是采用未编码的方式。所以，在设置 cookie 信息以前要先使用escape()函数将 cookie 值信息进行编码，在获取到 cookie 值得时候再使用unescape()函数把值进行转换回来。如设置cookie时：

document.cookie = name + "="+ escape (value);

再看看基础用法时提到过的getCookie()内的一句：

return unescape(document.cookie.substring(c_start,c_end));

这样就不用担心因为在cookie值中出现了特殊符号而导致 cookie 信息出错了。

个人代码

/*设置Cookie*/
function setCookie(c_name, value, expiredays, path, domain, secure) {　
 var exdate = new Date(); //获取当前时间　
 exdate.setDate(exdate.getDate() + expiredays);　 //过期时间　　
 document.cookie = c_name + "=" + //cookie名称
 escape(value) + //将cookie值进行编码
 ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()) + //设置过期时间
 ((path == null) ? '/' : ';path=' + path) + //设置访问路径
 ((domain == null) ? '' : ';domain=' + domain) + //设置访问域
 ((secure == null) ? '' : ';secure=' + secure);　 //设置是否加密
};
setCookie('test', 'name=sheng;sex=men;lancer=dullbear', 30);
setCookie('bb', 'name=sheng;sex=men', 30);
/*获取Cookie*/
function getCookie(c_name, index) {
 var cookies = document.cookie; //获取cookie值
 var cookieLen = cookies.length; //获取cookie长度
 if (cookieLen > 0) { //cookie不为空时
  var c_start = cookies.indexOf(c_name + '='); //查找需要cookie值在cookie中序号
  if (c_start > -1) { //cookie值存在时
   c_start += c_name.length + 1; //获取cookie值开始序列号
   var c_end = cookies.indexOf(';', c_start); //获取cookie值结束序列号
   if (c_end == -1) { //当cookie是最后一个时
    c_end = cookieLen; //设置cookie值结束序列号为cookie长度
   };
   var cookieStr = unescape(cookies.substring(c_start, c_end)); //获取解码cookie值
   var cookieObj = cookieStr.split(';'); //分割cookie值
   index = ((index == null) ? 0 : index); //判断index是否传值
   var goalObj = cookieObj[index]; //索引数组
   var goalStr = goalObj.split('=');
   var getcook = goalStr[1]; //获取需要取的cookie值
   return getcook;
  };
 } else {
  console.log('页面没有cookie');
 }
};
alert(getCookie('test', 0)); //打印查询cookie值