JavaScript でセッション変数にアクセスする

ブラウザを開いて Web サイトにアクセスするたびに、セッションが作成されます。この間、ブラウザウィンドウが開くまで、何をするにしても、一意のセッション ID、ログインの詳細、個人情報などがすべて記録され、Cookie 内に保存されます。これらの詳細は、サーバーとクライアントの間でやり取りされ、誰が Web サイトにアクセスしているかを知ることができます。

セッション状態を利用して、ユーザーの username を ASP.NET または C# に格納するコードを作成したとします。

protected void Page_Load(object sender, EventArgs e){  
    Session["UserName"] = "John_Wick";  
}

上記の C# コードには、Page_Load() メソッドがあります。このメソッドは、ページが読み込まれるとすぐに呼び出されます。このメソッドには、ユーザーのユーザー名を格納するために使用されるセッション変数 UserName があります。

JavaScript でセッション変数にアクセスする

JavaScript ではさまざまなセッションに簡単にアクセスできます。以下のコードを使用してアクセスする方法を見てみましょう。

以下に HTML ドキュメントがあります。JavaScript ライブラリである jQuery を使用するため、head タグ内に jQueryCDN を追加しました。body 内には、セッション変数からフェッチされたユーザーのユーザー名を表示する空の div タグがあります。greetingsid があります。この id を使用して、jQuery コード内でこの div をターゲットにします。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- jquery cdn -->
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <title>Session Variable</title>

</head>
<body>

    <div id="greeting"></div>

    <script type="text/javascript">  
        $(function () {  
            var name = 'Welcome ' + ' <%= Session["UserName"] %>'  
            $('#greeting').text(name)  
        });
    </script>  
</body>
</html>

出力:

Welcome John_Wick

script タグ内には、ページが読み込まれるときに呼び出される関数が 1つだけあります。ASP.NET または C# 言語で定義したセッション変数にアクセスするには、この <%=%> タグ内にある変数名を <%= Session["UserName"] %> として渡す必要があります。このタグは文字列で囲まれていることに注意してください。次に、セッション変数文字列の前に Welcome という別の文字列を追加します。

最後に、結果を name 変数内に保存します。次に、greetings の ID を持つ div 内に name 変数のコンテンツを追加します。次に、ユーザーのユーザー名が Web ブラウザーWelcome John_Wick に出力として表示されます。

関連記事 - JavaScript Variable

  • JavaScript で変数が Null でないかどうかを確認する
  • JavaScript でグローバル変数を宣言する