如何使用上一頁中的數據/值預先填寫表格

Question

試圖弄清楚如何通過本地/會話存儲傳遞數據。

這是我的表格

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fa fa-times"></i></span></button>
    <h4 id="labelConvert" class="modal-title">Like what you see? See even more!</h4>
</div>
<div class="modal-body"> <img class="img-responsive img-spacer margin-bottom-30" src="assets/img/features/cleardent/kiosk.png" alt="iPad Kiosk helps with gathering patient in-take">
    <p>Book a demo and one of our friendly consultants can walk you through all the benefits your practice can expect when you choose to implement Kiosk at your practice. Plus, we have many other amazing features that we would be happy to show you as well!</p>
    <!-- Demo Menu-->
    <form action="#" method="post" id="demo-formPopup" name="demo-formPopup" class="sky-form" onSubmit="return false;">
        <fieldset>
            <label class="input"><i class="icon-prepend fa fa-user"></i>
                <input type="text" name="demo-name" id="demo-namePopup" required placeholder="Your name">
            </label>
            <label class="input"><i class="icon-prepend fa fa-envelope"></i>
                <input type="email" name="demo-email" id="demo-emailPopup" required placeholder="Your email">
            </label>
            <label class="input"><i class="icon-prepend fa fa-phone"></i>
                <input type="tel" name="demo-phone" id="demo-phonePopup" required placeholder="Your phone number">
            </label>
            <label class="input"><i class="icon-prepend fa fa-commenting"></i>
                <input type="text" name="demo-notes" placeholder="Additional notes to us">
            </label>
            <input class="hidden" type="text" id="n7Q2326JYZ334s58FWq3TrPopup" name="n7Q2326JYZ334s58FWq3Tr" value="bg62U79DPNCTbBvpZHueZG" tabindex="-1" aria-hidden="true">
            <input class="hidden" type="text" id="campaignPopup" name="campaign" value="" tabindex="-1" aria-hidden="true">
        </fieldset>
        <footer>
            <div class="form-buttons">
                <button id="btnReqDemoPopup" class="btn-u pull-left"><i class="fa fa-paper-plane fa-fw"></i> Book</button>
                <button type="button" class="btn-u btn-brd pull-right" data-dismiss="modal"><i class="fa fa-times fa-fw"></i> Close</button>
            </div>
            <div class="form-sub-msg">
                <p>Sending a demo request, please wait&hellip;</p>
            </div>
        </footer>
    </form>
</div>

我想傳遞用戶在“電子郵件”中鍵入的內容，並將其傳遞給下面的“訂閱”表單，該表單位於下一個網頁上。 我希望發生這種情況，因此他們已經從上一頁中鍵入的內容中預先填寫了電子郵件地址。

<div id="mc_embed_signup" class="row margin-bottom-20">
    <form action="//cleardent.us2.list-manage.com/subscribe/post?u=c94a01df02408fee7e80ba656&amp;id=3d0b9b204d&amp;MERGE3=Web" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="form-inline" target="_blank">
        <div class="col-xs-12">
            <div class="input-group">
                <label class="sr-only" for="mce-EMAIL">Email address</label>
                <span class="input-group-addon colour-cleardent"><i class="fa fa-newspaper-o fa-fw"></i></span>
                <input type="email" name="EMAIL" class="form-control" id="mce-EMAIL" placeholder="Email address" required>
                <span class="input-group-btn">
                    <button type="submit" id="mc-embedded-subscribe" class="btn-u form-control">Subscribe</button>
                </span> 
            </div>
        </div>
        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
        <div style="position: absolute; left: -5000px;" aria-hidden="true">
            <input type="text" name="b_c94a01df02408fee7e80ba656_3d0b9b204d" tabindex="-1" value="">
        </div>
    </form>
</div>

本地存儲應如何工作？ 我對編碼非常陌生，這對我來說是一項繁重的任務。 有人可以幫我理解嗎？

謝謝，

傑森

Answer 1

您可以通過window.localStorage訪問localStorage 。 如果您已經使用Javascript處理表單提交，那么在該代碼中，我將添加：

var storage = window.localStorage;
var userEmail = document.getElementById('demo-emailPopup').value;
storage.setItem('email', userEmail);

當第二頁加載時：

var storage = window.localStorage;
var userEmail = storage.getItem('email');
document.getElementById('mce-EMAIL').value = userEmail;

Answer 2

這是使用localStorage保存數據的功能：

localStorage.setItem('key', 'value');
localStorage.getItem('key'); //return: 'value'

檢查jsfiddle

使用“ sessionStorage”而不是“ localStorage”存儲臨時數據