JavaScript で Cookie の保存と削除を行う

スタイルシート(外部CSS)の切り替えを自作した時に、扱うことになったのでここでは、Cookie について記述しておきます。

Cookie について

Cookie というのは、(サイト,サービスの)提供者側から閲覧しているブラウザ側に保存させる設定情報のことです。

この保存された情報を判定することで、アクセス解析や配信広告のための情報として提供者側が利用する他に、ログイン時のID入力の省略や再訪問の際の前回の状態の再現など、閲覧者のためにも利用されます。

このように便利な機能ですが、閲覧者が自ら保存するものでないためプライバシーまたはセキュリティの観点から無効にしている方もいます。

Cookie の読み方

name=value : Cookie の名前(必須項目)
その保存される Cookie 自体の名前です。名前・値はともに任意の文字列で構いませんが、必ず設定しなければなりません。
expires 属性, max-age 属性: 有効期限
Cookie の有効期限はキャッシュのように expires または max-age で記述され、期限経過により削除されます。
省略した場合ブラウザの終了時に Cookie は削除されます。

max-age の方が期限の指定が簡単ですが、何故かIEでは非対応のようなので、少なくとも Cookie の削除には expires による指定をしないと、意図した通りに表示されません。また、逆の場合もありうるので削除時には max-age も併せて指定した方がいいです。

path 属性: パス名
その保存された Cookie を読込む範囲です。
path=/; ならそのドメイン内全域が、path=/folder/; なら folder というディレクトリ以下が範囲となります。(フルパスで記述)
domain 属性: ドメイン名
その Cookie を読込むドメイン名を記述します。ドメインが一致した場合、サブドメイン内でも読込みできます。
secure 属性
暗号化されているなどして通信が安全な場合のみ Cookie が送信されるとするものです。

例として下の記述では、 name という Cookie が value という値を持ち、そのサイトドメインに限り読み込まれるものです。(path が / を指定し、domain が略されているので。)
ただし、有効期限を 0 に指定かつ過去の1900年を指定しているので、この記述は Cookie の削除を意味しています。

  • name=value; max-age=0; expires=Thu, 1-Jan-1900 00:00:00 GMT; path=/

JavaScript での Cookie の扱い方

Cookie の保存と削除

JavaScript で Cookie を保存する場合、document.cookie に保存したい Cookie の内容をそのまま入れます。

  • document.cookie='ここに保存したい Cookie の内容を記述';

Cookie を削除したい場合も同様に、削除したい Cookie 名を対象にして document.cookie に max-age=0; と expires に過去の期日を入れることで削除が可能になります。

なお、日本語などを Cookie に入れる場合は escape でエンコードしてからでないと文字化けします。(試してみたら本当に文字化けしました。)

なので、逆に呼び出すときは unescape でデコードしてください。

スポンサードリンク

inserted by FC2 system