JavaScriptでcookie(クッキー)の保存・読み出し・削除をする方法
- 2019.04.05
- 2019.05.25
- Webスキル
よこのじ(@yokonoji_work)です。
cookie(クッキー)でデータを一時的に保存できると、アイデア次第で可能性が広がります。
ブラウザにデータを保存するので連携させるのは難しいと思ってしまいますが、JavaScriptを使えば簡単です。
今回はその方法をご紹介します。
まずは基本構文
cookies.jsというフレームワークを使う前にcookieを扱うための基本的な構文を確認しておきましょう。
Document.cookieを確認すると、新しくcookieを書き込むには次のように記述するとの説明があります。
document.cookie = "input1=abc" document.cookie = "input2=def"
cookieにはテキストデータを保存することができます。記述方法はkey=valueです。上の例ではinput1という名前でabcというデータを保存していて、input2にはdefを保存しています。
また、次のようにセミコロンで区切ってcookieの保存期間を指定することもできます。
document.cookie = "input1=abc" ;max-age=31536000
この例では31536000(=60*60*24*365)秒なので1年間保存します。また、この値を0秒に更新するとabcという値を削除することができます。
保存した値を読み出すには、次のように記述します。
var cookieValue = document.cookie;
この場合、先ほど保存を行ったinput1=abc と input2=defがどちらも読み出されます。
input1の値だけ取り出す場合は、次のように記述したりします。
var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)input1\s*\=\s*([^;]*).*$)|^.*$/, "$1");
cookies.js でcookie(クッキー)の保存,読み出し,削除
cookies.jsは、JavaScriptでcookieの制御をするためのフレームワークです。これを使えばとても簡単にcookieにデータを保存したり、読み出したり、削除したりすることができます(ちなみに、js-cookieというフレームワークもあったりします)。
cookieの保存を行う方法
docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])
先ほどと同じようにinput1という名前でabcというデータを保存する場合は、このような記述となります。
docCookies.setItem(input1, abc)
もちろん、cookieの保存期間も設定できます。これはオプションです。
docCookies.setItem(input1, abc, Infinity) docCookies.setItem(input1, abc, 3600)
期間は秒で設定します。3600なら1時間で、Infinityとした場合はデータを保持し続けることができます。
その他、パスを設定して特定のページだけでcookieを保存したり、サブドメインだけで保存させるなどのドメインの指定も可能です。
cookieの読み出しを行う方法
cookieを読み出すのはとてもシンプルで、次のように保存するときに付けた名前を指定するだけです。
docCookies.getItem(input1)
取得した値をalertで表示させたり、変数に代入して扱ったりします。
alert(docCookies.getItem("input1")); var value = docCookies.getItem("input1");
cookieの削除を行う方法
docCookies.removeItem(name[, path[, domain]])
cookieの削除もフレームワークを使えば悩むことはないはずです。
docCookies.removeItem("input1");
削除する場合も保存する場合と同様に、パスの設定で特定ページの指定やドメインの指定が可能ですので、削除範囲をコントロールすることができます。
JavaScriptでブラウザに簡単にデータを保存する、Web Storageの使い方についても参考にしてください。
ブラウザにデータを保存するWeb Storage(Session Storage/Local Storage)とはなにか?
- 前の記事
CSSアニメーション animationプロパティの使い方 2019.03.20
- 次の記事
CSSアニメーションで「バウンド」を実装する 2019.04.08