Estoy escribiendo un sitio web, una sección del sitio web es para que los usuarios seleccionen un TesterName existente o ingresen uno nuevo.
var curTester; function SetTesterName() { var Value = document.getElementById("testerNameInput").value; if (!Value) return; if ( $("#testerNameList").find("option[value='" + Value + "']").length == 0 ) { var option = document.createElement("option"); option.value = Value; document.getElementById('testerNameList').appendChild(option); alert('New tester name added'); } curTester = Value; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="testerNameInput" >Tester Name</label> <input id = "testerNameInput" list = "testerNameList" name = "testerNameInput" type = "text" style="width: 70%"/> <datalist id="testerNameList"> <option value="Name1"> <option value="Name2"> <option value="Name3"> </datalist> <button onclick="SetTesterName()">Submit</button>Estas 2 piezas de código funcionan bien, pero cuando vuelvo a cargar la página web y miro en la lista de datos, falta la nueva opción adjunta. ¿Qué tengo que hacer?
si desea resolver solo la interfaz, puede usar localStorage para este problema.
Si desea que los usuarios vean lo que otros usuarios han agregado, necesita un backend para manejar las operaciones de la base de datos.
Edito tu fragmento. puedes comprobar aquí
var curTester; var testerNameList = localStorage.getItem('testerNameList'); function SetTesterName() { var Value = $('#testerNameInput').val() if (!Value) return; if ( $("#testerNameList").find("option[value='" + Value + "']").length == 0 ) { // var option = document.createElement("option"); // option.value = Value; // document.getElementById('testerNameList').appendChild(option); // you can use short way like below $('#testerNameList').append($(`<option value="` + Value + `"></option>`)) testerNameList = localStorage.getItem('testerNameList'); if(!testerNameList){ // localStorage empty localStorage.setItem('testerNameList', JSON.stringify([Value])); }else{ let arr = JSON.parse(testerNameList) arr.push(Value) console.log(arr) localStorage.setItem('testerNameList', JSON.stringify(arr)); } alert('New tester name added'); } curTester = Value; } // When the page is ready it adds the elements found in the local storage. // Shorthand for $( document ).ready() $(function() { if(testerNameList != null){ JSON.parse(testerNameList).forEach(x => { $('#testerNameList').append($(`<option value="` + x + `"></option>`)) }) } });