0
我試圖使用localStorage來存儲Forms中的變量，所以我可以顯示並將它們傳遞給其他窗體，然後反之亦然。在XDK中使用localStorage
下面是我的代碼片段：
1：JavaScript函數來創建和更新本地存儲變量。
function showPicture()
{
var picture = document.getElementById("pic2");
var pic1src = localStorage.imagesrc;
picture.src = pic1src;
document.form2.locationview.value = localStorage.location;
document.form2.titleview.value = localStorage.title;
document.form2.metadataview.value = localStorage.metadata;
}
function saveForm()
{
localStorage.location = document.form1.location.value;
localStorage.title = document.form1.title.value;
localStorage.metadata = document.form1.metadata.value;
}
function updateForm()
{
localStorage.location = document.form2.locationview.value;
localStorage.title = document.form2.titleview.value;
localStorage.metadata = document.form2.metadataview.value;
}
function showStorage()
{
document.getElementById("page_3").innerHTML = localStorage.location;
}
第二：我的HTML在哪裏顯示變量。
<div id="afui" class="ios">
<div id="header"></div>
<div id="content" style="">
<div class="panel" title="PhotoTagger" data-nav="nav_0" id="main" selected="selected"
style="background-image: url(images/splash.jpg);"
data-appbuilder-object="page" data-footer="footer_1">
<div class="centerbutton">
<a class="button" href="#page_1" data-appbuilder-object="button" data-transition="slide"
id="button_1" onclick="capturePhoto();">Store data in EXIF</a>
</div>
</div>
<div class="panel" title="Take Picture" data-nav="nav_0" id="page_1" data-appbuilder-object="page"
style="" data-footer="footer_1">
<form style="width: 100%;min-height: 50px;" data-appbuilder-object="form" class=""
id="form1" name="form1">
<img src="images/EmptyBox-Phone.png" id="pic1" width="150px" height="200px">
<div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
<label for="">Location</label>
<input type="text" style="float:left;" id="location" placeholder="">
</div>
<div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
<label for="">Title</label>
<input type="text" style="float:left;" id="title" placeholder="">
</div>
<div class="textarea_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="textarea">
<label for="">MetaData</label>
<textarea id="metadata"></textarea>
</div>
<a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
id="" onclick="saveForm();">Save</a>
</form>
</div>
<div class="panel" title="View Picture" data-nav="nav_0" id="page_2" data-appbuilder-object="page"
style="" data-footer="footer_1">
<form style="width: 100%;min-height: 50px;" data-appbuilder-object="form" class=""
id="form2" name="form2">
<img src="images/EmptyBox-Phone.png" id="pic2" width="150px" height="200px" style=""
class="">
<div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
<label for="">Location</label>
<input type="text" style="float:left;" id="locationview" placeholder="">
</div>
<div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
<label for="">Title</label>
<input type="text" style="float:left;" id="titleview" placeholder="">
</div>
<div class="textarea_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="textarea">
<label for="">MetaData</label>
<textarea id="metadataview"></textarea>
</div>
<a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
id="" onclick="updateForm();">Update</a>
</form>
</div>
<div class="panel" title="Test Local Storage" data-footer="footer_1" data-nav="nav_0"
id="page_3" data-appbuilder-object="page" style=""></div>
</div>
<div id="navbar"> <a href="#main" class="icon home">Home</a>
</div>
<header id="header_0" data-appbuilder-object="header">
<a id="backButton" href="#" class="button back" style="visibility: visible; ">Back</a>
<h1 id="pageTitle" class="">PhotoTagger</h1>
</header>
<nav id="nav_0" data-appbuilder-object="nav">
<h1>Side Menu</h1>
</nav>
<footer id="footer_1" data-appbuilder-object="footer"><a href="#main" class="icon home">Home</a><a href="#page_1" class="icon camera"
onclick="capturePhoto();">Take Picture</a>
<a href="#page_2" class="icon picture" onclick="showPicture();">View Pictures</a>
<a href="#page_3" class="icon database" onclick="showStorage();">Local Storage</a>
</footer>
</div>
第三頁是一個測試，只是看什麼localStorage.location變量包含已完成第一個表格之後 - 但它是空白。
不知道我哪裏去錯了。