JavaScriptでCookieを扱う方法【現役エンジニアが解説】
今回は、JavaScriptでCookieを扱う方法について、取得の方法とセットの方法に分け、簡単に解説していきます。
Cookieの取得
Cookieのデータは、document.cookieを参照するだけで取得できます。
ただし、代入の際は一つひとつのCookieですが、取得では全てのCookieが取得されます。
var cookies = document.cookie; console.log(cookies);
上記のコードでは、全てのCookieのデータを取得して、コンソールにそのログを出力しています。
Cookieのセット
Cookieには、document.cookieにkey=valueの形式でデータを代入できます。
また、key=value以外にもmax-age(秒単位)等でCookieの有効期間を指定する必要があります。
document.cookie = "key="+encodeURIComponent("value")+";max-age=2592000;";
上記のコードでは、key=valueの形式でエンコードしたデータを代入し、30日の有効期間を設けています。
特定のCookieの取得
実際には、key名で各Cookieのデータを取得したいケースがほとんどと思われます。
その場合はfor文とif文を使って、key名に付着するスペースに注意しながら、valueの値を取得します。
var cookie = document.cookie; var cookies = cookie.split(";"); for(var i=0;i<cookies.length;i++){ var data = cookies[i].split("="); if (data[0].trim() == "key"){ // keyの指定 console.log(decodeURIComponent(data[1])); // valueの出力 } }
上記のコードでは、;で区切って各Cookieを配列化し、それをさらに=で区切ってkeyとvalueに分割して特定のCookieのデータをデコードしたうえで取得しています。