Question

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

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

我面临的问题是客户想要在离线（没有互联网）模式下存储表格相关信息，我只能这样做才能使用本地商店。

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

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页面它会工作..

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

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

Answer 1

我要求用户使用平板电脑来显示基于HTML的内容演示并要求用户提供反馈。他们需要收集以这种方式的数据，因为他们不会在远程互联网连接区域。

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

表单数据的本地存储

1 个答案: