前提・実現したいこと

・前提
顧客IDを入力して、紐づく商品情報一覧を検索するというhtmlを作成中です。
条件としては、フロント側だけでデータの処理をするので、JavaScriptのlocalStorageを用いて、データの管理を行っています。
実行環境は、ブラウザIE11でローカル環境です。（実行環境は変更不可です。）

・実現したいこと
上記を実現する際、localStorageが使用できないため、localStorageを使用する以外の代替案を教えて下さい。
sales_order.htmlで入力した値に応じて、order_result.htmlに結果を出力する機能を実現したいです。

該当のソースコード

sales_order.html

 <html lang=“ja”>
 <head>
	<meta http-equiv="content-language" content="ja">
	<meta name="robots" content="noindex,nofollow">
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>受注確認画面</title>
</head>
<body>

<script>
	var storage = localStorage;
	storage.setItem("clientID", "　");
			storage.setItem("testd1", "　");
			//省略
	function orderkaki(){
		if (!window.localStorage){
    		alert("お使いのブラウザはlocalstorageに対応してません。");
		}
		var storage = localStorage;
		storage.setItem("clientID", document.form2.s.value);
		
		if(document.form2.s.value == ""){
			alert("顧客IDが未入力です！");
			storage.setItem("clientID", "　");
			storage.setItem("testd1", "　");
			//省略
			document.form2.action = './sales_order.html';
		}
		
		if((document.form2.s.value != "")&&(document.form2.s.value != "123456789")&&(document.form2.s.value != "111111111")&&(document.form2.s.value != "222222222")&&(document.form2.s.value != "333333333")){
			alert("顧客IDが存在しません。");
			storage.setItem("testd1", "　");
			//省略
			document.form2.action = './sales_order.html';
		}
		
		if(document.form2.s.value == "123456789"){
			storage.setItem("testd1", "2019/08/03");
			storage.setItem("testd2", "2019/07/09");
			storage.setItem("testd3", "2019/07/01");
			storage.setItem("testd4", "2019/07/01");
			storage.setItem("testd5", "2019/06/20");
			storage.setItem("testc1", "A001");
			storage.setItem("testc2", "C001");
			storage.setItem("testc3", "D001");
			storage.setItem("testc4", "B001");
			storage.setItem("testc5", "E001");
			storage.setItem("testn1", "42");
			storage.setItem("testn2", "21");
			storage.setItem("testn3", "76");
			storage.setItem("testn4", "21");
			storage.setItem("testn5", "100");
		}
		
			//省略	
</script>

	<main class="confirmation">
		<h1>受注確認画面</h1>
		<div class="wrapper content clearfix">
			<div class="left">
				<ul class="leftBox">
					<li class="menu"><a href="./main.html"><p>Menu</p></a></li>
					<li class="order"><a href="./order_entry.html"><p>受注入力</p></a></li>
					<li class="confirmation"><a href="./sales_order.html"><p>受注確認</p></a></li>
					<li class="stock"><a href="./inventory_control.html"><p>在庫管理</p></a></li>
				</ul>
			</div>
			<div class="right">
				<form id="form1" action="order_result.html"   method="post" name="form2" onsubmit="orderkaki()">
					<table class="mt20">
						<tr>
							<th><p class="productCode">顧客ID</p></th>
							<td>
								<input id="sbox"  id="s" name="s" type="text" placeholder="IDを入力" />
							</td>
						</tr>
					</table>
					<input id="sbtn" class="button mt30" type="submit" value="検索" />
				</form>
			</div>
		</div>
	</main>
</body>
</html>

order_result.html

<!DOCTYPE html>
 <html lang=“ja”>
 <head>
	<meta http-equiv="content-language" content="ja">
	<meta name="robots" content="noindex,nofollow">
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>受注確認結果画面</title>
	<style>
	#table table {
		width: 100%;
	}
	#table table th {
		background: #ccc;
	}
	</style>
</head>
<body>

