时间戳

首页 > 解决方案 > 如何将多个值添加到本地存储中的键

javascript - 如何将多个值添加到本地存储中的键

问题描述

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

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>

我正在尝试将多个 inpvalues 添加到一个键。我似乎无法添加另一个 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>` ;
}

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

在此处输入图像描述

标签： javascripthtmlfunctiondebugginglocal-storage

解决方案

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

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>` ;
}

推荐阅读