質問: $(this).serializeArray(); $.each(param, function(index,elem){ localStorage.setItem(elem.name,elem.value); }); }); ``` localstorageには以下のkeyとvalueが保存されています。 foo abc bar 123 page baz ご教授お願いいたします。 ----- 追記 ----- データベースのようなCGIを使っており、データファイル(data.cgi)からformで送信した内容に合致するデータを表示しています。 データのカテゴリがname、保存データがvalueとなっています。 form method="get"にするとmts10806さんの仰る通りデータも問題なく抽出でき、 またブラウザを再度開いてリロードしてもURLにパラメータが付与されているので問題なくデータが抽出されたページが開きます。 ただ、できればURLにはパラメータ(https://example.com/hoge.cgi?foo=abc&bar=123&page=baz)を付与させたくなく パラメータを付与(URLに表示)せずに(https://example.com/hoge.cgiで)読み込めないかと思っております。
回答: データ抽出はcgiプログラムで行っているので無理です。 localstorageはjavascriptでクライアント側のプログラム、 cgiはサーバー側のプログラム。 cgiはサーバー側のプログラムのため、クライアント側で画面が表示される前に全ての処理が行われ、 「結果を表示するHTMLをprint」して処理を終了してクライアントが「結果のHTMLを受け取って表示」しています(正しい表現ではないかもしれませんがざっくり言うとこんな感じ) 後からいくらlocalstorageで検索条件をセットしてもcgi側の仕事は既に終わっているわけです。 つまり、今の状態でGETでURLに条件を含ませるしか方法はありません。 ただし、全くないかと言えばそうではないです。 ajaxという仕組みがあり、javascript側からサーバー側の言語を呼び出すことができます。 * 初心者目線でAjaxの説明 * 一般的なAjax通信を実装するには?($.ajax) * JqueryでAjax!CGIを通過後、ページ遷移なくHTMLを変化させる方法 画面遷移を伴うSUBMITをせずにサーバー側の言語を呼び出し、処理させて結果を受け取ることができるわけです。 サーバー側の言語を実行できるのでDBへのアクセスもできますので、 やり方次第ではありますがサーバー側の言語でできることはほとんどできます。 ロジック的には以下のような感じ 1. hoge.cgiのonloadでlocalstorageから値を受け取り 2. その値をajaxでcgiに渡して処理を実行し 3. 結果を受け取ってHTMLに整形して出力する ajaxで要件が実現可能かどうかは今サンプルコードをここでもらうより 色々調べてみてやって見られたほうが良いかと思います。 追記: kei344さんが仰るようにセッションを利用される方が実装が簡単かもしれません。