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);
スポンサーリンク

この記事が有用でしたら、↓にあるSNSボタン…
この記事が有用でしたら、↓にあるSNSボタンからご友人にご共有いただけますと幸いです!
JavaScript / jQuery
ASP Androidアプリ開発以外

プログラミングスキルを習得して業務/転職/副業に活かしたい方へ
これからの時代は終身雇用が崩壊し、自分のスキルで食べていく時代が到来します。 そのような時代の中で、プログラミングのスキルは単純なプログラム開発業務だけではなく、データ解析などあらゆる業務で普遍的に使用できる非常に有益なスキルと考えられます。 目先の業務や将来の転職に備えて、プログラミングのスキルを習得するのはいかがでしょうか?

プログラミングを生かした副業も非常にオススメです。 転売などの手を止めると稼ぎがなくなってしまう副業と違い、 アプリやサイト運営などプログラミングを使用した副業の一部は一度公開してしまえばその後は放置しても継続してお金を稼ぐことができるという非常に良い特性があります。

一方で業務/転職/副業で活かせるレベルまでプログラミングを習得しようとすると、質問ができない独学では限界があり、挫折してしまうことが多いでしょう。

そんなときは下記のような質問しながら学習を進められるオンライン上のプログラミングスクールがオススメです!

無料体験や無料カウンセリングなどもありますので、まずは確認だけでもしてみてはいかがでしょうか?

Tech Academy
Aresei-note