<script type="text/javascript">
	var storage = localStorage;
	var cclientID = storage.getItem("clientID");
	var ctestd1 = storage.getItem("testd1");
	var ctestd2 = storage.getItem("testd2");
	var ctestd3 = storage.getItem("testd3");
	var ctestd4 = storage.getItem("testd4");
	var ctestd5 = storage.getItem("testd5");
	var ctestc1 = storage.getItem("testc1");
	var ctestc2 = storage.getItem("testc2");
	var ctestc3 = storage.getItem("testc3");
	var ctestc4 = storage.getItem("testc4");
	var ctestc5 = storage.getItem("testc5");
	var ctestn1 = storage.getItem("testn1");
	var ctestn2 = storage.getItem("testn2");
	var ctestn3 = storage.getItem("testn3");
	var ctestn4 = storage.getItem("testn4");
	var ctestn5 = storage.getItem("testn5");
	
	
	
	// 表の動的作成
function makeTable(data, tableId){
    // 表の作成開始
    var rows=[];
    var table = document.createElement("table");

    // 表に2次元配列の要素を格納
    for(i = 0; i < data.length; i++){
        rows.push(table.insertRow(-1));  // 行の追加
        for(j = 0; j < data[0].length; j++){
            cell=rows[i].insertCell(-1);
            cell.appendChild(document.createTextNode(data[i][j]));
            // 背景色の設定
        }
    }
    // 指定したdiv要素に表を加える
    document.getElementById(tableId).appendChild(table);
}


window.onload = function(){ 
var	data;

if(cclientID == "123456789") {
	data = [
            ["発注日", "商品コード", "発注数"],
			[ctestd1, ctestc1, ctestn1],
            [ctestd2, ctestc2, ctestn2],
            [ctestd3, ctestc3, ctestn3],
            [ctestd4, ctestc4, ctestn4],
            [ctestd5, ctestc5, ctestn5]            
            ];
}
//省略
} else {
	data = [];
}

// 表の動的作成
makeTable(data,"table");
};
	
</script>
	<main class="confirmation">
		<h1>受注確認結果画面</h1>
		<div class="wrapper content clearfix">
			<div class="left">
				<ul class="leftBox">
					<li class="menu"><a href="./main.html"><p>Menu</p></a></li>
					<li class="order"><a href="./order_entry.html"><p>受注入力</p></a></li>
					<li class="confirmation"><a href="./sales_order.html"><p>受注確認</p></a></li>
					<li class="stock"><a href="./inventory_control.html"><p>在庫管理</p></a></li>
				</ul>
			</div>
			<div class="right">
				<form id="form1" action="./order_result.html">
					<table class="result">
						<tr>
							<th class="productCode">顧客ID</th>
							<td><script>document.write(cclientID)</script></td>
						</tr>
					</table>
					<input id="sbtn" class="button mt15 mb15" type="submit" value="検索" />
				</form>
				
				 <div id="table" class="result"></div> 
				 
			</div>
		</div>
	</main>
</body>
</html>

試したこと

・ローカル環境かつブラウザがIE11では、localStorage（WebStorage）は使用できない。
https://qiita.com/tsunet111/items/45bbd7841f88dbc04746

・sessionStorageも同様に使用できなかった。（WebStorageのため）

・cokkieでもダメでした。
https://teratail.com/questions/101774

補足情報

・OS:Win10

行動規範の内容に同意します

回答5件

ローカルだけでやる場合セッションに逃げることもできないので難しいですね
とりあえずはクッキーの制限範囲に収めるくらいでしょうか
ページの遷移とかなければ変数にとっておけばいいでしょうし
ページ遷移が必須なら、姑息ですがhashやsearchに付加してしまうとか
無理やりやることはできます

hash,search

javascript
1<script>
2console.log(location.search);
3console.log(location.hash);
4</script>
5<a href="?data=123465789#abcdef">test</a>

投稿2019/11/01 02:30

編集2019/11/01 02:45

yambejp

総合スコア116661

退会済みユーザー

2019/11/01 02:36

ご回答ありがとうございます。追加で質問させてください。・cokkieの制限範囲内とは、データの容量のことでしょうか。・「ページ遷移が必須なら、姑息ですがhashやsearchに付加してしまうとか無理やりやることはできます」 →もしよろしければ具体的な方法を教えて頂けないでしょうか。

yambejp

2019/11/01 02:45 編集

> ・cokkieの制限範囲内とは、データの容量のことでしょうか。データ量が極小、生存時間の設定、サブドメインの制限などいくつかあります。ハンドリングがめんどくさいのもその一つです。 >> hashやsearch location.seachでgetと同等のデータが得られます。 getにデータを一時的においておくと言うことです。 hashはページ内リンクですが、get同様に任意に使用できますしつこいようですが「姑息」な処理なのであまり精度は求められませんそれと、もうひとつ別窓を開いて、そこにデータを保持させるというこれも姑息な方法が考えられます(ただしこれはブラウザを閉じると保持できない)

