質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

757閲覧

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

MeB

総合スコア104

Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/03/22 11:43

編集2022/01/12 10:55

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

js

1$(function () { 2 // URLのパラメータを取得 3 var urlParam = location.search.substring(1); 4 5 // URLにパラメータが存在する場合 6 if(urlParam) { 7 // 「&」が含まれている場合は「&」で分割 8 var param = urlParam.split('&'); 9 10 // パラメータを格納する用の配列を用意 11 var paramArray = []; 12 13 // 用意した配列にパラメータを格納 14 for (i = 0; i < param.length; i++) { 15 var paramItem = param[i].split('='); 16 paramArray[paramItem[0]] = paramItem[1]; 17 } 18 19 // パラメータidを判断して条件分岐 20 if (paramArray.id == 'aaa') { 21 $('.link').append('<a href="https://text/?id=aaa" target="_blank"><img src="images/regist_off.png" alt=""></a>; 22 } else if (paramArray.pid == 'bbb') { 23 $('.link').append('<a href="https://text/?id=bbb" target="_blank"><img src="images/regist_off.png" alt=""></a>; 24 } else { 25 $('.link').append('<a href="https://text/" target="_blank"><img src="images/regist_off.png" alt=""></a>; 26 } 27 } 28 console.log(urlParam); 29});

html

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

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

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

paramArray.id

をcookieに保存して

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

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

今は

js

1// 用意した配列にパラメータを格納 2 for (i = 0; i < param.length; i++) { 3 var paramItem = param[i].split('='); 4 paramArray[paramItem[0]] = paramItem[1]; 5 } 6 7// cookie 8 document.cookie = 'id=paramArray.id'; //ここでparamArray.idの中身を取りたいのですが、これだと文字列になってしまっています… 9 var cookie = document.cookie; 10 11 // パラメータidを判断して条件分岐 12 if (cookie == 'aaa') {...

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

defghi1977

2018/03/22 15:23

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

2018/03/23 06:04

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

回答1

0

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


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

JavaScript

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

HTML

1<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を記憶させればよいでしょう.

JavaScript

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

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

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

投稿2018/03/22 15:51

編集2018/03/23 06:51
defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MeB

2018/03/23 06:12 編集

回答ありがとうございます。 上記のコードの場合だと 例えば 最初にaaaのパラメータがついているURLでアクセス。 その後、再度アクセスしたときにbbbのパラメータがついたURLを押してきた場合に bbbになってしまうと思うのですがいかがでしょうか…。 質問がわかりにくくて申し訳ございません。 最初にaaaでアクセスした場合は 今後パラメータがないURL、bbbがついたURLでアクセスしようと aaaに対応した処理をしたいと考えています。 追記 NOTEありがとうございます!
defghi1977

2018/03/23 06:30

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

2018/03/23 06:36

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

2018/03/23 06:41

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

2018/03/23 07:22

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問