Fatal编程技术网
  • javascript/
  • Javascript 如何将多个文本添加到本地存储HTML5

Javascript 如何将多个文本添加到本地存储HTML5

javascript html

Javascript 如何将多个文本添加到本地存储HTML5,javascript,html,Javascript,Html,我创建了一些函数和一些带有表格的输入框，以便在重新加载页面时显示数据。我面临的问题是如何获得本地存储的多个插入，并能够使用loop语句显示表上的所有数据。还有一种方法可以立即显示数据，而不是重新加载。我想我只是被本地存储搞糊涂了，我想看看它是如何工作的。 本地存储 表#表1{ 宽度：10%； 背景色：#灰色； } 函数saveMy（）{ var fieldValue=document.getElementById（'textfield'）.value； setItem（'text'，fiel

我创建了一些函数和一些带有表格的输入框，以便在重新加载页面时显示数据。我面临的问题是如何获得本地存储的多个插入，并能够使用loop语句显示表上的所有数据。还有一种方法可以立即显示数据，而不是重新加载。我想我只是被本地存储搞糊涂了，我想看看它是如何工作的。 


本地存储
表#表1{
宽度：10%；
背景色：#灰色；
}
函数saveMy（）{
var fieldValue=document.getElementById（'textfield'）.value；
setItem（'text'，fieldValue）；
}
函数加载（）{
var storedValue=localStorage.getItem（'text'）；
if（存储值）{
document.getElementById（'textfield2'）。value=storedValue；
}
}
函数removeMy（）{
document.getElementById（'textfield'）。值=“”；
localStorage.removietem（'text'）；
}


文本
据我所知，您希望将多个字符串存储到
localStorage
中。您可以通过以下方法实现这一点：

怎么 要实现这一点，您需要将所有字符串存储在一个数组中。然后我们可以将其放入本地存储。在示例中，我将使用“名称”作为本地存储项名称。数组不能放入localStorage，因此我们必须使用JSON.stringify将其设置为字符串

例子 设置项目 获取项目 在本例中，我们将从localStorage获取该项，并使用JSON.parse将该字符串再次放入数组中

进一步解释 
localStorage
是一种浏览器API，允许我们在用户计算机上存储数据
localStorage
有点像cookie，但限制较少，不会过期

在本例中，我们希望在
localStorage
中存储名称。您可以在localStorage中存储任何JavaScript。堆栈溢出在
localStorage
中存储时间戳和其他一些内容

本地存储中的每个
项或“thing”都有一个名称和一个值

使用
localStorage.setItem（'name'，'Bob'）
时，创建一个名为name的
项，其值为Bob

这一切都很好，直到你想添加第二个名字。JavaScript具有数组，可以在一个“变量”中存储多个值。这意味着您可以在一个变量/项目中存储多个名称。下面是一个数组示例

var myArray=['Bob'，'Joe'，'Phil']

该数组有三个值：Bob、Joe和Phil。您可以使用
array.push（）
将项目添加到数组中。我将链接一篇关于数组的文章

好的，现在你在一个数组中有三个值，你想存储它<代码>本地存储
值只能是字符串！JSON是一种特殊类型的“变量”，类似于JavaScript对象，您可以了解它。简单来说，数组就是“JSON”

因为
localStorage
只接受字符串，所以我们必须将数组（JSON）转换为可以存储的字符串。这样做的方法是
JSON.stringify（这里是数组）
。这将返回一个字符串，如：


“[“鲍勃”、“乔”、“菲尔”]”

现在我们的数组是一个字符串，我们可以使用
localStorage.setItem（）
将其放入
localStorage

当我们想要检索此文件时，我们该怎么做？

要检索数组，我们将使用
localStorage.getItem（）
。在
localStorage.getItem（）
中，输入要访问的
项的名称，它将返回该项。但问题是它仍然是一个字符串。这就是
JSON.parse（）
的用武之地。这将把“字符串化”数组转换为实际数组

这一切都有什么关系
我想在localStorage中存储三个名称

你会怎么做？很简单，您可以使用
.push（）
将名称添加到数组中，然后存储它。要显示它，请使用前面介绍的
localStorage.getItem（）

进一步阅读
我写了很多，但这可能还不够，请查看以下内容：






据我所知，您希望将多个字符串存储到
localStorage
中。您可以通过以下方法实现这一点：

怎么
要实现这一点，您需要将所有字符串存储在一个数组中。然后我们可以将其放入本地存储。在示例中，我将使用“名称”作为本地存储项名称。数组不能放入localStorage，因此我们必须使用JSON.stringify将其设置为字符串

例子
设置项目
获取项目
在本例中，我们将从localStorage获取该项，并使用JSON.parse将该字符串再次放入数组中

进一步解释

localStorage
是一种浏览器API，允许我们在用户计算机上存储数据
localStorage
有点像cookie，但限制较少，不会过期

在本例中，我们希望在
localStorage
中存储名称。您可以在localStorage中存储任何JavaScript。堆栈溢出在
localStorage
中存储时间戳和其他一些内容

本地存储中的每个
项或“thing”都有一个名称和一个值

使用
localStorage.setItem（'name'，'Bob'）
时，创建一个名为name的
项，其值为Bob

这一切都很好，直到你想添加第二个名字。JavaScript具有数组，可以在一个“变量”中存储多个值。这是我

<!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>



var vals = [];

vals.push('Bob');//Add the text 'item1' to vals

localStorage.setItem('names', JSON.stringify(vals));



vals = JSON.parse(localStorage.getItem('name'));