別ファイルにデータを渡す

説明

JavaScriptで他のページにデータを受け渡すには、受信先のファイルのURLにクエリー文字列として付加し送信する方法があります。受信側のファイルではURLの?以降のクエリー文字列を取り出します。取り出した文字列からキーと値のペアを取り出し必要なものだけを抽出します。
クエリー文字列なので大量のデータを送信することはできませんが、いくつかの変数値などは送信することができます。また、日本語や記号などが含まれる場合には必ずエンコードしてから送信します。
JavaScriptテクニック ブック 　詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

●HTMLファイル（送信側）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>別ファイルにデータを渡す(送信側)</h1>
<form action="./setcss.cgi" method="get" name="mainForm">
送信文字：<input type="text" name="sendText" id="sendText" value="Sample"><br>
<input type="button" id="sendButton" value="別ページに送信">
</form>
</body>
</html>

●HTMLファイル（受信側：next.html）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="receive.js"></script>
</head>
<body>
<h1>別ファイルにデータを渡す(受信側)</h1>
<div id="message"></div>
</body>
</html>

●スクリプトファイル（main.js）
window.onload = function(){
document.getElementById("sendButton").onclick = function(){
var text = document.getElementById("sendText").value;
location.href = "next.html?data="+encodeURIComponent(text);
}
}

●スクリプトファイル（receive.js）
window.onload = function(){
var data = location.href.split("?")[1];
var text = data.split("=")[1];
document.getElementById("message").innerHTML = decodeURIComponent(text);
}