如何使用附加选项永久保存 Datalist

Question

我正在写一个网站，网站的一部分是供用户选择现有的TesterName或输入一个新的。

 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>

这 2 段代码工作正常，但是当我重新加载网页并查看数据列表时，缺少新的附加选项。 我应该怎么办？

Answer 1

如果你只想解决前端，你可以使用 localStorage 来解决这个问题。

如果你想让用户看到其他用户添加了什么，你需要一个后端来处理数据库操作。

我编辑你的片段。 你可以在这里查看

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