【jQuery入門】超簡単!jQuery.Cookieを使った読み書き方法まとめ

こんにちは!エンジニアのオータケです!

皆さん、普段ネットサーフィンやブラウザでWebページを巡回している時にこんな文字をよく目にしませんか?

「Cookie」
「クッキー」

これらの言葉は今のWebアプリケーションを構築する上では必須と言っても過言ではないくらい当たり前に使われている技術です。

今回の記事ではjQueryを使ってこのクッキーを扱ってみようという記事になります。

この記事を見ていただくことで

[基本] Cookieとは?
[基本] jquery.cookie.jsを使ったデータ保存方法
[基本] jquery.cookie.jsを使ったデータ取得方法
[基本] jquery.cookie.jsを使ったデータ削除方法
[番外] jquery.cookie.jsのCDNのURLについて

を理解することができます!

jquery.cookie.jsを使えばクッキー操作が簡単に行なえます!さっそく学んでいきましょう!

Cookieとは

まず、Cookie(クッキー)が何かを知る必要があります。

わかりやすくするために一言で簡単にまとめてしまえば、「何らかの情報を保存しておくための仕組み」です。

Webサイトを構築していてなにか情報を記録しておきたいなと思った際にはこのCookieに保存することがあります。

ただし、WebサイトへのログインIDやパスワードといった重要な情報や個人情報はCookieに保存すべきではないためこの点は注意しておく必要があります。

その情報を保存したり、保存したデータを取り出したりするためにどのようなことをすればよいかを見ていきましょう。

jquery.cookie.jsを使おう

準備

まず、クッキーを扱うためには少々面倒くさいため今回jquery.cookie.jsというjqueryを用いて簡単にクッキーへのデータ保存・取得が行えるライブラリを使っていきます。

このjquery.cookie.jsを使うには2種類の方法があります。

まずひとつめはダウンロードして使う方法です。

https://github.com/carhartl/jquery-cookie

こちらのURLからダウンロードして、srcフォルダの中に入っているjquery.cookie.jsを読み込みたいHTMLファイルと同じ場所に置きます。

そして、HTMLのソースコード上で

と書くことで読み込んで簡単にクッキーの保存や取得が行えるようになります。

ふたつ目はCDNサイトのURLから引っ張ってくるという方法です。

CDNとは解説するとややこしくなってしまう方もいるため今回は省略します。

ただし、この方法を使えばわざわざjquery.cookie.jsをダウンロードしなくてもとても簡単に準備することが可能です。

ファイルのダウンロードなどは行わずに、HTMLのソースコード上で次のように書くだけでOKです。

このように上記のようにURLを指定するだけですぐにクッキーを簡単に扱う機能が使えてしまうんです!

※両方の方法で必ずjQueryのライブラリを読み込んでおく必要があります。

もし、jQueryのライブラリを読み込めていない場合は次のようにすると良いでしょう。

では早速、jquery.cookie.jsを使って保存処理を書いてみましょう!

保存

まず文字を保存してみたいと思います。

$.cookie()という機能を使うことで保存を行えます。

第一引数は保存しておく際のデータの名前を付けます。

そして第二引数は実際に保存する値を指定します。

この2つを指定することでデータを保存しておくことが可能です。

このサンプルでは保存をするだけだったので実際にデータが保存されているのかを確認できません。

次の項で取得する方法について見て、保存されているか見てみましょう。

取得

先程のサンプルコードを使ってメッセージがクッキーに保存されているかどうか見ていきましょう!

先程のサンプルコードとは少し変わっています。

まずdivタグが追加され保存されたメッセージがここに表示されるような仕組みになっています。

先程と違うのは$.cookieが二回出てきています。

$.cookieは書き込みの処理だと解説しましたが、引数が一つだけの場合はその引数で指定した名前のデータを引っ張ってこいという意味に変わります。

そのため取得してdivタグの値を書き換えて画面にクッキーに保存された文字列を表示しています。

保存も取得もそんなに難しくないかと思います。

配列変数を保存したいと思った場合も同じように第二引数に配列を指定して取得する際にはいつもどおり取得することで配列も扱うことができます!

削除

続いては削除について見てみましょう!

削除に関しては別の関数を呼び出す必要があります。

先程の保存→取得の流れのサンプルを改造し、保存→削除→取得でどうなるか試してみましょう!

$.removeCookieという機能を保存の処理のあとに追加しました。

この機能は第一引数で指定したデータ名のデータを削除するという機能です。

削除後、取得してdivタグの中身を書き換えていますがデータ自体が削除されてしまっているため何も書き換わることがありません。

まとめ

いかがでしょうか?

保存と取得については$.cookieで行えますが、削除については$.removeCookieを使うということを覚えておきましょう!

また、jquery.cookie.jsを扱う際にダウンロードが面倒であればCDNを使ってみるのも手です。このあたりは覚えておきましょう!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

オータケ

オータケ

30歳、フリーランスプログラマ。中学の頃よりプログラミングに興味を持ちゲーム開発やWebサイト構築などを経験
新しいフレームワークやライブラリに興味があり革新的な機能が含まれていると泣いて喜ぶ。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説