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

Question

I created a few functions and some input boxes with a table to show the data when page is reloaded. 我创建了一些函数和一些带有表格的输入框，以在重新加载页面时显示数据。 The issue I am having is how do I get multiple inserts to local storage and be able to show all the data on the table with a loop statement. 我遇到的问题是如何获取多个插入到本地存储，以及如何使用循环语句显示表上的所有数据。 Also is there way to show the data right away instead of reload. 还有一种方法可以立即显示数据而不是重新加载。 I guess I am just confused with local Storage and I was trying to see how it works. 我想我只是对本地存储感到困惑，我试图查看其工作原理。 https://jsfiddle.net/zzLumrsd/ 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

As far as I understand, you want to store multiple strings into localStorage . 据我了解，您想将多个字符串存储到localStorage 。 You could achieve that using the following: 您可以使用以下方法实现此目的：

How 怎么样

To achieve this, you would store all the Strings in an array. 为此，您将所有字符串存储在一个数组中。 We can then put this into localStorage. 然后，我们可以将其放入localStorage。 In the examples, I will be using 'names' as the localStorage item name. 在示例中，我将使用“名称”作为localStorage项目名称。 An array can't be put into localStorage so we have to make it a String using JSON.stringify to do that. 数组无法放入localStorage，因此我们必须使用JSON.stringify将其设置为String来实现。

Examples 例子

Setting the Item 设定项目

var vals = [];

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

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

Getting the Item 获取物品

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

In this, we will get the item from localStorage, and make the string into an array again using JSON.parse 在这种情况下，我们将从localStorage获取项目，然后使用JSON.parse将字符串再次放入数组中

Further Explanation 进一步说明

localStorage is an browser API that allows us to store data on a users computer. localStorage是一种浏览器API ，可让我们在用户计算机上存储数据。 localStorage is somewhat like cookies but are less limited and don't expire. localStorage有点像cookie，但限制较少，并且不会过期。

We want to store in this case, names, in localStorage . 在这种情况下，我们想将名称存储在localStorage 。 You can store anything JavaScript in localStorage. 您可以将任何JavaScript存储在localStorage中。 Stack Overflow stores timestamps and a few other things in your localStorage . 堆栈溢出将时间戳和其他一些内容存储在localStorage 。

Each item , or 'thing' in localStorage, has a name , and a value . 每个item或localStorage中的“事物”都有一个名称和一个值。

When using localStorage.setItem('name', 'Bob') , you create an item called name and it's value is Bob 使用localStorage.setItem('name', 'Bob') ，创建一个名为name的item ，其值为Bob

This is all well and good until you want to add a second name. 在您要添加第二个名字之前，一切都很好。 JavaScript has arrays which can store multiple values in one 'variable'. JavaScript具有可以将多个值存储在一个“变量”中的数组。 This means you can store multiple names, in one variable/item. 这意味着您可以在一个变量/项目中存储多个名称。 The following is an example of an array 以下是数组的示例

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

That array has three values: Bob , Joe , and Phil . 该数组具有三个值： Bob ， Joe和Phil 。 You can add an item into an array using Array.push() . 您可以使用Array.push()将项目添加到数组中。 I'm going to link an article on arrays here 我将在此处链接有关数组的文章

Okay, so now you have your three values in an array and you want to store it. 好的，现在您将三个值存储在数组中，并想要存储它。 localStorage values can only be strings ! localStorage值只能是字符串 ！ JSON is is a special type of 'variable' similar to a JavaScript object, you can learn about it here . JSON是一种类似于JavaScript对象的特殊“变量”类型，您可以在此处了解有关信息。 In simple terms, an array is 'JSON'. 简单来说，数组是“ JSON”。

Because localStorage only takes strings, we must turn our array (JSON) into a string which we can store. 因为localStorage只接受字符串，所以我们必须将数组（JSON）转换为可以存储的字符串。 The way this is done is JSON.stringify(ARRAY_HERE) . 完成的方法是JSON.stringify(ARRAY_HERE) 。 This will return a string like : 这将返回类似以下的字符串：

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

Now that our array is a string, we can put it into localStorage using localStorage.setItem() . 现在我们的数组是一个字符串，我们可以使用localStorage.setItem()将其放入localStorage 。

What do we do when we want to retrieve this? 要检索此内容时该怎么办？

To retrieve the array, we will use localStorage.getItem() . 要检索该数组，我们将使用localStorage.getItem() 。 In localStorage.getItem() you put the name of the item you wish to access and it will return it. 在localStorage.getItem() ，输入要访问的item的名称，它将返回它。 But the problem is it is still a string. 但是问题是它仍然是字符串。 That's where JSON.parse() comes in. This will convert our 'stringified' array into an actual array. 这就是JSON.parse()传入的地方。这会将我们的“字符串化”数组转换为实际数组。

What does this all have to do 这都是做什么的

I want to store three names in localStorage 我想在localStorage中存储三个名称

How would you do that? 你会怎么做？ It's simple, what you add the names to the array using .push() , then you store it. 很简单，您可以使用.push()将名称添加到数组中，然后进行存储。 When you want to display it, use the localStorage.getItem() I described before. 当您要显示它时，请使用我之前介绍的localStorage.getItem() 。

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

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-04-07 17:16:19

How 怎么样

Examples 例子

Setting the Item 设定项目

Getting the Item 获取物品

Further Explanation 进一步说明

What does this all have to do 这都是做什么的

Further Reading 进一步阅读

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-04-07 17:16:19

How 怎么样

Examples 例子

Setting the Item 设定项目

Getting the Item 获取物品

Further Explanation 进一步说明

What does this all have to do 这都是做什么的

Further Reading 进一步阅读

解决方案1
3 已采纳 2015-04-07 17:16:19