Локальный магазин данных формы

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 является домен на основе будет работать, если мы открываем файл как HTML-страницы на IPad ..

Я уверен, что это не рекомендуется способ делать вещи из-за 5BM ограничения.

Можем ли мы как-то сохранить данные формы в файле java-script.

Answer 1

У меня есть требование, чтобы пользователь использовал планшет, чтобы показать презентацию на основе HTML и попросить пользователя дать отклик. Им необходимо собрать данные таким образом, поскольку они не имеют подключения к интернету в удаленной области .

Вы можете создать массив для хранения данных. At 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>