![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
今まで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ランキング
-
onchangeイベントを強制的に発...
-
クリックさせたいが、click()が...
-
formのfileの値をhiddenでも持...
-
csvファイルの内容を絞り込みた...
-
javaScriptの変数をJavaの変数...
-
javascriptからphpの呼び出し
-
小窓が残像を残して移動
-
IE8で<input type="file">のテ...
-
JSPファイルにJavaScriptを埋め...
-
JavaScriptのfileオブジェクト...
-
「~まであと○○日」という表示...
-
ポップアップブロックにならな...
-
iOSのみダブルタップが必要
-
オークションサイト一括検索サ...
-
テキストフィールド未入力の場...
-
ひとつのボタンでタイマーを動...
-
onclickが動作しない
-
JavaScript 正規表現の()
-
onClickがinput type="image"だ...
-
開いた子ウィンドウにあるボタ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
クリックさせたいが、click()が...
-
onclickが動作しない
-
追加ボタンを押した際に ok ボ...
-
javaScriptの変数をJavaの変数...
-
innerHTML内では改行は禁止?
-
formのfileの値をhiddenでも持...
-
ボタンかリンクをクリックする...
-
JavaScriptのfileオブジェクト...
-
onClickがinput type="image"だ...
-
javascriptで作成されたテーブ...
-
開いた子ウィンドウにあるボタ...
-
コードレビューをお願いします。
-
ボタンをクリックするとテキス...
-
ポップアップブロックにならな...
-
VB.NETで<Input>タグ、<text...
-
ボタンをクリックして文字を置...
-
テキストフィールド未入力の場...
-
URL 判定
-
javascriptでtextareaに文字列...
おすすめ情報