Question

我创建了一些函数和一些带有表格的输入框，以便在重新加载页面时显示数据。我遇到的问题是如何多次插入本地存储，并能够使用循环语句显示表中的所有数据。还有办法立即显示数据而不是重新加载。我想我只是对本地存储感到困惑，我试图看看它是如何工作的。 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>

Answer 1

据我了解，您希望将多个字符串存储到localStorage中。您可以使用以下方法实现这一目标：

如何

要实现此目的，您可以将所有字符串存储在数组中。然后我们可以把它放到localStorage中。在示例中，我将使用＆＃39;名称＆＃39;作为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有点像 cookies 但不受限制且不会过期。

我们希望在localStorage中存储本案例中的名称。您可以在localStorage中存储任何JavaScript。 Stack Overflow在localStorage中存储时间戳和其他一些内容。

每个item，或者＆＃39;＆＃39;在localStorage中，有名称和值。

使用localStorage.setItem('name', 'Bob')时，您创建一个名为名称的<{1}} ，其值为 Bob

在你想要添加第二个名字之前，这一切都很好。 JavaScript有数组，它可以在一个变量中存储多个值＆＃39;。这意味着您可以在一个变量/项目中存储多个名称。以下是数组的示例

var myArray = [＆＃39; Bob＆＃39;，＆＃39; Joe＆＃39;，＆＃39; Phil＆＃39;];

数组有三个值： Bob ， Joe 和 Phil 。您可以使用item将项添加到数组中。我要链接关于数组的文章here

好的，现在你在数组中有三个值，并且想要存储它。 Array.push()值只能是字符串！ JSON是一种特殊类型的变量＆＃39;与JavaScript对象类似，您可以了解它here。简单来说，数组就是JSON＆＃39;。

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

JSON.stringify(ARRAY_HERE)

现在我们的数组是一个字符串，我们可以使用"["Bob","Joe","Phil"]"将其放入localStorage。

我们想要检索此内容时该怎么办？

要检索数组，我们将使用localStorage.setItem()。在localStorage.getItem()中，您输入了您希望访问的localStorage.getItem()的名称，它将返回该名称。但问题是它仍然是一个字符串。这就是item所在的位置。这将转换我们的＆＃39;字符串化＆＃39;数组到实际数组。