jQueryでのcookieの指定

2020.01.06

jQuery

Cookie（クッキー）とは？

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

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

github.com
※jquery2.2.4で動作確認済み



$(function(){
//jquery.cookie.jsの設定
if($.cookie('access')){
//既にアクセス済みの場合はカーテンを非表示
$('.svg-wrapper').css({'display':'none'});
}else{
//初アクセスの場合はカーテンをfadeOutさせる
$('.svg-wrapper').delay(5000).fadeOut(400);
}
//ファイルがロードされたら
$(window).load(function(){
$.cookie('access',$('body').addClass('access'));
});
});

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テキストアニメーション</title>
<style>
html,body{
margin: 0;
padding: 0;
}
.container{
width: 100%;
height: 300vh;
}
h1{
text-align: center;
font-size: 60px;
padding-top: 100px;
}
.svg-wrapper{
width: 100%;
height: 100vh;
background: #444;
padding-top: 200px;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
}
.box{
width: 510px;
margin:0 auto;
}
[class^="txt"]{
fill:#444;
stroke:#FFF;
stroke-width:2px;
stroke-dasharray:570px;
stroke-dashoffset:570px;
animation: txt-anime 0.7s linear forwards;
}
@keyframes txt-anime{
0%{stroke-dashoffset:570px;}
80%{stroke-dashoffset:114px;fill:#444;}
100%{stroke-dashoffset:0;fill:#FFF;}
}
.txt2{
animation: txt-anime 0.7s 0.5s linear forwards;
}
.txt3{
animation: txt-anime 0.7s 1s linear forwards;
}
.txt4{
animation: txt-anime 0.7s 1.5s linear forwards;
}
.txt5{
animation: txt-anime 0.7s 2s linear forwards;
}
.txt6{
animation: txt-anime 0.7s 2.5s linear forwards;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
$('.svg-wrapper').delay(5000).fadeOut(400);
});
</script>
</head>
<body>
<div class="container">
<h1>サイトタイトル</h1>
</div>


<div class="svg-wrapper">
<div class="box">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 518.563 124.313" enable-background="new 0 0 518.563 124.313"
	 xml:space="preserve">
<g>
	<path class="txt1" d="M30.997,73.145l-8.364,48.873H0L19.353,7.216H34.44h7.872h42.313l-3.608,20.829H38.705l-4.264,25.42h40.672l-3.28,19.68
		H30.997z"/>
	<path class="txt2" d="M116.768,70.849l-5.248,31.16h48.873l-3.444,20.008h-48.873h-7.872h-14.76L104.796,7.216h15.088h7.872h48.708
		l-3.443,20.008h-48.708l-4.1,24.108h45.593l-3.444,19.516H116.768z"/>
	<path class="txt3" d="M198.438,7.216h23.452l-16.072,93.973h44.608l-3.772,20.828h-67.896L198.438,7.216z"/>
	<path class="txt4" d="M278.633,7.216h23.944l-19.681,114.801H259.28L278.633,7.216z"/>
	<path class="txt5" d="M335.374,64.617c-0.983,6.669-0.465,12.765,1.559,18.286c2.022,5.521,5.33,9.949,9.922,13.284
		c4.592,3.334,10.223,5.057,16.892,5.166c7.763,0.109,14.761-1.394,20.992-4.51c6.232-3.116,11.699-6.751,16.4-10.906l-4.1,26.568
		c-5.248,3.608-10.797,6.478-16.646,8.61c-5.85,2.132-12.546,3.198-20.09,3.198c-8.638,0-16.318-1.558-23.043-4.674
		c-6.724-3.116-12.354-7.408-16.892-12.874c-4.537-5.467-7.708-11.808-9.512-19.024c-1.805-7.216-2.105-14.924-0.902-23.124
		c1.312-8.528,3.99-16.428,8.036-23.698c4.045-7.271,9.156-13.585,15.334-18.942s13.175-9.539,20.992-12.546s16.1-4.51,24.846-4.51
		c7.217,0,13.503,0.984,18.86,2.952s10.332,4.92,14.925,8.856l-4.101,26.732c-3.39-4.811-7.626-8.61-12.71-11.398
		c-5.084-2.788-11.18-4.182-18.286-4.182c-6.778,0-13.175,1.613-19.188,4.838c-6.013,3.226-11.097,7.599-15.252,13.12
		C339.256,51.36,336.577,57.619,335.374,64.617z"/>
	<path class="txt6" d="M447.713,96.433l-15.907,25.584h-27.061L482.646,0l35.917,122.017h-25.913l-6.888-25.584H447.713z M456.241,77.573h27.061
		l-8.036-32.636L456.241,77.573z"/>
</g>
</svg>
</div>
</div><!--./svg-wrapper-->
</body>
</html>

コメント

タイトルとURLをコピーしました