本地存儲表單數據

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

我有哪裏的用戶將使用平板電腦來展示基於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>