Как я мог бы создать и вызвать несколько записей локального хранилища с выбором/выпадающими списками?

#javascript #html #local-storage

Вопрос:

Я пытаюсь создать базу данных для некоторых записей и, похоже, не могу понять, как добавлять или извлекать несколько вариантов локального хранилища одновременно при загрузке сайта. Это образец моего кода, с которым у меня возникли проблемы:

 <html>
<body>
    <input list="part0" name="part_0" id="part_0">
    <datalist id="part0">
        <option value="Entry0">Entry 0</option>
        <option value="Entry1">Entry 1</option>
        <option value="Entry2">Entry 2</option>
        <option value="Entry3">Entry 3</option>
        <option value="Entry4">Entry 4</option>
    </datalist>
    <input list="part1" name="part_1" id="part_1">
    <datalist id="part1">
        <option value="Entry5">Entry 5</option>
        <option value="Entry6">Entry 6</option>
        <option value="Entry7">Entry 7</option>
        <option value="Entry8">Entry 8</option>
        <option value="Entry9">Entry 9</option>
    </datalist>
</body>

<script>
document.addEventListener('DOMContentLoaded', function () {
   var input = document.getElementById('part_1');
   if (localStorage['part_1']) { 
       input.value = localStorage['part_1']; 
   }
   input.onchange = function () {
        localStorage['part_1'] = this.value;
    }
});
</script>
</html>
 

Я пытался продублировать код JavaScript и заменить некоторые раскрывающиеся списки part_1 на part_0 вместе с вводом, но это не работает.
Я довольно новичок в HTML и JavaScript, поэтому мой код довольно грязный, я пытаюсь со временем совершенствоваться.