localStorage

質問

今まで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="uUｒｌ" 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>

回答No.1

b0a0a · ベストアンサー

"<img src='localStorage.uUrl'>"
↓
"<img src='"+localStorage.uUrl+"'>"

お礼

できました！
画像が表示されました。

ありがとうございました(・ω<)