WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

Cookie(クッキー)を使って、svgアニメーションを1回だけ表示させる

Cookie(クッキー)とは?

Cookie(クッキー)とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組み、またはそのデータです。ID、パスワード、メールアドレス、訪問回数などが ユーザー情報として保存されます。これによって再訪問したときに ユーザーを特定し、情報を入力する手間が省けます。ショッピングサイトに訪問したとき、すでにログイン状態になっている、以前カートに入れた商品がそのまま残っているのは、Cookie機能がはたらいているからです。

似たような機能でSessionという機能がありますが、Cookieはクライアント側にデータを保存するのに対して、Sessionはサーバー側に保存されてるため機密性の高いデータを扱う場合はSessionを使った方が良いでしょう。


Cookie(クッキー)とキャッシュの違い

キャッシュとは、ブラウザで一度表示したページのデータ(HTMLや画像)を一時的に保存しておく機能になります。何度も頻繁に訪れるページなどは、キャッシュが保存されているおかげで素早く表示することが可能です。
ただ、一時的に保存されているページのデータが最新のものとは限らないので、アップロードの作業時には注意が必要です。特にWordpressはブラウザのキャッシュが強力で、更新前の古いデータが読み込まれて表示される事が多いので、そういった場合はキャッシュの消去を行って下さい。

・IDやパスワードなどの個人情報やサイトの閲覧情報を保存。
・削除するとログインする時に再入力する必要がある。
・IDやパスワードなどの個人情報が漏洩する危険性がある。

キャッシュ

・サイトのHTMLや画像データを保存。
・データはスマホやPC内に保存される。
・キャッシュのデータが増えることでメモリの空き容量がなくなり動作不良の原因になる。




jquery-cookie.jsを使ってみる

github.com

if($.cookie('access')){
//既にアクセス済みの場合はカーテンを非表示
$('#curtain').hide();
}else{
//初アクセスの場合はカーテンをfadeOutさせる
$('#curtain').delay(4000).fadeOut(400);
}

$.cookie('access',$('body').addClass('access'),{
 expires: 1 //指定しない場合は現在のセッションのみ保持される(ブラウザを閉じると消える)。
});

});

作例(最初の1回だけsvgアニメーションが表示される)

thoshino38.starfree.jp