javascript - 在 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");

我希望这对某人有用。