パラメータ付きのURLをcookieで記憶させたい

Question

前提・実現したいこと

index.html(以下、A)にある「エントリーボタン」を押してfinish.html(以下、B)に行き,
Bにある「戻るボタン」を押して再びAに戻るとエントリーボタンが非表示になっている。
かつ
一度エントリーした人(Bを訪れた人)にはどこからAにアクセスしても「エントエリーボタン」を非表示にさせたい。

▼index.html A(エントリーボタン部分)

<div class="entry-btn"><a href="dummy">エントリーする</a></div>
コード

▼finish.html B(indexに戻るボタン部分)

<div class="cp-back"><a href=index.html"?id=test25">キャンペーンに戻る</a></div>

▼JS

// URLのパラメータを取得
var urlParam = location.search.substring(1);
 
// URLにパラメータが存在する場合
if(urlParam) {
  // 「&」が含まれている場合は「&」で分割
  var param = urlParam.split('&');
 
  // パラメータを格納する用の配列を用意
  var paramArray = [];
 
  // 用意した配列にパラメータを格納
  for (i = 0; i < param.length; i++) {
    var paramItem = param[i].split('=');
    paramArray[paramItem[0]] = paramItem[1];
  }
 
  // パラメータidがtest25かどうかを判断する
  if (paramArray.id == 'test25') {
    $('.entry-btn').css('display', 'none');
  } else {
    $('.entry-btn').css('display', 'block');
  }
}

試したこと

上記のやり方だと
Bの戻るボタンのURLをパラメーター付きにしておけば
Aのエントリーボタンは消えるのですが
少し経ってまたパラメータのついていないURLなどからアクセスした時にcookieを残していないとAのエントリーボタンが表示されてしまうので
cookieを残したいです！

初心者のためよくわからず、説明も不足しているかと思いますがよろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

jquery-1.11.3.min.js

Comments

[m.ts10806]

ソースコードはマークダウンのcode機能を使ってください。質問・解説内容とコードとの境目が不明瞭となりますし、code機能では正しくコードをコピペできるようになりインデントもつけられて読みやすくなり、再現確認も容易となりますので、的確な回答が得やすくなります。

[m.ts10806]

質問内にある「バナー」とは具体的にどういうアクセスの仕方でしょうか。

[m.ts10806]

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。

Answer 1

Bページでcookieを発行し、
Aページで、Bページで発行したcookieの有無を判断すればよいと思います。
※下のリンク先のページを参考にすれば、cookieが扱えます。

→jQueryプラグイン「jquery.cookie.js」でcookieを簡単に扱う ｜ Tips Note by TAM

Comments

[okama]

ご回答ありがとうございます。

jquery.cookie.jsを読み込むのはBの方だけであっていますか？

$.cookie("KEY", "VALUE", { expires: 7 });

の部分は今回だとどのように設定すれば良いのでしょうか。
Bでパラメータ付きのAのURLを発行する記述がわかりません。

あと質問で記述しているjsに変更する点はありますか？
Aは特に変更なしでしょうか。

よろしくお願いいたします。

[Yousuck]

Aで取得したいのであれば、Aにも必要ですよ。

$.cookie("KEY", "VALUE", { expires: 7 });
まずは、リンク先のページをお読み頂きご自身で値の設定及び取得をしてみましょう。
ご自身で設定し、たとえ間違っていたとしても、爆発したりして身に危険が及ぶワケではございませんので。

[okama]

cookieのストレージ確認したところ
id=test25が出ました。
しかし
Aにアクセスしてみてもエントリーボタンが消えません。。
なぜでしょうか。。

ちなみに付与できたようなのですが、
Bでエラーが出ていました
↓
$.cookie is not a function. (In '$.cookie('id', 'test25')', '$.cookie' is undefined)

/*ページBに以下*/
<script type="text/javascript">
$.cookie('id', 'finish25');
</script>

/*ページAに以下*/
<script type="text/javascript">
(function () {
document.cookie = 'id=test25';
}());
// URLのパラメータを取得
var urlParam = location.search.substring(1);

// URLにパラメータが存在する場合
if(urlParam) {
// 「&」が含まれている場合は「&」で分割
var param = urlParam.split('&');

// パラメータを格納する用の配列を用意
var paramArray = [];

// 用意した配列にパラメータを格納
for (i = 0; i < param.length; i++) {
var paramItem = param[i].split('=');
paramArray[paramItem[0]] = paramItem[1];
}

// パラメータidがtest25かどうかを判断する
if (paramArray.id == 'test25') {
$('.entry-btn').css('display', 'none');

} else {

if($.cookie('id') == 'test25'){
$('.entry-btn').css('display', 'none');
} else {
$('.entry-btn').css('display', 'block');
}
}
}
</script>

[Yousuck]

確認ですが、jquery.cookie.jsは両ページ共に読み込みされてますか⁇

[okama]

両ページとも読み込んでおります。
<script src="js/jquery.cookie.js"></script>

それと
両ページともcookie.jsの上に
jquery本体
<script src="js/jquery-1.11.3.min.js"></script>
を読み込んでいるのですが、
これが対応してないとかありますか？

[Yousuck]

あっ！
スマホからなので初見で気付けませんでしたが、Bページでのクッキー発行時の値が、
$.cookie('id', 'finish25');

finish25

ですね。
Aページの条件分岐が

test25

修正してみてくださいな♪

[okama]

すみませんそこはtest25であげていました！
ここに投稿するのにミスりました。。

それと
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.cookie.js"></script>

を

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

に変えたところうまくいきました。。
なぜでしょう。。

[Yousuck]

あとエラーは、jquery.cookie.jsのパスを念のため絶対パスにして頂いて、Bページでクッキー発行する条件として、（既に）発行したクッキー$.cookie(‘id’)を持っていなければ発行するとしてみてください。

[Yousuck]

で、あと↓ここは必要⁇
/*ページAに以下*/
<script type="text/javascript">
(function () {
document.cookie = 'id=test25';
}());

必要ないなら削除してくださいな♪

[Yousuck]

なぜでしょう。。
CDNでうまくいったということは、、

・そもそもパスが通ってなかった（パスが間違っているetc）
・ファイル自体が壊れていた

ですかね。
あと、絶対パスにするとうまくいくこともあるみたいですが。

Answer 2

※質問と関係ないので削除します。