如何将多个文本添加到本地存储HTML5
[英]How to add multiple text to local Storage HTML5
问题描述
我创建了一些函数和一些带有表格的输入框，以在重新加载页面时显示数据。 我遇到的问题是如何获取多个插入到本地存储，以及如何使用循环语句显示表上的所有数据。 还有一种方法可以立即显示数据而不是重新加载。 我想我只是对本地存储感到困惑，我试图查看其工作原理。 https://jsfiddle.net/zzLumrsd/
<!DOCTYPE>
<html>
<head>
<title> Local storage</title>
<style type="text/css">
table#table1{
width: 10%;
background-color: #gray;
}
</style>
<script>
function saveMy(){
var fieldValue = document.getElementById('textfield').value;
localStorage.setItem('text', fieldValue);
}
function load(){
var storedValue = localStorage.getItem('text');
if(storedValue){
document.getElementById('textfield2').value = storedValue;
}
}
function removeMy() {
document.getElementById('textfield').value = '';
localStorage.removeItem('text');
}
</script>
</head>
<body onload="load()">
<input type="text" id="textfield" />
<input type="button" value="save" onclick="saveMy()"/>
<input type="button" value="remove" onclick="removeMy()"/>
<hr/>
<table id="table1" border="1">
<tr>
<th>text</th>
</tr>
<tr>
<td>
<input type="text" id="textfield2" />
</td>
</tr>
</table>
</body>
</html>
1 个解决方案
解决方案1
3 已采纳 2015-04-07 17:16:19
据我了解，您想将多个字符串存储到localStorage 。 您可以使用以下方法实现此目的：
怎么样
为此，您将所有字符串存储在一个数组中。 然后，我们可以将其放入localStorage。 在示例中，我将使用“名称”作为localStorage项目名称。 数组无法放入localStorage，因此我们必须使用JSON.stringify将其设置为String来实现。
例子
设定项目
var vals = [];
vals.push('Bob');//Add the text 'item1' to vals
localStorage.setItem('names', JSON.stringify(vals));
获取物品
vals = JSON.parse(localStorage.getItem('name'));
在这种情况下，我们将从localStorage获取项目，然后使用JSON.parse将字符串再次放入数组中
进一步说明
localStorage是一种浏览器API ，可让我们在用户计算机上存储数据。 localStorage有点像cookie，但限制较少，并且不会过期。
在这种情况下，我们想将名称存储在localStorage 。 您可以将任何JavaScript存储在localStorage中。 堆栈溢出将时间戳和其他一些内容存储在localStorage 。
每个item或localStorage中的“事物”都有一个名称和一个值 。
使用localStorage.setItem('name', 'Bob') ，创建一个名为name的item ，其值为Bob
在您要添加第二个名字之前，一切都很好。 JavaScript具有可以将多个值存储在一个“变量”中的数组 。 这意味着您可以在一个变量/项目中存储多个名称。 以下是数组的示例
var myArray = ['Bob'，'Joe'，'Phil'];
该数组具有三个值： Bob ， Joe和Phil 。 您可以使用Array.push()将项目添加到数组中。 我将在此处链接有关数组的文章
好的，现在您将三个值存储在数组中，并想要存储它。 localStorage值只能是字符串 ！ JSON是一种类似于JavaScript对象的特殊“变量”类型，您可以在此处了解有关信息 。 简单来说，数组是“ JSON”。
因为localStorage只接受字符串，所以我们必须将数组（JSON）转换为可以存储的字符串。 完成的方法是JSON.stringify(ARRAY_HERE) 。 这将返回类似以下的字符串：
"["Bob","Joe","Phil"]"
现在我们的数组是一个字符串，我们可以使用localStorage.setItem()将其放入localStorage 。
要检索此内容时该怎么办？
要检索该数组，我们将使用localStorage.getItem() 。 在localStorage.getItem() ，输入要访问的item的名称，它将返回它。 但是问题是它仍然是字符串。 这就是JSON.parse()传入的地方。这会将我们的“字符串化”数组转换为实际数组。
这都是做什么的
我想在localStorage中存储三个名称
你会怎么做？ 很简单，您可以使用.push()将名称添加到数组中，然后进行存储。 当您要显示它时，请使用我之前介绍的localStorage.getItem() 。
进一步阅读
我写了很多书，但这可能还不够，请查看以下内容：
HTML5将多个文本框存储到本地存储
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.