jQueryでクッキーの保存/読込をする方法 | JavaScript/jQuery

jQueryでクッキーの保存/読込をする方法を紹介します。

使用するライブラリ

使用するライブラリは
  1. jQuery
  2. jquery.cookie.js
の2つです。

2つともCDNにあるので、ヘッダ内でインポートするときのコードは以下でOKです。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

クッキーの保存

クッキーを保存する場合は以下のコードで可能です。
$.cookie("KEY", "VALUE", {expires: 365, path: "/", domain: "example.com", secure: true});
引数はそれぞれ以下です。
第1引数: キー
第2引数: 値
第3引数: オプション(無指定可能)
また、オプションには以下を設定することができます。
expires: 365
クッキーを保存する日数です。
指定しない場合は現在のセッションのみ保持される(=ブラウザを閉じると消える)。

path: “/”
有効なパス。
指定しない場合は”/”(=ドメイン全体で有効の意味)が設定される。

domain: “example.com”
有効なドメイン。
指定しない場合は現在のドメインが設定される。

secure: true
HTTP通信のみ許可するかどうか?を設定する。
指定しない場合はfalse

クッキーの読み込み

クッキーの読み込みは以下のコードで可能です。
var str = $.cookie("KEY");
引数はクッキーのキーです。

キーの存在を確認する方法

なお、キーが存在しない場合は読み込んでもundefinedになるため、以下のようなコードでキーの存在を確認できます。
if($.cookie("KEY") == undefined) {
    //キーがない
} else {
    //キーがある
}

オブジェクトをクッキーに保存する方法

JSON文字列を用いることで、オブジェクトをクッキーに保存することができます。

オブジェクトをJSON文字列に変換する方法は以下の記事をご覧ください。 サンプルコードは以下です。
var data = {
    Number: 1,
    Flag: true
};
var json = JSON.stringify(data);
$.cookie("KEY", json);
タイトルとURLをコピーしました