退会済みユーザー

2019/11/01 03:01

ご回答ありがとうございます。上記でいったん試してみます！

行動規範の内容に同意します

~~IE11 に縛りがあるなら、残念ながら代替案はありません。~~

環境に Chrome をインストールしても良い条件なら、localStorage の利用を諦めずに開発できるでしょう。

ここからは、「Chrome 導入可能」の場合の回答になります
localStorage は「オリジン」の単位で機能するため、WWWサーバーが必須です。

起動して簡単な設定をするだけで、スタティックページ専用の簡易サーバとして機能するWeb Server for Chromeもあります。

「任意のフォルダをサーバールート」に設定できるのが特徴です。

簡単な設定とはいえ「UIは英語のみ」ですので、「Web Server fo Chrome」で検索して日本人のブログで設定方法を見つけると良いでしょう。

追記）
IE11のFileAPI はいかがでしょうか。
「javascript ファイルダウンロード ie」でググったら、方法はありそうですよ。

読み書き仕様

input[type=file] で読み込み。
ファイルをダウンロードさせる方向で保存。

ファイル仕様

JSON

投稿2019/11/01 02:24

編集2019/11/01 02:50

AkitoshiManabe

総合スコア5434

退会済みユーザー

2019/11/01 02:32

ご回答ありがとうございます。諸事情により、ローカル環境でIE11という条件は外せないですね。。。かつ、サーバーは使わない前提なので、、、なので、localStorage以外の代替案がないかを模索するという切り口になってしまっている状態です、、、

AkitoshiManabe

2019/11/01 02:55

サーバーを使えないのは厳しいですね。「file: プロトコルのページで使えるかどうか？」がネックになります。

退会済みユーザー

2019/11/01 02:59

ご回答ありがとうございます。ローカル環境で完結させなければいけないので、ちょっと厳しそうですね。。。

行動規範の内容に同意します

ベストアンサー

・URL経由で入力画面からパラメータを渡す
・結果表示するhtmlに入力したパラメータに応じたデータを持たせて表示させることで解決が出来ました。

皆さまご回答ありがとうございました。

投稿2019/11/12 02:30

退会済みユーザー

総合スコア0

IE には古の技術データバインドがあり、ローカルでも使えます。
http://www.makoto3.net/document/databind/databind_all.html
http://www.tohoho-web.com/wwwxx085.htm

データバインドは IE11 では使えないため、IE10 以下互換にする必要があります。

HTML
1<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">

公式の情報が消えていて情報が少ないですが試してもいいかもしれません。

投稿2019/11/06 07:38

x_x

総合スコア13749

退会済みユーザー

2019/11/06 07:44

ご回答ありがとうございます。 IE11という条件は外せないんですよね。。。

x_x

2019/11/06 07:53

IE11 で動きますよ。互換モードというだけです。

x_x

2019/11/06 07:55

Windows 10 では試せていないので、Windows 10 上の IE11 で動かないということならすみません。

退会済みユーザー

2019/11/06 07:56 編集

ご回答ありがとうございます。 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10"> をHTMLに記載してIE10に互換したうえで試してみるということですかね。

x_x

2019/11/06 08:00

そういうことですね。念のため開発者ツールで「Edge」になっていないか確認してみてください。

退会済みユーザー

2019/11/06 08:05

再三のご回答ありがとうございます。データバインドを試してみます。

行動規範の内容に同意します

Flashとか。（下記リンクはデータを保存する機構があったことを言うためのもので、具体的な方法ではありません）

【Flash Player のセーブデータや設定情報の保存場所 - Windows 2000 Blog】
http://blog.livedoor.jp/blackwingcat/archives/1939973.html

投稿2019/11/01 02:59

kei344

総合スコア69596

退会済みユーザー

2019/11/01 05:52

ご回答ありがとうございます。内容確認させて頂きます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

JavaScript：ローカル環境かつブラウザIE11におけるlocalStorageの代替策

前提・実現したいこと

該当のソースコード

試したこと

補足情報

hash,search

関連した質問