2021/01/27

JavaScriptでCookieを扱う方法【現役エンジニアが解説】

PROGRAM

今回は、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のデータをデコードしたうえで取得しています。

• facebook
• Tweet
• Read Later