ページ間の状態を維持しようとしています。従来、状態を維持するには2つの方法があります。
- 状態をCookieに保存する
- 状態をクエリ文字列に格納する
いずれにせよ、最初のページは（Cookieまたはクエリ文字列のいずれかに）状態を保持する必要があり、他のページは-個別に-状態を復元する必要があります。両方のページで同じスクリプトを使用することはできません。
例：Cookieの使用
Cookieを使用すると、最初のページで次のページに必要なすべてのフォームデータをCookieに書き込む必要があります。
<!DOCTYPE html>
<html>
<head>
<title>Maintaining State With Cookies</title>
</head>
<body>
<div>
Setting cookies and redirecting...
</div>
<script>
// document.cookie is not a real string
document.cookie = 'form/title=My Name is Richard; expires=Tue, 29 Aug 2017 12:00:01 UTC'
document.cookie = 'form/text=I am demoing how to use cookies in JavaScript; expires=Tue, 29 Aug 2017 12:00:01 UT';
setTimeout(function(){
window.location = "./form-cookies.html";
}, 1000);
</script>
</body>
</html>
...そして2番目のページはそれらのCookieを読み取り、フォームフィールドにそれらを入力します。
<!DOCTYPE html>
<html>
<head>
<title>Maintaining State With Cookies</title>
</head>
<body>
<form id="myForm" action="submit.mumps.cgi" method="POST">
<input type="text" name="title" />
<textarea name="text"></textarea>
</form>
<script>
var COOKIES = {};
var cookieStr = document.cookie;
cookieStr.split(/; /).forEach(function(keyValuePair) { // not necessarily the best way to parse cookies
var cookieName = keyValuePair.replace(/=.*$/, ""); // some decoding is probably necessary
var cookieValue = keyValuePair.replace(/^[^=]*\=/, ""); // some decoding is probably necessary
COOKIES[cookieName] = cookieValue;
});
document.getElementById("myForm").getElementsByTagName("input")[0].value = COOKIES["form/title"];
document.getElementById("myForm").getElementsByTagName("textarea")[0].value = COOKIES["form/text"];
</script>
</body>
</html>
例：クエリ文字列の使用
クエリ文字列を使用する場合、最初のページには、次のようにリダイレクトURLにクエリ文字列が含まれます。
<!DOCTYPE html>
<html>
<head>
<title>Maintaining State With The Query String</title>
</head>
<body>
<div>
Redirecting...
</div>
<script>
setTimeout(function(){
window.location = "./form-querystring.html?form/title=My Name is Richard&form/text=I am demoing how to use the query string in JavaScript";
}, 1000);
</script>
</body>
</html>
window.location.search...フォームはクエリ文字列を解析します（JavaScriptで-を介して利用可能?）：
<!DOCTYPE html>
<html>
<head>
<title>Maintaining State With The Query String</title>
</head>
<body>
<form id="myForm" action="submit.mumps.cgi" method="POST">
<input type="text" name="title" />
<textarea name="text"></textarea>
</form>
<script>
var GET = {};
var queryString = window.location.search.replace(/^\?/, '');
queryString.split(/\&/).forEach(function(keyValuePair) {
var paramName = keyValuePair.replace(/=.*$/, ""); // some decoding is probably necessary
var paramValue = keyValuePair.replace(/^[^=]*\=/, ""); // some decoding is probably necessary
GET[paramName] = paramValue;
});
document.getElementById("myForm").getElementsByTagName("input")[0].value = GET["form/title"];
document.getElementById("myForm").getElementsByTagName("textarea")[0].value = GET["form/text"];
</script>
</body>
</html>
例：フラグメント識別子を使用
もう1つのオプションがあります。状態は（サーバー側ではなく）クライアント側で厳密に維持されているため、フラグメント識別子（URLの「ハッシュ」部分）に情報を入れることができます。
最初のスクリプトは、上記のクエリ文字列の例と非常によく似ています。リダイレクトURLにはフラグメント識別子が含まれているだけです。便宜上、クエリ文字列の書式設定を再利用しますが、以前は次#の場所にあることに注意し?てください。
<!DOCTYPE html>
<html>
<head>
<title>Maintaining State With The Fragment Identifier</title>
</head>
<body>
<div>
Redirecting...
</div>
<script>
setTimeout(function(){
window.location = "./form-fragmentidentifier.html#form/title=My Name is Richard&form/text=I am demoing how to use the fragment identifier in JavaScript";
}, 1000);
</script>
</body>
</html>
...次に、フォームはフラグメント識別子などを解析する必要があります。
<!DOCTYPE html>
<html>
<head>
<title>Maintaining State With The Fragment Identifier</title>
</head>
<body>
<form id="myForm" action="submit.mumps.cgi" method="POST">
<input type="text" name="title" />
<textarea name="text"></textarea>
</form>
<script>
var HASH = {};
var hashString = window.location.hash.replace(/^#/, '');
hashString.split(/\&/).forEach(function(keyValuePair) {
var paramName = keyValuePair.replace(/=.*$/, ""); // some decoding is probably necessary
var paramValue = keyValuePair.replace(/^[^=]*\=/, ""); // some decoding is probably necessary
HASH[paramName] = paramValue;
});
document.getElementById("myForm").getElementsByTagName("input")[0].value = HASH["form/title"];
document.getElementById("myForm").getElementsByTagName("textarea")[0].value = HASH["form/text"];
</script>
</body>
</html>
また、フォームページのコードを編集できない場合
グリースモンキースクリプトを試してください。