如何使用Javascript将HTML下拉列表（）存储在localStorage中？_Javascript_Html_Local Storage

如何使用Javascript将HTML下拉列表（）存储在localStorage中？

javascript html

如何使用Javascript将HTML下拉列表（）存储在localStorage中？,javascript,html,local-storage,Javascript,Html,Local Storage,我对javascript非常陌生，正在创建一个基本的HTML文件。基本上，我有一个没有选项的下拉列表，当用户填写文本字段并按下“创建选项”按钮时，将创建选项。通过这种方式可以创建任意数量的选项，当按下“添加”按钮时，用户单击的当前选项将显示在另一行中。我用这段代码所取得的一切 <!DOCTYPE html><html><div id="name"><select id="sel"></select&g

我对javascript非常陌生，正在创建一个基本的HTML文件。基本上，我有一个没有选项的下拉列表，当用户填写文本字段并按下“创建选项”按钮时，将创建选项。通过这种方式可以创建任意数量的选项，当按下“添加”按钮时，用户单击的当前选项将显示在另一行中。我用这段代码所取得的一切

<!DOCTYPE html><html><div id="name"><select id="sel"></select><input class="auto-save" id="inputname">
  <button id="button" onclick="newnamefunc()">Create Option</button><button onclick="wr()">Add</button></div><p id="paragraph"></p>
    <script>
        
        const input = document.getElementById('inputname')
        
        function newnamefunc() {
            const inputval = document.getElementById('inputname').value;
            const createname = document.createElement("option");
            const namevalue = document.createTextNode(inputval);
            createname.appendChild(namevalue);
            
            const element = document.getElementById("sel");
            element.appendChild(createname);            
        }
    
    
    function wr(){
        const selectel = document.querySelector('#sel');
        const p = selectel.value;
        const pvalue = document.querySelector('#paragraph').textContent
            = p;    
    }
    
    </script>
</html>

但我想要的是当用户单击保存按钮时

<button id="save">Save</button>

所有创建的选项都将存储在localStorage中，如果用户重新加载页面，则仍将显示用户在重新加载之前在下拉列表中创建的选项。我是编程新手，所以如果可能的话，使用纯javascript。如果库是必需的，请告诉我如何在我的代码中实现它们。感谢您的帮助。提前感谢您

您必须使用

此方法具有setItem、getItem、removeItem和clear

miStorage = window.localStorage;
localStorage.setItem('myCat', 'Juan');
const cat = localStorage.getItem('myCat');
localStorage.removeItem('myCat');
localStorage.clear();

下面的代码可以帮助你

函数保存{ var sel=document.getElementByIdsel； var opts=选择选项； var dat=Array.fromopts.mapopt=>{ 返回{ text:opt.textContent， value:opt.value， } }; localStorage.setItemselectOptions，JSON.stringifydat } 功能负荷{ var sel=document.getElementByIdsel； var opts=JSON.parselocalStorage.getItemselectOptions； opts.forEachopt=>{ var optEl=document.createElementoption； optEl.textContent=opt.text； optEl.value=opt.value；附属器； }; }

单击保存按钮时调用保存。文档准备就绪后，请调用load

劳塔罗·扎兰丹谢谢你，但如果你可以的话，你能把它贴到我的代码里吗？我不能完全理解它。谢谢，但是，嗯，你说的文档准备好了是什么意思？它是document.onload还是window.onload事件！