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>

我想传递“email”中的用户类型并将其传递到下面的“订阅”表单，该表单位于下一个网页上。我希望它发生，所以他们预先填写了他们在上一页中输入的电子邮件地址。

<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'

Check on jsfiddle

使用＆＃39; sessionStorage＆＃39;相反，本地存储＆＃39;对于时态数据

如何使用上一页的数据/值预填表单

2 个答案: