次のページから前のページに戻るとJavaScriptが初期化する

前提

診断コンテンツの様なものを作りたいと思っています。
参考サイトは下記になります。
製品抽出系コンテンツ
実現したい完成形参考サイトは下記です。
目指している動き

・phpは使わずJavaScriptで完成を希望します。
・JavaScriptはHTML内に記述を希望します。
・cssは外部ファイルで記述します。

実現したいこと

・JavaScriptの点数が一番多いものが診断結果に表示され、結果の商品をクリックするとリンク先に行きます。
リンク先で前のページ戻るボタンをクリックすると最後に表示したものを表示するようにしたいです。
●仮に最初のページをA
●次のページをB
として
A（JavaScriptを発火して終わった後<a>クリック）
➡B（前のページに戻るボタンクリックorスマホであればフリックして戻る）
➡A（JavaScriptが発火した所で表示）
↑の様な流れを実現したいです。

発生している問題・エラーメッセージ

・戻るボタンをクリックして、前のページに戻ると
JavaScriptが発火する前に戻ってしまいます。
参考サイトでは戻っていないです。（参考サイトは_blankがついていましたので、検証ツールで、消した後クリックしました。）

該当のソースコード

<!DOCTYPE html>
<html>
  <head>
    <title>sample</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/test_style.css" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
      var selectArray = [-1, -1, -1, -1, -1];

      var scoreObj = [
        [, "tap", "duo", "t", "l", "s", "e"],
        ["0_0", 20, 10, 8, 15, 8, 8],
        ["0_1", 8, 12, 12, 20, 12, 12],
        ["0_2", 5, 12, 15, 5, 12, 12],
        ["1_0", 5, 10, 12, 20, 15, 10],
        ["1_1", 15, 8, 8, 20, 10, 5],
        ["1_2", 12, 15, 20, 20, 15, 10],
        ["2_0", 15, 10, 12, 20, 10, 8],
        ["2_1", 15, 10, 18, 10, 10, 20],
        ["2_2", 18, 12, 15, 20, 20, 10],
        ["3_0", 20, 20, 20, 15, 5, 5],
        ["3_1", 5, 5, 5, 10, 20, 20],
        ["3_2", 10, 20, 10, 10, 10, 10],
        ["4_0", 5, 18, 18, 18, 18, 18],
        ["4_1", 20, 12, 12, 18, 12, 12],
        ["4_2", 20, 10, 10, 10, 10, 10],
      ];

      productData = scoreObj[0];
      productData.shift();

      for (let i = 1; i < scoreObj.length; i++) {
        var itemData = scoreObj[i];
        var qID = "q" + itemData.shift();
        //プロパティ名の作成
        Object[qID] = itemData; //---データの設定
      }

      function quesFunc() {
        var idArray = this.id.split("_");
        var qID = Number(idArray[0]);
        var ansID = Number(idArray[1]);
        var selectID = selectArray[qID];
        if (ansID == selectID) return;
        $("#" + qID + "_" + ansID).addClass("selected");
        $("#" + qID + "_" + selectID).removeClass("selected");
        selectArray[qID] = ansID;
        if (checkFunc()) {
          $("#searchButton").addClass("active");
        }
      }

      function checkFunc() {
        for (var i in selectArray) {
          if (selectArray[i] == -1) return false;
        }
        return true;
      }

      function calcFunc() {
        var totalArray = [0, 0, 0, 0, 0, 0];
        for (var i = 0; i < selectArray.length; i++) {
          propName = "q" + i + "_" + selectArray[i];
          var scoreList = Object[propName];
          for (var j = 0; j < totalArray.length; j++) {
            totalArray[j] += Number(scoreList[j]);
          }
        }
        var resultArray = [];
        for (var i in productData) {
          resultArray[i] = [productData[i], totalArray[i]];
        }
        resultArray.sort(function (a, b) {
          return b[1] - a[1];
        });
        resultFunc(resultArray);
      }

      function resultFunc(resultArray) {
        for (var i = 1; i <= 3; i++) {
          var myData = resultArray[i - 1];
          $("#no" + i + " .rPhoto").attr(
            "src",
            "http://www.jquerystudy.info/sample/product/images/photo_" +
              myData[0] +
              ".jpg"
          );
          $("#no" + i + " .rName").attr(
            "src",
            "http://www.jquerystudy.info/sample/product/images/nameL_" +
              myData[0] +
              ".gif"
          );

          $("#no" + i + " .scoreText").text(myData[1] + "点");
        }

        $("#checker").slideUp();
        $("#result").slideDown();
      }

      $(function () {
        $("#result").hide();
        $("ul>li").click(quesFunc);
        $("#checker").on("click", "#searchButton.active", calcFunc);

        //---結果画面から質問画面に戻る
        $("#returnButton").click(function () {
          $("#checker").slideDown();
          $("#result").slideUp();
        });
      });
    </script>
  </head>
  <body style="zoom: 1" cz-shortcut-listen="true">
    <div id="main">
      <div id="checker">
        <div class="ques">
          <img
            src="http://www.jquerystudy.info/sample/product/images/q_1.gif"
            width="740"
            height="25"
            alt="どこに設置して利用しますか？"
          />
          <div class="quesText">
            リビングで家族みんなで楽しんだり、寝室で一人で楽しむなど、スタイルに合わせて選択してください。
          </div>
          <ul>
            <li id="0_0">リビング</li>
            <li id="0_1">書斎/仕事部屋</li>
            <li id="0_2">寝室</li>
          </ul>
        </div>
        <div class="ques">
          <img
            src="http://www.jquerystudy.info/sample/product/images/q_2.gif"
            width="740"
            height="25"
            alt="何に利用しますか？"
          />
          <div class="quesText">
            仕事で利用したり、音楽や映像を楽しんだり用途に応じて選択してください。
          </div>
          <ul>
            <li id="1_0">仕事</li>
            <li id="1_1">映像/音楽</li>
            <li id="1_2">インターネット</li>
          </ul>
        </div>
        <div class="ques">
          <img
            src="http://www.jquerystudy.info/sample/product/images/q_3.gif"
            width="740"
            height="25"
            alt="重視する特徴は？"
          />
          <div class="quesText">
            大画面や価格の安さ、処理速度など利用目的に必要な製品の特徴を選択して下さい。
          </div>
          <ul>
            <li id="2_0">画面の大きさ</li>
            <li id="2_1">価格の安さ</li>
            <li id="2_2">処理速度</li>
          </ul>
        </div>
        <div class="ques">
          <img
            src="http://www.jquerystudy.info/sample/product/images/q_4.gif"
            width="740"
            height="25"
            alt="タッチパネルは必要ですか？"
          />
          <div class="quesText">
            Windows8の特徴でもあるタッチインターフェイスを利用するにはタッチパネルが必要です。
          </div>
          <ul>
            <li id="3_0">必要</li>
            <li id="3_1">どちらでも良い</li>
            <li id="3_2">必要ない</li>
          </ul>
        </div>
        <div class="ques">
          <img
            src="http://www.jquerystudy.info/sample/product/images/q_5.gif"
            width="740"
            height="25"
            alt="誰と利用しますか？"
          />
          <div class="quesText">
            一人で利用するか、複数で利用するかによって必要な要素が異なります。
          </div>
          <ul>
            <li id="4_0">ひとり</li>
            <li id="4_1">家族</li>
            <li id="4_2">不特定多数</li>
          </ul>
        </div>
        <div id="searchButton"></div>
      </div>

      <div id="result">
        <div class="productL" id="no1">
          <div class="profile">
            <img
              src="http://www.jquerystudy.info/sample/product/images/no1.jpg"
              width="51"
              height="65"
              alt="1位"
            /><img
              class="rName"
              src="http://www.jquerystudy.info/sample/product/images/nameL_tap.gif"
              width="490"
              height="42"
            />
            <img
              src="http://www.jquerystudy.info/sample/product/images/score.gif"
              width="51"
              height="17"
              alt="score"
            /><img
              class="rBar"
              src="http://www.jquerystudy.info/sample/product/images/bar.gif"
              width="300"
              height="17"
            />
            <div class="scoreText">170点</div>
            <div class="resultText"></div>
          </div>
          <a href="https://www.sony.jp/vaio/products/VL13/" class="rLink"
            ><img
              class="rPhoto"
              src="http://www.jquerystudy.info/sample/product/images/photo_tap.jpg"
              width="184"
              height="129"
              alt=""
          /></a>
        </div>
        <div id="returnButton"></div>
      </div>
    </div>
  </body>
</html>

試したこと

sessionStorageを使用しました。
下記が教えていただいたコードになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>onunload test</title>

<!-- ── スクリプト ── -->
<script>
window.addEventListener( "DOMContentLoaded", function () {

//----] カウント初期化
let count = Number( sessionStorage.getItem( "num" ) );
//----] 関数：50 ミリ秒おきにカウントを +1
function loop() {
document.getElementById( "num" ).textContent = count++;
sessionStorage.setItem( "num", count );
setTimeout( loop, 50 );
};
//----] カウント開始
loop();
} );
</script>
</head>
<body cz-shortcut-listen="true">
<div id="num">2145</div>
<a href="http://broadtail.jp">link</a>
</body>
</html>

・どうすれば今作っているものに適用させるかがわからず困っています。
・また、この方法ですとロードすると0に（最初の状態にならない）ならない、良くないです。
・参考サイトではsessionStorageが使われていないからこれが原因ではない？

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

Visual Studio Codeを使用しています。

説明長くなりました。申し訳ございません。
ご教授いただければ幸いです。
よろしくお願い致します。

Cocode

2022/09/25 11:26 編集

「ページ遷移をする」＋「JSはHTMLの中に書く」という条件がかなり厳しいように思います。 ①「ページ遷移をする」のであれば、JSは外部ファイルとした方がましです。 ②「HTMLの中にJSを書く」のであれば、ページ遷移をしないSPA（シングルページアプリケーション）がましです。 ②の方がまだおすすめです。そして②をすると<script>タグの中身が膨大になり、外部ファイルにしたいな…と自然に思えてくることでしょう。ということで、１番のおすすめは「SPA」＋「JSは外部ファイル」です！質問者さんの条件はおそらくできなくはないですが、コードもアプリの処理としてもかなり複雑になり実現が難しいと思います〜〜！

