开发者问题收集

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

2015-04-07
4342
javascript html

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

据我了解，您想将多个字符串存储到 localstorage 中。您可以使用以下内容来实现这一目标：

如何实现

如何将所有字符串存储在数组中。然后，我们可以将其放入Localstorage。在示例中，我将使用“名称”作为LocalStorage项目名称。一个数组不能放入localstorage中，因此我们必须使用 json.stringify 做一个字符串才能做到这一点。

示例

设置项目

519351512

获取项目

259334780

在此中，我们将从localstorage中获取项目，并将字符串放入一个再次使用 json.parse

进一步说明

localstorage 是 浏览器API 我们将数据存储在用户计算机上。 localstorage 有点像 cookie ，但不受限制，不会到期。

我们想在这种情况下存储在这种情况下，名称， localstorage 。您可以将任何JavaScript存储在LocalStorage中。堆栈溢出在 localstorage 。

中存储时间戳和其他一些内容 和一个 值 。

使用 localstorage.setItem（'name'，'bob'） 时，您可以创建 item nater name 和它的值是 bob

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

066624277

array 具有三个值： bob ， joe < /em>和 phil 。您可以使用 array.push（） 将项目添加到数组中。我将链接

好吧，所以现在您在数组中拥有三个值，并且要存储它。 localstorage 值 只能是字符串 ！ JSON是类似于JavaScript对象的“变量”的一种特殊类型，您可以了解 在这里 。简而言之，阵列是“ json”。

因为 localstorage 仅采用字符串，我们必须将数组 （JSON） 变成我们可以存储的字符串。这样做的方式是 json.stringify（array_here） 。这将返回字符串 喜欢 ：

018715522

现在我们的数组是一个字符串，我们可以将其放入<<代码> localstorage 使用 localstorage.setitem（） 。

我们要检索此时会做什么？

要检索数组，我们将使用 localstorage.getItem（） 。在 localstorage.getItem（） 中，您将要访问的 item 的名称放置，并将其返回。但是问题是它仍然是字符串。那就是 json.parse（） 进来的地方。这将使我们的“弦”数组转换为实际数组。

这一切有什么用

I want to store three names in localStorage

你会怎么做？很简单，使用 .push() 将名称添加到数组，然后存储它。当您想要显示它时，请使用我之前描述的 localStorage.getItem() 。

进一步阅读

我写了很多，但可能还不够，请查看以下内容：

MDN 数组

localStorage 文章

w3schools JSON

Downgoat
2015-04-07