如何使用localstorage一次性将所有输入字段值存储在一个包装器中
how can i store all input fields value within one wrapper using localstorage at once?
假设我有以下内容:
<div id="main">
<div id="wrapper">
<input/>
<input/>
<input/>
</div>
</div>
我想使用localstorage来存储整个包装器。我正在做这个:
function save(){
var nodeWrapper = $("#wrapper").html();
localStorage.setItem("wrapper", nodeWrapper);
}
function restore(){
var nodeWrapper = localStorage.getItem("wrapper");
$("#wrapper").html(nodeWrapper);
}
Q1:我发现输入中的值没有被存储。我只得到三个输入。我知道我可以一个一个地存储这些输入,但我怎么能一次存储它们呢?例如:我在包装器下有更多的字段,除了逐个存储之外,还有什么方法可以轻松地存储它们吗?
Q2:我也发现它不工作,如果我存储节点本身,而不是它的innerHTML。localstorage可以存储节点吗?
试试这个http://jsfiddle.net/lotusgodkk/GCu2D/103/:而不是使用。html(),使用append()
或prepend()
$(document).ready(function () {
localStorage.setItem("wrapper", $('#main').html());
var nodeWrapper = localStorage.getItem("wrapper");
$('#main').append(nodeWrapper);
});
如果您只需要输入值及其名称,您可以使用serializeArray():
$('#wrapper input').serializeArray();
它将返回一个数组,其中包含输入的名称和值。
HTML:<div id="main">
<div id="wrapper">
<input value="1" name="a" />
<input value="2" name="b" />
<input value="3" name="c" />
</div>
</div>
最直接的方法可能是将数组的值存储为JSON编码的字符串。这意味着遍历输入以存储和恢复值,并对JSON字符串进行编码和解码。当您使用jQuery时,答案也将使用jQuery http://jsfiddle.net/FC2pc/1/
function save() {
var values = [];
$("#wrapper input").each(function (i, e) {
values.push(e.value);
});
localStorage.setItem('input_cache', JSON.stringify(values));
}
function restore() {
var values = $.parseJSON(localStorage.getItem('input_cache'));
$("#wrapper input").each(function (i, e) {
e.value = values[i];
});
}
相关文章:
- 为什么要包装每一个原型“;类“;JS中具有匿名函数的对象
- 从工作日结束到下一个工作日开始的完整日历JS包装时间
- 如何制作href链接和<李>在一个包装中
- 切换一个元素并将其余元素隐藏在同一包装类下
- 如何使用jquery将每4个元素包装在一个
- 标签中
- 我怎样才能把p中的一个单词包装在a标签中呢
- jquery+调用来自另一个Javascript包装器的函数
- 当uib分页被包装在另一个指令中时,AngularJS表数据没有更新
- ES6类:在另一个函数中包装方法实现
- 如何将所有下一个元素包装到
- Jquery使用Slice将前N个元素包装成一个新元素,并将其余N个元素打包成另一个新元素
- 调用一个按钮点击,该按钮被包装在html页面内的另一个html标记中
- 最佳实践:在 AngularJS 中将一个模板包装在另一个模板中
- 为什么我们将 Angular 应用程序包装在一个函数中
- 使用 jQuery 将一个 HTML 标记包装在另一个标签中
- 使用 Jquery 将元素的一些文本包装在一个范围中
- 将对象内部的参数包装给函数是一个坏主意吗?
- 循环访问多个元素并为每个元素添加一个包装器
- 如何居中一个包装潜水和补偿滚动条
- 如何使用localstorage一次性将所有输入字段值存储在一个包装器中