LoginSignup
130

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-07-12

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

クッキーの基本

クッキーとは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

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
130