表单数据的本地存储 [英] Local store for form data
问题描述
我有一个必须将表单数据保存在iPad上的要求，此HTML文件将提供基本信息和用于数据收集的表单.
I have a requirement where i have to save Form data on iPad, This HTML file will have basic information and form for data collection.
我必须为iPad设计一个页面模板，其中包含照片库，视频库以及一些与项目有关的文本.更像是演示文稿.这是有可能的，我们可以将所有文件保存在iPad上，即使用户未连接到互联网，用户也可以访问.
I have to design one page template for iPad, with Photo Gallery, Video Gallery and some text related to project.. More like a presentation. This much is possible and we can keep all the file on iPad and user can access then even if they are not connected to internet.
我面临的问题是，客户希望以脱机(不使用Internet)模式存储与表单相关的信息，而我要做的唯一方法是使用本地存储.
Issue i am facing is that client want to store form related information in offline (Without internet) mode and only way for me to do it is to use local store.
由于我是新手，所以我想知道如何从本地存储中读取此数据，以及是否可以将其导出到txt文件.
Since i am new to this i would like to know how i can read this data back from the local store and if it is possible to export this to txt file.
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-存储/
I came across this example. http://thejackalofjavascript.com/getting-started-with-client-side-storage/
如果我们在ipad上以html页面打开文件，那么此本地存储是基于域的，就可以使用.
Besides this localstored is domain based will it work if we open file as html page on ipad ..
由于5BM的限制，我确定不推荐这样做.
I am sure this is not recommended way of doing thing due to 5BM limitation.
我们能以某种方式在Java脚本文件中存储表单数据吗?
Can we somehow store form data on java-script file.
推荐答案
我有一个要求，用户将使用平板电脑显示基于HTML的内容 演示文稿，并要求用户提供反馈.他们需要收集 以这种方式收集数据，因为他们将无法远程连接互联网 区域.
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的结果保存在本地.
You can create an array to store data. At onchange event to set properties , values of an object; push object to array. At onsubmit event of form, prevent default action, use JSON.stringify() , encodeURIComponent() on array; use a element with download attribute set to save results of form locally.
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>
这篇关于表单数据的本地存储的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
