如何为（Jquery序列化）表单创建（JSON）本地存储

我需要创建2个输入框，文本区与提交按钮。我必须使用jQuery序列化数组和JSON本地存储。单击“提交”按钮后，字段应为空，以供其他使用，并且需要在“DivPrintValue”下显示发布的数据（IMP：提交后需要在页面上显示整洁），并且在刷新页面后也需要保存。这就是我到目前为止所做的：

<div id="submitted">
    <h3>Submitted Ideas</h3>
<div id="DivPrintValue">

 </div>
</div>

<form id="titleForm">
    <h3>Add Idea</h3><br>
    <input type="text" name="title" id="title" placeholder="Title" size="38" required />
    <br>
    <textarea name="description" id="description" placeholder="description" cols="29" required oninvalid="this.setCustomValidity('write your message here!')"></textarea>
    <br>
    <input type="text" name="category" id="category" placeholder="category" size="38" />
    <br><br>
    <input type="submit" value="add idea">
    </div>
</form>

提交的意见
添加想法

本地存储：

$(function () {

// Array
var myIdeas = [];

function printToScreen(myValues) {
    if (myIdeas.length > 0) {
        $("#DivPrintValue").html('');
        myValues.forEach(function (item, index) {
            item.forEach(function (itm, indx) {
                $("#DivPrintValue").append(itm.name + " -" + itm.value + "<br>");
            })
        })
    }
}

//page load  or refreash
if (localStorage.getItem("ideas") !== null) {
    var localValues = JSON.parse(localStorage.ideas);
    if (myIdeas.length <= 0) {
        myIdeas = localValues;
    }
    printToScreen(localValues);
}

$("#titleForm").submit(function (e) {
e.preventDefault();

var formValues = $(this).serializeArray();

myIdeas.push(formValues);

localStorage.setItem("ideas", JSON.stringify(myIdeas));

var myValues = JSON.parse(localStorage.ideas);

printToScreen(myValues);

this.reset();
})

})

$（函数（）{
//排列
var myIdeas=[]；
功能printToScreen（我的值）{
如果（myIdeas.length>0）{
$（“#DivPrintValue”）.html（“”）；
forEach（函数（项、索引）{
项目.forEach（功能（itm、indx）{
$（“#DivPrintValue”）。追加（itm.name+“-”+itm.value+“
”）；
})
})
}
}
//页面加载或重新读取
if（localStorage.getItem（“ideas”）！==null）{
var localValues=JSON.parse（localStorage.ideas）；
如果（myIdeas.length您可以创建一个变量来存储
$（this）.serializeArray（）
作为
JSON.stringify（）
，
.append（）
值到
#submitted
，在
本地存储设置值，调用
表单上的
.reset（）
方法


$（“表格”）。提交（功能（e）{
e、 预防默认值（）；
//序列化`表单`
var values=$（this.serializeArray（）；
forEach（函数（项、索引）{
$（“#已提交”）.append（item.name+“”+item.value+“
”）；
})
//重置`表格`
这是reset（）；
//在“本地存储”中设置“值”`
//如果（！localStorage.form）
setItem（“表单”，JSON.stringify（值））
})

提交的意见
添加想法










提交的数据需要显示在“提交的想法”下，即使刷新页面后也要保持在“提交的想法”下。您所说的“喜欢发表的评论”是什么意思？
form
在调用
this.reset（）后应重置为初始值
但它需要在不带逗号和大括号的情况下显示，并应在刷新后保存在页面上。如果表单为空，则表单将继续提交。提交后应如下所示：标题：阅读书籍下一行描述：等等等等，下一行类别：……您可以循环查看
$（此）.serializeArray（）
将
名称
，
值
对附加到
#提交的
，而不使用
JSON.stringify（）
，尽管在
localStorage
中将对象设置为字符串时使用
JSON.stringify（）
。页面刷新后，您可以再次使用
JSON.parse（）
要从
localStorage
解析对象的字符串版本，请循环数组中的对象，并将
名称
，
值
附加到
#已提交
。不遵循“如果表单为空，则表单将继续提交。提交后应如下所示：”“
表单
无法同时重置和保留值？我尝试了您重新开始的方式，但我无法理解。我单击了提交按钮，但没有输入值，它继续提交”[{“名称”：“标题”、“值”：“}，{“名称”：“说明”、“值”：“}，{“名称”：“类别”、“值”：“}]”等等。我单击了提交按钮，但没有输入值，它继续提交“[{”name:“title”，“value:“}，{”name:“description”，“value:“}，{”name:“categor”‌​y、“值”：“}]”on和on“是，如果用户未输入值，则值应为空字符串。当用户未输入值时，您是否尝试在提交事件中使用以前提交的
表单中的值？不确定您正在尝试实现什么？