使用Phonegap应用程序中的JavaScript将表单数据保存到本地存储

Question

我有一个简单的表单，我想接受数据，并将每个输入存储为用作一次性设置的本地存储变量。

以下是我目前的JavaScript和HTML表单：

<script type="text/javascript">
    function accountSetup(form){
        localStorage.payDayDate = form.setPayDayDate.value;
        localStorage.monthlyTakeHome = form.setMonthlyTakehome.value;
        localStorage.monthlySavingsTarget = form.setSavingsTarget.value;
        console.log("set up complete again");
    }
</script>

我也尝试过document.getElementById（“setPayDayDate”）。value（）;如果您认为语法不正确。

<form>
        <label>
            Date of pay day:
            <input type="text" id="setPayDayDate" placeholder="23" />
        </label>
        <label>
            Monthly takehome:
            <input type="text" id="setMonthlyTakehome" placeholder="£800" />
        </label>
        <label>
            Savings target:
            <input type="text" id="setSavingsTarget" placeholder="£200" />
        </label>
        <input type="submit" value="Calculate" onClick="accountSetup(this.form)" />
    </form>

我还假设因为我没有设置一个方法或操作，页面只会刷新但是本地存储变量已被设置？我确实有div用于显示新设置的变量，但在表单提交后它们仍然显示为空。

是否缺少某种常见做法？感谢任何建议，谢谢。

更新

控制台日志中没有消息/错误

Answer 1

好的，所以这有很多不妥之处。我的第一个线索来自这个非常好的YouTube视频：

https://www.youtube.com/watch?v=BVo3nnloZzw

使用我在那里学到的东西，我能够成功地收集，存储然后表示表单数据。这是更新的代码：

<script type="text/javascript">
    function accountSetup(){
        var submittedPayDayDate = document.getElementById("setPayDayDate").value;
        var submittedMonthlyTakehome = document.getElementById("setMonthlyTakehome").value;
        var submittedSavingsTarget = document.getElementById("setSavingsTarget").value;
        window.localStorage.setItem("payDayDate", submittedPayDayDate);
        window.localStorage.setItem("monthlyTakehome", submittedMonthlyTakehome);
        window.localStorage.setItem("monthlySavingsTarget", submittedSavingsTarget);
        return false;
    }
</script>

<form method="post" onSubmit="return accountSetup()" data-ajax="false">
        <label>
            Date of pay day:
            <input type="text" id="setPayDayDate" name="setPayDayDate" placeholder="23" />
        </label>
        <label>
            Monthly takehome:
            <input type="text" id="setMonthlyTakehome" name="setMonthlyTakehome" placeholder="£800" />
        </label>
        <label>
            Savings target:
            <input type="text" id="setSavingsTarget" name="setSavingsTarget" placeholder="£200" />
        </label>
        <input type="submit" value="Calculate!" />
    </form>

然后使用收集的数据使用此行代码：

window.localStorage.getItem("varName");

我希望这对某人有用。

Answer 2

使用name="setPayDayDate"取代/加入id=""上的form inputs。