【JS】グローバル変数で宣言し、ページ遷移前に入力した値が遷移後のページでリセットされてしまいます

Question

1.遷移前のページのスクロール量をグローバル変数に保存
2.遷移後のページでグローバル変数から値を受け取り、スクロールさせる

ということをやりたいと思い、グローバル変数を使ってみたのですが、遷移前のページではグローバル変数に代入できているものの、遷移先のページでリセットされてしまいます。

いろいろ試してみたのですが、どうにも解決できないためアドバイスいただければ幸いです。

// グローバル変数（スクロール量を保存して次のページに渡すため）
var global__scroll_length = 0;

$(function () {

    // カテゴリーボタンをクリックしたとき
    $('.category-btn').click(function () {
        
        // スクロール量をグローバル変数に保存
        global__scroll_length = $(window).scrollTop();
    });

    if (global__scroll_length != 0) {
        // 前のページのスクロール量を次のページにも反映
        $(window).scrollTop(global__scroll_length);

        // グローバル変数をリセット
        global__scroll_length = 0;
    } 
});

Answer 1

遷移前のページではグローバル変数に代入できているものの、遷移先のページでリセットされてしまいます。

はい、ページ遷移を行うと、グローバル変数を含めてJavaScript環境は完全にリセットされます。

ページを超えて値を伝えたい場合、sessionStogageやCookieを活用する必要があります。

Comments

[ika_tarou]

ありがとうございました！sessionStorageで簡単に解決できました！

[m.ts10806]

＞ika_tarouさん
sessionStorageだと「ブラウザ閉じると消去」という仕様があるので
「どこまで保持したいか」でlocalStorageと使い分ける必要があります。

[maisumakun]

今回は「ページ遷移前後」ということで、ブラウザのセッションを越えて持ち越すものではないと判断してsessionStorageが適当と判断しました。

[m.ts10806]

そういうことですね。了解です。（レスアンカーつければよかったですが質問者さんに向けてのアドバイスのつもりでした）

Answer 2

JavaScriptは基本静的な言語なので変数に値を保持することはできません。
それは別ページへの遷移だけではなく、自画面のリロードも同様です。
保持しておきたいのでしたらWebStorageを使う方法が一般的です。