如何在localStorage上存储表单值?

时间:2014-09-13 15:57:33

标签: html5 forms jquery-mobile submit local-storage

我需要为大学工作制作一个JqueryMobile应用程序, 我有那种形式 -

<form name="local_storage_form" method="post" action="#" data-ajax="false" autocomplete="on" data-  theme="e" style="padding: 10px;" onsubmit="save_data()">


     <label for="id">identity card number</label><input type="text" name="id" id="id" placeholder="identity card number..." data-theme="e" required class="localStore">
     <label for="hphone">Home Phone Number</label><input type="tel" name="hphone" id="hphone" placeholder="Home Phone Number..." data-theme="e" class="localStore">
     <label for="mphone">Mobile Phone Number</label><input type="text" name="mphone" id="mphone" placeholder="Mobile Phone Number..." data-theme="e" required class="localStore" oninvalid="setCustomValidity('Invaild Phone Number (05********)')">
     <label for="bdate">Birth Date</label><input type="date" name="bdate" placeholder="Birth Date..." id="bdate" data-theme="e" required class="localStore">
     <label for="email">Email Address</label><input type="email" name="email" id="email" autocomplete="off" placeholder="Email Address..." data-theme="e" required class="localStore">
     <button type="button" value="Save" id="Save" data-theme="a">Submit</button>
     </form>

我需要将所有细节存储在localstorage中并在之后获取, 当我点击提交按钮时,我怎么能这样做?

不过,它是一个离线网站,所以当我点击提交时,它会给我一个错误。

1 个答案:

答案 0 :(得分:1)

查看Jquery API文档。

$('#local_storage_form').submit(function(e) {
    e.preventDefault(); // prevent the form from attempting to send to the web server
    var $inputs = $('#local_storage_form :input');

    var values = {};
    $inputs.each(function() {
        values[this.name] = $(this).val();
    });

    localStorage.setItem('testForm', JSON.stringify(values));
});