JavaScriptでcookie（クッキー）の保存・読み出し・削除をする方法

よこのじ（@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は、JavaScriptでcookieの制御をするためのフレームワークです。これを使えばとても簡単にcookieにデータを保存したり、読み出したり、削除したりすることができます（ちなみに、js-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を読み出すのはとてもシンプルで、次のように保存するときに付けた名前を指定するだけです。

docCookies.getItem(input1)

取得した値をalertで表示させたり、変数に代入して扱ったりします。

alert(docCookies.getItem("input1"));
var value = docCookies.getItem("input1");

docCookies.removeItem(name[, path[, domain]])

cookieの削除もフレームワークを使えば悩むことはないはずです。

docCookies.removeItem("input1");

削除する場合も保存する場合と同様に、パスの設定で特定ページの指定やドメインの指定が可能ですので、削除範囲をコントロールすることができます。

JavaScriptでブラウザに簡単にデータを保存する、Web Storageの使い方についても参考にしてください。