如何将多个 HTML multi-select 选项值保存到本地存储？

Question

我正在尝试提供一个多 select HTML 元素，用户可以在其中 select 一种或多种付款方式。我还想防止数据丢失，以防用户不小心按下后退按钮或等效按钮然后返回。我想为用户提供更改 URL（无论是否有意）和 return 之后从他们离开的地方继续的自由。

下面的代码将最新的 multi-select 选项值存储到本地存储中，并在页面加载时将其填回。那很简单。但是如何将多个值（例如“信用卡”和“现金”）存储到本地存储中？

我已经研究了 JSON stringify 函数，但到目前为止我无法正确完成，所以我没有将失败的尝试留在代码中。我也研究了这个页面上或多或少的相关问题，但无法利用专家指出的简短回复。

（为了缩短我没有包括样式。出于同样的原因，我没有包括这是其中一部分的形式。如果不是很明显，你可以 select 多个通过按 CTRL [命令应该适用于 Mac] 并单击选项来设置值。）

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    Select one or more payment methods:
    <br>
    <select multiple id="payment_methods" onchange="saveMultipleValues(this);">

        <option value="credit"> Credit cards</option>
        <option value="iban">   IBAN        </option>
        <option value="cash">   Cash        </option>
        
    </select>

    <script>
        // Passing multiselect id "payment_methods" to below function "getSavedValue" to 
        // check if local storage has a value for it. If value exists, selecting it on the
        // payment methods list above.
        document.getElementById("payment_methods").value = getSavedValue("payment_methods"); 

        function saveMultipleValues(currentObject){
            var id  = currentObject.id;     // get the requester's id to save it 
            var val = currentObject.value;  // get the value
            localStorage.setItem(id, val);  // On user input, the local storage's value will
                                            // override which should be fixed
        }
        
        function getSavedValue(v){
            if (localStorage.getItem(v)) // if there is a value for the current HTML id...
            {
                return localStorage.getItem(v); // value found, returning it
            }
        }
    </script>
</body>
</html>

Answer 1

这样：

<select id="payment_methods"  multiple >
  <option value="credit"> Credit cards</option>
  <option value="iban">   IBAN        </option>
  <option value="cash">   Cash        </option>
</select>

const payMethSelect = document.querySelector('#payment_methods');

// init
let opts = (JSON.parse( localStorage.getItem('payment_methods') || '[]' ))
Array.from( payMethSelect.options).forEach(opt => 
  {
  opt.selected = opts.includes(opt.value)
  });

payMethSelect.onchange =_=>
  {
  let opts = Array.from(payMethSelect.selectedOptions).map(opt=>opt.value)
  localStorage.setItem('payment_methods', JSON.stringify(opts))
  }

如何将多个 HTML multi-select 选项值保存到本地存储？

How to save multiple HTML multi-select option values into local storage?

javascript

json

multi-select

local-storage

stringify