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 内の情報は、名前と値のペアで構成されているように見えます。データの各ペアの形式は次のとおりです:

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
3f1c4e4b6b16bbbd69b2ee476dc4f83a
function hello(){
	var str = 'Here is a (short) piece of text.';
	document.write(str = 'ff9d32c555bb1d9133a29eb4371c1213' + escape(str));
	}
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
64cb571ed5952d9b43da1f2d70a36e91hello owrld0b9f73f8e206867bd1f5dc5957dbcb38
a378d60a65ed2f7e1382e9de1336cde9
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

しかし、実際には、各 Cookie には他の関連情報も含まれており、それらについては以下で個別に紹介します。

cookieName と cookieValue

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

domain

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

path

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还经过编码以避免非法字符。

    在处理有效期时，使用的参数不是具体日期，而是cookie有效的天数。函数根据这个天数生成有效的日期字符串。

    其他属性都是可选的，如果设置了，就会附加到组成cookie的字符串里。

【推荐学习：javascript高级教程】

以上がJavaScriptでCookieを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。