使用localstorage HTML5保存表单 [英] Save Form using localstorage HTML5

问题描述

有没有办法将从中保存 localstorage
并重新使用它，就像这样：

form :::::::::::: saveINTO :::::::::::::::> localstorage

表格< :::::::::::: getFROM ::::::::::::::: localstorage

用数据填充表单后，我想将表单的内容保存在本地存储中，然后当我想用存储的数据填充其他表单时。

 < form> 
名字：< input type =textname =firstname>< br> 
姓氏：< input type =textname =lastname> 
< button onclick =StoreData（）;>存储到本地存储< / button> 
< / form> 
< button onclick =RenderForm（）;>从数据再次渲染< / button> 
< form id =Copyform>< form> 
  

JSFIDDLE
please JSFIDDLE answer。

UPDATED

解决方案

你可以很容易地做到这一点，但如果你想存储一个数组，你需要先序列化或编码它，因为localStorage不处理数组。例如：

var yourObject = $（'＃your-form'）。serializeObject（）;

为了节省您的费用：

localStorage ['variablename'] = JSON.stringify您的对象）或 localStorage.setItem（'testObject'，JSON.stringify（yourObject））;

并检索： JSON.parse（localStorage ['yourObject']）; 或 JSON.parse（localStorage.getItem（'yourObject '））; 然后字段值可以作为 yourObject.fieldName ;

编辑：在上面的例子中，我使用了一个jQuery插件serializeObject。使用的代码如下。 （如果你喜欢，你可以使用serializeArray，但是你必须做更多的工作才能使你的数据在检索后可用）：

  jQuery .fn.serializeObject = function（）{
 var formData = {}; 
 var formArray = this.serializeArray（）; 
 
 for（var i = 0，n = formArray.length; i< n; ++ i）
 formData [formArray [i] .name] = formArray [i] .value ; 
 
返回formData; 
}; 
  

Is there a way to Save from into localstorage and reuse it again, like this logic:

form ::::::::::::saveINTO:::::::::::::::> localstorage

form <::::::::::::getFROM::::::::::::::: localstorage

after filling the form with data , I want to save the form with its contents in the localstorage, then when i want to fill other from with stored data.

<form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
    <button onclick="StoreData();">store into local storage</button>
</form> 
<button onclick="RenderForm();">render from data again </button>
<form id="Copyform"><form>

JSFIDDLE please JSFIDDLE answer.

UPDATED

解决方案

You can do that easily, but if you want to store an array you will need to serialize or encode it first because localStorage doesn't deal with arrays. e.g.:

var yourObject = $('#your-form').serializeObject();

To save you do either:

localStorage['variablename'] = JSON.stringify(yourObject) or localStorage.setItem('testObject', JSON.stringify(yourObject));

and to retrieve: JSON.parse(localStorage['yourObject']); or JSON.parse(localStorage.getItem('yourObject')); and then the field values are available as yourObject.fieldName;

EDIT: In the example above I used serializeObject which is a jQuery plugin. The code used is below. (You can use serializeArray if you prefer but you will have to do more work to make your data usable once retrieved):

jQuery.fn.serializeObject = function () {
  var formData = {};
  var formArray = this.serializeArray();

  for(var i = 0, n = formArray.length; i < n; ++i)
    formData[formArray[i].name] = formArray[i].value;

  return formData;
};

这篇关于使用localstorage HTML5保存表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！