0

我正在尝试使用 localStorage 来存储表单中的变量，这样我就可以显示并将它们传递给其他表单，然后反之亦然。

以下是我的代码片段：

第一：创建和更新本地存储变量的 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 变量包含的内容 - 但它是空白的。

不知道我哪里出错了。

4

1 回答 1

1

好的，我想出了一些办法——似乎只有当表单元素具有 name="" 时才有效传递值——我使用了 id=""。

于 2014-03-26T16:47:26.480 回答