JavaScriptでcookie処理(読み・書き・削除)


今更感ありますが、最近クッキーを扱うことが多かったのでメモ

クッキーの基本

クッキーとはString型の文字列。
HTMLDocumentのプロパティとして実装されているのでdocument.cookieでアクセスすることができる。

書き込み

クッキーは名前=値の形で書き込みます。下記の場合はdata1という名前のcookieに123という値をセットしたことになります。
document.cookie = 'data1=123';

エンコード

クッキーの名前や値にはセミコロン(;)、カンマ(,)、空白を含めてはいけません。encodeURIComponent()を使用しましょう。

パラメータ

クッキーを書き込む際にいくつかの属性を設定することができます。

path
クッキーが有効なパス
domain
クッキーが有効なドメイン
max-age
クッキーの有効期限 (秒数で指定/設定しないとブラウザ終了時に削除)
expires
クッキーの有効期限 (日付で指定/設定しないとブラウザ終了時に削除)
secure
セキュリティの設定

読み込み

console.log(document.cookie)
セミコロンで区切られたkey=valueのリストが返ってきます。

削除

クッキーを削除するには下記の2つの方法があります。
1. 有効期限に過去の日付を入れる
2. 空の値をセットする(名前は残るので完全には消えない)

cookie.js

MDNにクッキーを簡単に扱えjQueryに依存しないオブジェクトがありました。(js.cookie.jsなんてのもあるみたいです。)
これを使えば細かいこと気にせずcookieを扱えますね。感謝感謝。
document.cookie

参考