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

Sahil Bhosale 2021年8月10日 2021年7月3日 JavaScript JavaScript Variable
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 に出力として表示されます。

Sahil Bhosale avatar Sahil Bhosale avatar

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.

LinkedIn

関連記事 - JavaScript Variable

  • JavaScript で未定義変数と Null 変数をチェックする
  • JavaScript で変数値をマスクする
  • JavaScript でグローバル変数が未定義値を与える理由
  • HTML で JavaScript 変数を使用する
  • JavaScript で値が NaN かどうかを確認する