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 タグがあります。greetings の id があります。この 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 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