javascript - 表单数据的本地存储

我有一个必须将表单数据保存在iPad上的要求，此HTML文件将具有基本信息和用于数据收集的表单。

我必须为iPad设计一个页面模板，其中包含照片库，视频库以及与项目相关的一些文本。更像是演示文稿。这是可能的，我们可以将所有文件保存在iPad上，即使用户未连接到Internet，也可以访问。

我面临的问题是客户希望以脱机（不使用Internet）模式存储与表单相关的信息，而我要做的唯一方法是使用本地存储。

由于我是新手，所以我想知道如何从本地存储读取此数据，以及是否可以将其导出到txt文件。

http://codepen.io/anon/pen/gPNMYm

var localStorageAPI = {

    // This method may not be needed as we go along
    // the support is becoming better and better day-by-day
    // http://caniuse.com/#feat=namevalue-storage

    // better to be safe than sorry or get script errors :|
    isSupported: function() {
        return window.localStorage;
    },

    setItem: function(key, value) {
        return localStorage.setItem(key, value);
    },

    getItem: function(key) {
        return localStorage.getItem(key);
    },

    // If do not want to build a wrapper like how I did here but implement
    // setObject() and getObject(), you can create prototype methods on
    // Storage

    // Storing Objects in HTML5 localStorage : http://stackoverflow.com/a/3146971/1015046

    setObject: function(key, object) {
        return localStorage.setItem(key, JSON.stringify(object));
    },

    getObject: function(key) {
        return JSON.parse(localStorage.getItem(key));
    },

    removeItem: function(key) {
        return localStorage.removeItem(key);
    },

    clearAll: function() {
        return localStorage.clear();
    }

};

$(document).ready(function() {

    // Check localStorage support
    if (localStorageAPI.isSupported()) {
        var key = 'longForm';

        // on blur of any form field, save the form data to local storage
        $('.form-control').on('blur', function() {
            // this can be cleaned up better to save
            // only the relevant form data
            // I am saving the entire form data for simplicity

            // convert Form data to Object
            // http://stackoverflow.com/a/17784656/1015046
            var formObj = {};
            $('form').serializeArray().map(function(x) {
                formObj[x.name] = x.value;
            });

            localStorageAPI.setObject(key, formObj);

        });

        // populate existing form data
        var fData = localStorageAPI.getObject(key);
        if (fData) {
            $.each(fData, function(formEle, formEleVal) {
                $('[name=' + formEle + ']').val(formEleVal);
            });
        }

        // delete the local storage key if the form is "successfully submit"
        $('form').submit(function(e) {
            e.preventDefault();

            // AJAX Call to server..

            // Success

            localStorageAPI.removeItem(key);
        });

    } else {
        alert('No Local Storage Support!');
    }

});

我遇到了这个例子。 http://thejackalofjavascript.com/getting-started-with-client-side-storage/

此外，如果我们在ipad上以html页面打开文件，则此localstored基于域将起作用。

由于5BM的限制，我确定不推荐这样做。

我们可以以某种方式在Java脚本文件上存储表单数据吗？

最佳答案

我有一个要求用户将使用平板电脑显示基于HTML的地方
  演示文稿并要求用户提供反馈。他们需要收集
  以这种方式收集数据，因为他们将无法远程连接互联网
  区域。


您可以创建一个数组来存储数据。在onchange事件中设置属性，对象的值；将对象推送到数组。在onsubmit的form事件中，阻止默认操作，请在数组上使用JSON.stringify()，encodeURIComponent()；使用设置了a属性的download元素可将form的结果保存在本地。

var data = [],
  a = document.getElementsByTagName("a")[0];

document.forms["presentation"].onchange = function(event) {
  var val = {};
  val["name"] = event.srcElement.name;
  val["value"] = event.srcElement.value;
  data.push(val);
  event.srcElement.setAttribute("disabled", true);
}

document.forms["presentation"].onsubmit = function(event) {
  event.preventDefault();
  var formData = JSON.stringify(data, null, 2);
  a.download = "formData-" + new Date().getTime();
  // create a text file
  a.href = "data:text/plain," + encodeURIComponent(formData);
  // save `formData` locally as file with timestamp appended to file name
  a.click();
}

document.forms["presentation"].onreset = function(event) {
  var elems = this.querySelectorAll("input, select");
  for (var i = 0; i < elems.length; i++) {
    elems[i].removeAttribute("disabled")
  }
  // empty `data` array
  data.length = 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<form name="presentation">
  <fieldset>
    <select name="color" required>
      <option value="" disabled>select a color</option>
      <option value="green">green</option>
      <option value="gold">gold</option>
      <option value="purple">purple</option>
      <option value="gray">gray</option>
    </select>
    colorful presentation
    <input name="survey" type="radio" value="colorful presentation" />opaque presentation
    <input name="survey" type="radio" value="opaque presentation" />
    <br>
    <label>please leave a brief comment about the presentation
    <input type="text" name="comment" maxlength="20" minlength="5" required placeholder="5-25 charcters, e.g.; 'colorful'" /></label><br />
    <input type="submit" />
    <input type="reset" />
  </fieldset>
</form>
<a></a>

关于javascript - 表单数据的本地存储，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35533107/