在JavaScript中为键值对分配多个值_Javascript_Local Storage_Key Value

在JavaScript中为键值对分配多个值

javascript

在JavaScript中为键值对分配多个值,javascript,local-storage,key-value,Javascript,Local Storage,Key Value,所以我尝试使用local.storage创建一个列表函数。我已经创建了一个，但是我需要给键多个值，从当前开始，它会显示第一个值3次，但是我需要它显示应用于它的每个值。对于添加到列表中的每个新项，都需要生成一个新的键，但是我真的很难做到这一点。请为我找到当前代码： <html> <head> <title>Local Storage</title> <style media="scree

所以我尝试使用local.storage创建一个列表函数。我已经创建了一个，但是我需要给键多个值，从当前开始，它会显示第一个值3次，但是我需要它显示应用于它的每个值。对于添加到列表中的每个新项，都需要生成一个新的键，但是我真的很难做到这一点。请为我找到当前代码：

<html>
    <head>
        <title>Local Storage</title>

        <style media="screen">
            input, button {
                padding: 7px;
                height: 40px;
            }

            fieldset {
                margin-bottom: 25px;
            }

        </style>
    </head>
    <body>
        <h2 id="title">Local Storage - JS</h2>
        <fieldset>
            <legend>Insert Accounts</legend>
            <input id="insKey" type="text" placeholder="Enter Site...">
            <input id="insValue1" type="text" placeholder="Enter Username...">
            <input id="insValue2" type="text" placeholder="Enter Password...">
            <input id="insValue3" type="text" placeholder="Enter Extra Details...">
            <button type="button" id="btnInsert">Add New Profile</button>
        </fieldset>
        <fieldset>
            <legend>Local Storage</legend>
            <div id="LSout"></div>
        </fieldset>
    </body>

    <script type="text/javascript">
        const insKey = document.getElementById('insKey');
        const insValue1 = document.getElementById('insValue1');
        const insValue2 = document.getElementById('insValue2');
        const insValue3 = document.getElementById('insValue3');
        const btnInsert = document.getElementById('btnInsert');
        const LSout = document.getElementById('LSout');

        btnInsert.onclick = function () {
            const key = insKey.value;
            const value1 = insValue1.value;
            const value2 = insValue2.value;
            const value3 = insValue3.value;

            if (key && value1 && value2 && value3) {
                localStorage.setItem(key, value1, value2, value3);
                location.reload();
            }
        };

        for (let i = 0; i < localStorage.length; i++) {
            const key = localStorage.key(i);
            const value1 = localStorage.getItem(key);
            const value2 = localStorage.getItem(key);
            const value3 = localStorage.getItem(key);

            LSout.innerHTML += `${key}: ${value1} - ${value2} - ${value3}<br />`;
        }

    </script>

</html>


本地存储
输入，按钮{
填充：7px；
高度：40px；
}
字段集{
边缘底部：25px；
}
本地存储-JS
插入帐户
添加新配置文件
本地存储
const insKey=document.getElementById（'insKey'）；
const insValue1=document.getElementById（'insValue1'）；
const insValue2=document.getElementById（'insValue2'）；
const insValue3=document.getElementById（'insValue3'）；
const btnisert=document.getElementById（'btnisert'）；
const LSout=document.getElementById（'LSout'）；
btnisert.onclick=函数（）{
const key=insKey.value；
常量值1=insValue1.0；
常量值2=insValue2.value；
常量值3=insValue3.value；
如果（键和值1和值2和值3）{
setItem（键、值1、值2、值3）；
location.reload（）；
}
};
for（设i=0；i`；
}

道歉，如果它是非常基本的，或者如果我要求的东西，不能做！谢谢您的时间。

试试看

<html>
    <head>
        <title>Local Storage</title>

        <style media="screen">
            input, button {
                padding: 7px;
                height: 40px;
            }

            fieldset {
                margin-bottom: 25px;
            }

        </style>
    </head>
    <body>
        <h2 id="title">Local Storage - JS</h2>
        <fieldset>
            <legend>Insert Accounts</legend>
            <input id="insKey" type="text" placeholder="Enter Site...">
            <input id="insValue1" type="text" placeholder="Enter Username...">
            <input id="insValue2" type="text" placeholder="Enter Password...">
            <input id="insValue3" type="text" placeholder="Enter Extra Details...">
            <button type="button" id="btnInsert">Add New Profile</button>
        </fieldset>
        <fieldset>
            <legend>Local Storage</legend>
            <div id="LSout"></div>
        </fieldset>
    </body>

    <script type="text/javascript">
        const insKey = document.getElementById('insKey');
        const insValue1 = document.getElementById('insValue1');
        const insValue2 = document.getElementById('insValue2');
        const insValue3 = document.getElementById('insValue3');
        const btnInsert = document.getElementById('btnInsert');
        const LSout = document.getElementById('LSout');

        btnInsert.onclick = function () {
            const key = insKey.value;
            const value1 = insValue1.value;
            const value2 = insValue2.value;
            const value3 = insValue3.value;

            if (key && value1 && value2 && value3) {
                localStorage.setItem(key, [value1, value2, value3]);
                location.reload();
            }
        };

        for (let i = 0; i < localStorage.length; i++) {
            const key = localStorage.key(i);
            const value = localStorage.getItem(key);
            const value1 = value[0];
            const value2 = value[1];
            const value3 = value[2];

            LSout.innerHTML += `${key}: ${value1} - ${value2} - ${value3}<br />`;
        }

    </script>

</html>


本地存储
输入，按钮{
填充：7px；
高度：40px；
}
字段集{
边缘底部：25px；
}
本地存储-JS
插入帐户
添加新配置文件
本地存储
const insKey=document.getElementById（'insKey'）；
const insValue1=document.getElementById（'insValue1'）；
const insValue2=document.getElementById（'insValue2'）；
const insValue3=document.getElementById（'insValue3'）；
const btnisert=document.getElementById（'btnisert'）；
const LSout=document.getElementById（'LSout'）；
btnisert.onclick=函数（）{
const key=insKey.value；
常量值1=insValue1.0；
常量值2=insValue2.value；
常量值3=insValue3.value；
如果（键和值1和值2和值3）{
setItem（键，[value1，value2，value3]）；
location.reload（）；
}
};
for（设i=0；i`；
}

javascript中的对象是一个键值对，因此如果使用基本数据类型（字符串、数字、布尔值），则每个键只能保存一个值。所以，你可以想象有一个像下面这样的物体

const obj={key:{value1:“value1”，value2:“value2”，value3:“value3”}；
localStorage.setItem（key，JSON.stringify（object））//保存到localStorage之前需要对对象进行stringify
const obj=JSON.parse（localStorage.getItem（key）；//需要将字符串解析回对象

不能向一个键添加多个值，但可以传递一个值数组

首先将值放入数组中。

const allValues=[value1、value2、value3]

然后将其传递到本地存储。

localStorage.setItem（keyName，allValues）；

如果你需要增加一个新的价值，这就是你要做的

let updateValues = localStorage.getItem(keyName);
updateValues.push(value);
localStorage.setItem(keyName, updateValues);

如果您想循环遍历这些值，它将非常相似

let values = localStorage.getItem(keyName);
for(let i = 0; i < values.length; i++){
  values[i]
}

let values=localStorage.getItem（keyName）；
for（设i=0；i