个人中心
gpt4 book ai didi

javascript - 如何向本地存储 HTML5 添加多个文本

转载 作者：行者123 更新时间：2023-11-28 19:17:43 25 4
gpt4 key购买 nike

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

最佳答案

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

如何

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

示例

设置项目

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 中。您可以在 localStorage 中存储任何 JavaScript 内容。 Stack Overflow 在您的 localStorage 中存储时间戳和其他一些内容。

localStorage 中的每个项或“事物”都有一个名称和一个值。

使用localStorage.setItem('name', 'Bob')时，您创建一个名为name的item，其值为< em>鲍勃

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

var myArray = ['Bob', 'Joe', 'Phil'];

该数组具有三个值:Bob、Joe 和Phil。您可以使用 Array.push() 将项目添加到数组中。我将链接一篇关于数组的文章 here

好的，现在您的数组中有三个值并且您想要存储它。 localStorage 值只能只能是字符串! JSON是一种特殊类型的“变量”，类似于JavaScript对象，你可以了解一下here 。简单来说，数组就是“JSON”。

因为 localStorage 只接受字符串，所以我们必须将数组 (JSON) 转换为我们可以存储的字符串。完成此操作的方法是 JSON.stringify(ARRAY_HERE)。这将返回一个字符串像:

"["Bob","Joe","Phil"]"

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

当我们想要检索这个时我们该怎么做？

要检索数组，我们将使用 localStorage.getItem()。在 localStorage.getItem() 中，您输入要访问的 item 的名称，它将返回它。但问题是它仍然是一个字符串。这就是 JSON.parse() 发挥作用的地方。这会将我们的“字符串化”数组转换为实际数组。

这一切有什么作用

I want to store three names in localStorage

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

进一步阅读

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

MDN Arrays

localStorage Article

w3schools JSON

关于javascript - 如何向本地存储 HTML5 添加多个文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29497179/

25 4 0
文章推荐： javascript - 当用户不使用浏览器访问页面时可以触发ajax吗？
文章推荐： python - 如何使用 pip-console 安装库？
文章推荐： iphone - ViewController 作为 subview
文章推荐： javascript - 如何防止我的超链接刷新页面？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com