javascript - 表单数据的本地存储

Question

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

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

我面临的问题是客户想在离线(没有互联网)模式下存储表单相关信息，我唯一的方法就是使用本地存储。

因为我是新手，所以我想知道如何从本地存储读回这些数据，以及是否可以将其导出到 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/

此外，这个 localstored 是基于域的，如果我们在 ipad 上将文件作为 html 页面打开，它会工作吗..

由于 5BM 的限制，我确信这不是推荐的做事方式。

我们能否以某种方式将表单数据存储在 java 脚本文件中。

Answer 1

I have a requirement where user will use tablet to show HTML based presentation and ask user to give there feedback. They need to collect data in this manner as they wont have internet connectivity in remote area.

您可以创建一个数组来存储数据。在 onchange 事件中设置对象的属性、值；将对象插入数组。在 form 的 onsubmit 事件中，防止默认操作，在数组上使用 JSON.stringify() , encodeURIComponent() ;使用设置了 download 属性的 a 元素在本地保存 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>