yoyosan

2022/09/26 06:03

わかりました。ありがとうございます。まずはSPAを勉強したいと思います。

行動規範の内容に同意します

回答2件

ローカルストレージかcookieを使って対応します。

HTMLというのはステートレスで、ページ移動するとそれまでのことを全て忘れます。
ですので、ブラウザに任意の情報を保存できる上記技術を使って対応する必要があります。

全ての質問文を読んでいませんが、やることは↓
①診断で回答がされるたび、データを回答配列(selectArray?)に代入・更新していく。
②回答配列をjsonなどの文字型に変換し、ローカルストレージに保存する。
↓次の設問に移動したり、前の設問に移動するたびに③
③ローカルストレージから、回答配列を呼び出し、JSコード上の回答配列に代入する。
④回答されれば①と②を行う。
↓結果表示画面でもほぼ同様です
⑤ ③と同様、ローカルストレージから呼び出す。
⑥ 回答配列の中身を利用して、結果を計算・表示する。

例ではsessionStorage.getItem( "num" ) と、番号を毎回呼び出していますね。
これがあなたの場合、回答を保存した配列(selectArray)となるはずです。

投稿2022/09/26 04:16

sk_

総合スコア18

ベストアンサー

根本的な勘違いをされていると思います。

両参考サイトは、
SPA（Single Page Application）
という仕組みを採用しているため、
そもそもページ遷移をしていません。
（SPAによって、ページ遷移しているように見せかけているだけ）
よって、JavaScriptによる変更を保持できています。
そのため、両サイトにおいても、ページを更新、ないし、ブラウザのブラウザバックボタンを押すと、
リセットされます。

ページ遷移を行う、a要素クリックでのページ遷移では、本件は実装できないため、
SPAについて勉強されるとよいかと思います。

投稿2022/09/22 06:06

miyabi_pudding

総合スコア9528

yoyosan

2022/09/26 06:06

回答ありがとうございます。 SPAという単語を初めて知りました。まずはそこから勉強したいと思います。具体的にはvue.jsの勉強をします。

miyabi_pudding

2022/09/26 10:06

本質問要件では、ページングが必要なため、確かにVueなどのフレームワーク・ライブラリがあったほうがはるかに実装しやすくはありますが、 SPAの存在さえ知らなかったところから、それらを使うのはハードルが高いかと思います。まずは、ページ遷移っぽく見せる動きをさせる、というところから始めたほうがいいかと。

yoyosan

2022/10/18 05:20

ありがとうございました。 vueを使うことで、ページ偏移っぽく見せることができました。（v-ifを使用しました。）ただ目標であった、戻るボタンで、JavaScriptが初期化される問題は改善されなかったです。やりたいことの最終目標はecサイトのかごに入れた後に戻るボタンで、という流れを実装したかったのですが、今回は諦めます。もっと勉強に励みます。

行動規範の内容に同意します

あなたの回答