ITニュース javascript Webデザイン

新米エンジニア小木の議事録　vol.10　（jqueryでjquery.cookie.jsを使ってcookieを簡単に操作しよう）

新米エンジニアの小木です。最近カロリーを気にし始めました。

今回はcookieを利用してウェブページに初回アクセスした時のみあるコンテンツを表示させるといったことを実装していきたいと思います。

そもそもcookieてなんぞや

cookieとはユーザーの情報、設定が記されている小さなファイルのことです。例えば一度instagramへログインしたあとに再度アクセスすると次回はログイン情報を求められずにログインできるかと思いますが、これはcookieの情報を保持していてログインが省略されるためです。

このcookieはブラウザの設定から、削除したりすることができます。そして今回はjqueryを使用してこのcookieを取得し、操作しようというわけです。

やってみよう！

まずjquery.cookie.jsをインストールします。https://github.com/carhartl/jquery-cookie jqueryのあとに読み込んでください。

ここからはコードを書いていくだけです。

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>

<body>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
	<script>
		function accessCookie() {
			var cookie = $.cookie('access');
			if (cookie == undefined) {
				console.log('初回アクセスです。');
				$.cookie('access', 'on');
			} else {
				console.log('二回目以降です。');
				console.log(cookie);
			}
		}
		$(window).on('load', accessCookie);
	</script>
</body>

</html>

１つずつ説明していきます。まずjqueryとjquery.cookie.jsを読み込みます。先ほども言いましたがjqueryのファイルを先に読み込んでください。

取得したいcookieの名前を指定します。今回であれば ‘access’ です。指定したcookieがなければ undefined を返すのでその性質を利用します。初回アクセス時は指定したcookieがありませんので最初のconsole.log は ‘初回アクセスです。’ がコンソールに表示されます。それと同時に初回アクセス時に ‘access’ に値を追加します。

01

二回目のアクセス時は ‘undefined’ ではなく ‘on’ になりますので else の先にある二つがコンソールに表示されます。

02

上記を利用することである要素にクラスを付与したり、テキストをDOMに追加したり色々できてきます。

またcookieの保存期間を設定することもできます。一日であれば以下のようにします

$.cookie( 'access' , 'on' , { expires: 1});

まとめ

いかがでしたでしょうか。意外ととっつきにくいcookieもcookie.jquery.jsを利用すれば簡単にcookieを操作できるかと思います。みなさんも是非上記を参考に利用してみてください。

関連サービス
Facebook広告運用

関連記事