如何向本地存储中的一个键添加多个值

问题描述 投票：0回答：3

我试图允许用户选择多个可以存储在本地存储中的选项。 尝试允许用户选择多个保存并显示在屏幕上的选择选项。

html

   <body>
    <div class="custom_tunings">
        <h1>Custom Tunings</h1>
        <br>
        <fieldset>
            <legend>Add New Tunings</legend>
            <div class="formBox">
                <label for="">Tuning Name</label>
                <input type="text" id="inpkey" placeholder="Insert Name"> <br>
            </div>
            <form class="" action="index.html" method="post">
                <div class="formBox">
                    <select class="mynoteslist" id="inpvalue">
                        <option value="A1">A1</option>
                        <option value="B1">B1</option>
                        <option value="C1">C1</option>
                        <option value="D1">D1</option>
                        <option value="E1">E1</option>
                        <option value="F1">F1</option>
                        <option value="G1">G1</option>
                    </select>
                </div>
                <div class="formBox">
                    <select class="mynoteslist" id="inpvalue2">
                        <option value="A1">A1</option>
                        <option value="B1">B1</option>
                        <option value="C1">C1</option>
                        <option value="D1">D1</option>
                        <option value="E1">E1</option>
                        <option value="F1">F1</option>
                        <option value="G1">G1</option>
                    </select>
                </div>
            </form>
            <button type="button" id="btninsert">Save Tuning </button>
            <br>
        </fieldset>
        <fieldset>
            <legend>My Tunings</legend>
            <div id="isoutput"> </div>
        </fieldset>
    </div>

我正在尝试将多个 inpvalue 添加到一个键中。 我似乎无法添加另一个 inpvalue，因为它似乎只接受第一个值。 我想知道是否有一个简单的方法可以解决这个问题？

javascript

let inpkey = document.getElementById("inpkey");
let inpvalue=document.getElementById("inpvalue");
//let inpvalue2=document.getElementById("inpvalue2");



let btninsert = document.getElementById("btninsert");
let isoutput = document.getElementById("isoutput");

btninsert.onclick = function(){
  let key = inpkey.value;
  let value = inpvalue.value;
  //let value2 = inpvalue.value;

  console.log(key);
  console.log(value);
//console.log(value2);

  if(key && value) {
    localStorage.setItem(key,value);
    location.reload();
  }
};
for(let i=0; i<localStorage.length; i++){
  let key=localStorage.key(i);
  let value=localStorage.getItem(key);



  isoutput.innerHTML += `${key}: ${value}  <br>` ;
}

期望的输出是这样的 但是，如果我尝试选择不同的选项，它只会采用第一个值并将它们应用于所有选项。

enter image description here

javascript html function debugging local-storage
3个回答
3
投票

您需要检查某个键是否存在，如果找到，则在保存之前将新值附加到现有值。

if(key && value) {

    // if the key exists
    if(localStorage.getItem(key)){  

        // split the existing values into an array
        let vals = localStorage.getItem(key).split(','); 

        // if the value has not already been added
        if(! vals.includes(value)){ 

            // add the value to the array
            vals.push(value); 

            // sort the array
            vals.sort(); 
            
            // join the values into a delimeted string and store it
            localStorage.setItem(key, vals.join(',')); 
        }      
    }else{
        // the key doesn't exist yet, add it and the new value
        localStorage.setItem(key,value);
    }    
    location.reload();
}

我在这里制作了上述代码的工作示例：https://jsfiddle.net/01rjn3cf/2/

编辑：根据您的评论和添加的所需输出示例，我发现您不需要不同的值列表，并且任何值都可以添加到先前选择的值的列表中。 在这种情况下，解决方案就更简单了..

if(key && value) {

    // if the key exists
    if(localStorage.getItem(key)){             
            
        // add this value onto the end of the existing string
        localStorage.setItem(key, localStorage.getItem(key) + ', ' + value); 
              
    }else{
        // the key doesn't exist yet, add it and the new value
        localStorage.setItem(key,value);
    }    
    location.reload();
}

编辑： 我对其进行了修改，以便按需要工作。



if(key && value) {
  var content = value + ', ' + value2 + value3;
    // if the key exists
    if(localStorage.getItem(key)){

        // add this value onto the end of the existing string

        localStorage.setItem(key, content);

    }else{
        // the key doesn't exist yet, add it and the new value
        localStorage.setItem(key, content);
    }
    location.reload();
}
};
for(var i=0; i<localStorage.length; i++){
  var key=localStorage.key(i);
  var value=localStorage.getItem(key);



  isoutput.innerHTML += `${key}: ${value}  <br>` ;
}
1
投票

一旦实现了 @Drew 的修复来存储项目列表，您将需要提供选择的所有值。

而不是

btninsert.onclick = function(){
  let key = inpkey.value;
  let value = inpvalue.value;
  //let value2 = inpvalue.value;
  ...

您将需要所有选择，然后将每个选择传递到 localStorage 部分。 在这里我找到所有带有“mynoteslist”类的选择元素，获取它们的值，然后过滤掉空的

btninsert.onclick = function(){
  let key = inpkey.value;

  const inpValues = [...document.querySelectorAll("select.mynoteslist")]
    .map({value} => value)
    .filter(value => value);

  if (inpValues.length) {
    inpValues.forEach(v => storeLocally(key, v));
    location.reload();
  }
  //...

然后@Drew 的部分包裹在函数中

function storeLocally(key, value) {

    if(key && value) {

        // if the key exists
        if(localStorage.getItem(key)){  

            // split the existing values into an array
            let vals = localStorage.getItem(key).split(','); 

            // if the value has not already been added
            if(! vals.includes(value)){ 

                // add the value to the array
                vals.push(value); 

                // sort the array
                vals.sort(); 
                
                // join the values into a delimeted string and store it
                localStorage.setItem(key, vals.join(',')); 
            }      
        }else{
            // the key doesn't exist yet, add it and the new value
            localStorage.setItem(key,value);
        }    
    }
}
0
投票
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
localStorage.setItem('todos',JSON.stringify(todoS))
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.