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

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

=== 目次 ===

使用するライブラリ
クッキーの保存
クッキーの読み込み
オブジェクトをクッキーに保存する方法

使用するライブラリ

使用するライブラリは

jQuery
jquery.cookie.js

の２つです。

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文字列に変換する方法は以下の記事をご覧ください。

オブジェクトとJSON文字列を変換する方法(双方向)

JavaScript/jQueryにおいてオブジェクト⇔JSON文字列の双方向の変換方法を紹介します。

サンプルコードは以下です。

var data = {
    Number: 1,
    Flag: true
};
var json = JSON.stringify(data);
$.cookie("KEY", json);