JavaScriptでCookieを設定する方法

JavaScript では、ドキュメント オブジェクトの cookie 属性を使用して cookie を設定、読み取り、または削除できます。構文は「document.cookie="cookieName=Value;expires=有効期限";」です。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

1. Cookie とは何ですか?

Web ページをブラウザに読み込むために使用される HTTP は、「ステートレス」プロトコルです。つまり、サーバーがページをブラウザーに送信すると、その内容は完了したものとみなされ、情報は保存されません。このため、ユーザーがどのコンテンツにアクセスまたはダウンロードしたかを記録したり、ユーザーのログイン ステータスをプライベート エリアに記録したりするなど、ブラウザ セッション中にある種の継続性を維持することが困難になります。

Cookie はこの問題を解決する方法です。たとえば、Cookie はユーザーの最後の訪問を記録したり、ユーザーの好みのリストを保存したり、ユーザーがショッピングを続けるときにショッピング カート内の商品を保存したりできます。 Cookie を正しく使用すると、サイトのユーザー エクスペリエンスが向上します。

Cookie 自体は、ページによってユーザーのコンピュータに保存され、他のページで読み取ることができる短い情報の文字列です。 Cookie は通常、一定期間後に期限切れになるように設定されています。

Cookie の制限

ブラウザには保存できる Cookie の数に制限があり、通常は数百以上です。通常、ドメインごとに 20 個の Cookie が許可され、各ドメインは最大 4KB の Cookie を保存できます。

サイズ制限によって引き起こされる可能性のある問題に加えて、有効期限に達した場合やユーザーが Cookie を消去した場合など、ハードディスク上の Cookie が消失する原因となる可能性のあるさまざまな理由が考えられます。情報を確認するか、別のブラウザに切り替えてください。したがって、重要なデータを保存するために Cookie を使用してはなりません。また、コードを記述するときは、予期した Cookie が取得できない場合の状況を考慮する必要があります。

2, document.cookie プロパティ

JavaScript は、ドキュメント オブジェクトの cookie プロパティを使用して、cookie を作成、読み取り、削除します。

各 Cookie は基本的に、次のような名前と値のペアで構成される文字列です。

username=sam

ページがブラウザに読み込まれると、ブラウザはすべての情報を収集します。ページに関連する Cookie を取得し、文字列と同様に document.cookie 属性に配置します。この属性では、各 cookie はセミコロンで区切られています。

username=sam;location=China;

#document.cookie は実際の文字列ではなく、単に抽出されているため、cookie 情報が使用されるときに「文字列のような」属性と呼ばれます。この属性は文字列のように動作します。

データのエンコードとデコード

ポイント、記号、カンマ、空白などの特定の文字は Cookie では使用できません。文字 (スペースやタブなど)。データを Cookie に保存する前に、データを正しく保存できるようにエンコードする必要があります。

情報を保存する前に、JavaScript のエスケープ()関数を使用してエンコードし、元の Cookie データを取得するときに、対応する unescape() 関数を使用してデコードします。

excape() 関数は、文字列内の非 ASCII 文字を対応する 2 桁または 4 桁の 16 進形式に変換します。たとえば、スペースは に、& は & に変換されます。

たとえば、次のコードは、変数 str に保存された元の文字列と、escape() エンコード後の結果を出力します。スペースは左括弧が(、右括弧が)で表されます。

3、Cookie の構成

document.cookie 内の情報は、名前と値のペアで構成されているように見えます。データの各ペアの形式は次のとおりです:

hello owrld

cookieName と cookieValue は、Cookie 文字列に含まれる name=value の名前と値です。

ドメイン属性は、Cookie がどのドメインに属しているかをブラウザに示します。この属性はオプションであり、指定しない場合、デフォルト値は Cookie が設定されているページのドメインです。
この属性の機能は、サブドメインによる Cookie の操作を制御することです。距離の観点から言えば、www.example.com に設定されている場合、サブドメイン code.example.com のページはこの Cookie を読み取ることができません。ただし、ドメイン属性が example.com に設定されている場合、code.example.com のページはこの Cookie にアクセスできます。

path 属性は、Cookie を使用できるディレクトリを指定します。ディレクトリドキュメント内のページのみに Cookie 値を設定させたい場合は、パスを /documents に設定します。この属性はオプションであり、一般的に使用されるデフォルトのパスは / で、Cookie がドメイン全体で使用できることを示します。

secure

secure属性是可选的，而且几乎很少使用。它表示浏览器在把整个cookie发送给服务器时，是否应该使用SLL安全标准。

expires

每个cookie都有一个失效日期，过期就自动删除了。expires属性要以UTC时间表示。如果没有设置这个属性，cookie的生命期就和当前浏览器会话一样长，会在浏览器关闭时自动删除。

4，编写cookie

要编写新的cookie，只要把包含所需属性的值赋予document.cookie就可以了:

document.cookie = "username=sam;expires=15/05/2018 00:00:00"

使用javascript的Date对象可以避免手工输入日期和时间格式；

var cookieDate = new Date(2018,05,15);
document.cookie = "username=sam;expires="+cookieDate.toUTCString();

这样就能达到和前面一样的结果。

#注意这里使用了cookieDate.toUTCString()函数，而不是cookieDate.toString();这是因为cookie的时间要以UTC格式设置。

在实际编码时，应该用excape()函数来确保在给cookie赋值时不会有非法字符:

var cookieDate = new Date(2018,05,15);
var user = "Sam Jones";
document.cookie = "username="+excape(user)+";expires="+cookieDate.toUTCString();

5，编写cookie的函数

很自然就会想到编写一个函数专门用于生成cookie，完成编码和可选属性的组合操作。下面的程序清单就列出了一个这样的程序代码:

function createCookie(name,value,days,path,domain,secure){
	if(days){
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = date.toGMTString();
		}
		else var expires = "";
		cookieString = name + "=" +excape(value);
		if(expires) cookieString += ";expires=" +expires;
		if(path) cookieString += ";path=" + escape(path);
		if(domain) cookieString += ";domain=" + escape(domain);
		if(secure) cookieString += ";secure=" + escape(secure);
		document.cookie = sookieString;
		}

    这个函数的执行的操作是相当直观的，name和value参数组合得到"name = value",其中的value还经过编码以避免非法字符。