今までCookieを使っていたのですが、最近localStorageの存在を知り使ってみました。
質問ですが、サンプルを参考に下記のフォームを作りました。
無事に値を取り出せ、document.writeで文字の方は表示できるのですが、
img srcの画像の表示方法がわかりません。
document.write("<img src='localStorage.uUrl'>");←これが間違っているのはわかるのですが、
1.htmlのURLフォーム欄に、http://cmm001.goo.ne.jp/img/logo/goo.gif
を書いて、2.htmlで表示する方法を教えて下さい。
----1.html----
<script>
(function(){
// 最初にローカルストレージが使えるか調べる。使えない場合は何もしない
if (!window.localStorage) return;
// ローカルストレージからフォームにデータを戻す
document.getElementById("uName").value = window.localStorage.getItem("uName") || "";
document.getElementById("uUrl").value = window.localStorage.getItem("uUrl") || "";
// データ送信時にローカルストレージにフォーム内容を保存する
document.getElementById("dataForm").addEventListener("submit", function(){
window.localStorage.setItem("uName", document.getElementById("uName").value);
window.localStorage.setItem("uUrl", document.getElementById("uUrl").value);
alert("データを保存しました");
}, true);
})();
</script>
<h1>ローカルストレージを利用したフォーム</h1>
<form id="dataForm" method="post" action="" onsubmit="return false">
名前:<input type="text" name="uName" id="uName"><br>
URL:<input type="text" name="uUrl" id="uUrl"><br>
<input type="submit" value="送信">
</form>
----2.html----
<script>
(function(){
// ローカルストレージからフォームにデータを戻す
document.getElementById("uName").value = window.localStorage.getItem("uName") || "";
document.getElementById("uUrl").value = window.localStorage.getItem("uUrl") || "";
document.write(localStorage.uUrl);
document.write("<img src='localStorage.uUrl'>");
})();
</script>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- CGI htmlからパラメータで、cgiに渡したい。 1 2023/02/06 16:15
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
クリックさせたいが、click()が...
-
onclickが動作しない
-
VB.NETで<Input>タグ、<text...
-
onchangeイベントを強制的に発...
-
JavaScriptのfileオブジェクト...
-
インラインフレームから親ウィ...
-
onClickがinput type="image"だ...
-
javascriptでtextareaに文字列...
-
javaScriptの変数をJavaの変数...
-
return trueとreturn falseの用...
-
プルダウンで選択すると、DBの...
-
onClickとsubmitの処理順序
-
条件により、リンク先に画面遷...
-
ボタンを押すとチェックボック...
-
【jQuery】input nameの文字列...
-
Selectの中身をfor文で入れる
-
確認ダイアログの出し方(JavaS...
-
1つのform内に2つのsubmitボタ...
-
VB.NET DateTimeの型について
-
<input>の選択肢をプルダウンメ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
JavaScriptのfileオブジェクト...
-
クリックさせたいが、click()が...
-
javaScriptの変数をJavaの変数...
-
innerHTML内では改行は禁止?
-
VB.NETで<Input>タグ、<text...
-
BackSpaceしたい(QNo.2734284の...
-
formのfileの値をhiddenでも持...
-
onclickが動作しない
-
ボタンかリンクをクリックする...
-
WordpressのCocoonというテーマ...
-
フォームのNAMEを変数に格納し...
-
JavaScriptでの足し算処理について
-
インラインフレームから親ウィ...
-
タグ実験で
-
リスト追加
-
localStorage
-
javascriptでtextareaに文字列...
-
onClickがinput type="image"だ...
-
ボタンで配列に代入
おすすめ情報
