Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

クッキーの基本

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

参考

https://developer.mozilla.org/ja/docs/Web/API/Document/cookie

takanorip
都内でフロントエンドエンジニアをやっています。
https://takanorip.com
folio-sec
誰もがかんたんに資産運用することができるサービス「フォリオ」を作っているFinTech系スタートアップ
https://corp.folio-sec.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした