jsでcookieを習得してリンク先を書き換えたい

Question

最初に現状をお伝えします。
現状は、URLについているパラメータを取得して
"id"というものが付いている部分の値でリンク先のURLの出し分けをしています。
下記がコードになります。

$(function () {
  // 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を判断して条件分岐
    if (paramArray.id == 'aaa') {
      $('.link').append('<a href="https://text/?id=aaa" target="_blank"><img src="images/regist_off.png" alt=""></a>;
    } else if (paramArray.pid == 'bbb') {
      $('.link').append('<a href="https://text/?id=bbb" target="_blank"><img src="images/regist_off.png" alt=""></a>;
    } else {
      $('.link').append('<a href="https://text/" target="_blank"><img src="images/regist_off.png" alt=""></a>;
    }
  }
   console.log(urlParam);
});

<div class="link"></div>

しかし、この場合だと
パラメータが変わってしまったり、パラメータがない場合にリンク先も変わってしまいます。

そこで
最初にアクセスした時に

paramArray.id

をcookieに保存して

// パラメータidがaaaかどうかを判断する
if (paramArray.id == 'aaa') {}

の部分をcookieで判断してリンクの書き換えを行いたいです。

今は

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

// cookie
    document.cookie = 'id=paramArray.id'; //ここでparamArray.idの中身を取りたいのですが、これだと文字列になってしまっています…
    var cookie = document.cookie;

    // パラメータidを判断して条件分岐
    if (cookie == 'aaa') {...

となっておりますが、ここから全くわからず進んでいない状態です。
申し訳ありませんがご教示お願いします。

Comments

[defghi1977]

「パラメータがわかってしまったり、ない場合にリンク先も変わってしまいます。 」の意味が判りません. もう少し詳しく説明して下さい.

[MeB]

すみません。誤字でした。

Answer 1

なにやら苦労している割に随分と遠回りしているような気がして, 見ている方が気が気でないです.

---

あなたが本当に必要としている内容はこうではありませんか？

"use strict";
document.addEventListener("DOMContentLoaded", e => {
	//URLを分析する
	const params = (new URL(document.location)).searchParams;
	//編集対象のリンク
	const anchor = document.querySelector(".link a");
	//URLにパラメータ「id」が含まれていたら
	if(params.has("id")){
		//リンク先のURLにidパラメータを追加する
		anchor.href += `?id=${params.get("id")}`;
	}
});

<div class="link"><a href="https://text/" target="_blank"><img src="images/regist_off.png"/></a></div>

参考
https://developer.mozilla.org/ja/docs/Web/API/URL/searchParams#Example

NOTE:
URL文字列の分析など, いかにも世界中で同じようなことが必要とされていそうな処理には概ね便利なAPIやライブラリが用意されていて, 大抵は自作したコードよりも品質が良いものです.(世界中で使われている＝十分にテストが為されているので) ですから, 実際のコーディングを始める前にWEBブラウザ側に必要としている仕組みが無いか確認することを心がけましょう.
とはいえ, このAPIがあるかないかの嗅覚はある程度経験を積まないと身につきませんし, あると思っていた機能が実は無かったときのことを踏まえて, コードを自作することも立派なトレーニングではあります.

---

最初にaaaでアクセスした場合は

今後パラメータがないURL、bbbがついたURLでアクセスしようと
aaaに対応した処理をしたいと考えています。

であれば, localStorageにidを記憶させればよいでしょう.

"use strict";
document.addEventListener("DOMContentLoaded", e => {
	//URLを分析する
	const params = (new URL(document.location)).searchParams;
	//編集対象のリンク
	const anchor = document.querySelector(".link a");
	//記憶済みのidを確認する
	let savedId = localStorage.getItem("id");
	if(savedId === null && params.has("id")){
		//記憶済みのidが存在せず, パラメータが与えられていれば新たにidを記憶する
		savedId = params.get("id");
		localStorage.setItem("id", savedId);
	}
	//記憶済みidが存在すれば
	if(savedId !== null){
		//リンク先のURLにidパラメータを追加する
		anchor.href += `?id=${savedId}`;
	}
});

NOTE:
localStorageに格納した値は, デバッグ中であろうが容赦なく残り続けますので, 動作検証をする際には, コンソールからlocalStorage.removeItem("id")とし, 記憶している内容を都度削除するようにしましょう.

参考
https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage

Comments

[MeB]

回答ありがとうございます。
上記のコードの場合だと
例えば
最初にaaaのパラメータがついているURLでアクセス。
その後、再度アクセスしたときにbbbのパラメータがついたURLを押してきた場合に
bbbになってしまうと思うのですがいかがでしょうか…。

質問がわかりにくくて申し訳ございません。
最初にaaaでアクセスした場合は
今後パラメータがないURL、bbbがついたURLでアクセスしようと
aaaに対応した処理をしたいと考えています。

追記
NOTEありがとうございます！

[defghi1977]

ああ, 「初回入力時のパラメータをその後もずっと引き継ぎたい」わけですか.
技術的にはcookieかlocalstorage（おすすめ）でやるのが良いと思いますが, もし
「間違ってaaaを選んでしまった場合, どうやってbbbにもどす」のでしょうか？

[MeB]

間違った場合のことですが、
これはこちらの勝手になってしまうのですが、
このパラメータは入力するものではなく、さらに並んであるものでもなく
もっというの同じページにすらないものでそこは大丈夫だと思います。

localstorage、調べてみます。

[defghi1977]

> もっというの同じページにすらないものでそこは大丈夫だと思います。
設計はともかく, 予期せぬエラー・フローというものは絶対に発生するものです. （そう、絶対に・・・）
ですから, 盲目的に「大丈夫」と考えるのは非常に危険です. かならず, 抜け道というか対処策についても考えておきましょう.
(本当にありえないと断言できるのであれば, コンソールから記憶中のidを削除するフローを用意しておけば十分でしょうね)

[MeB]

>設計はともかく, 予期せぬエラー・フローというものは絶対に発生するものです. （そう、絶対に・・・）
か、過去に一体何が…。しかし。おっしゃる通りです・・・。
絶対ない！と断言はできない以上気をつけます…。

localStorageの件もありがとうございます！