Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
129
Help us understand the problem. What is going on with this article?
@takanorip

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

参考

129
Help us understand the problem. What is going on with this article?
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
takanorip
都内でフロントエンドエンジニアをやっています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
129
Help us understand the problem. What is going on with this article?