为什么刷新时数据库中只显示一个项目(Firebase)

Question

我创建了一个链接到 firebase 的待办事项列表，但从 firebase 中删除了项目，但是当我刷新 firebase 中有多个项目时，它不会返回整个人口。 我试图将它放在整个人口停留在 html 上的地方，并且只有在"删除"时才被删除

我尝试使用本地存储，但这只是覆盖了我的火力基础内容。 任何建议将不胜感激。 就像我说的，我想尝试让数据库中的所有内容都保留在HTML页面上，并且在从数据库中删除之前不会被删除。

firebase.initializeApp(config);
//create a variable to reference the database
var database = firebase.database();

window.onload=function(){
    $("#Login-Warning").hide();
    //get login elements
    const txtEmail = document.getElementById('txtEmail');
    const txtPassword = document.getElementById("txtPassword");
    const btnLogin = document.getElementById('btnLogin');
    const btnSignUp = document.getElementById('btnSignUp');
    //add login event
    btnLogin.addEventListener('click', e => {
        const email = txtEmail.value;
        const pass = txtPassword.value;
        const auth = firebase.auth(); 
        auth.signInWithEmailAndPassword(email, pass);
        //sign in 
        const promise = auth.signInWithEmailAndPassword(email, pass);
        promise.catch(e=> console.log(e.message));
    });
    //add signup
    btnSignUp.addEventListener('click', e => {
        const email = txtEmail.value;
        const pass = txtPassword.value;
        const auth = firebase.auth(); 
        //sign in 
        const promise = auth.signInWithEmailAndPassword(email, pass);
        auth.createUserWithEmailAndPassword(email, pass);
        promise.catch(e=> console.log(e.message));
    });
    //add realtime listener
    firebase.auth().onAuthStateChanged(firebaseUser => {
        if(firebaseUser) {
            console.log(firebaseUser);
            $("#Login-Warning").remove();
            Runchecklist();
        } else {
            console.log('not logged in');
            $("#Login-Warning").show();
        }
    });
    function Runchecklist() {
        //initialize value
        var todos = "";
        var Firedata = firebase.database().ref().child('todos/' + todos);
        console.log(Firedata);
        $(document).ready(function() {
            //user clicked on the add button in the to-do field add that text into the 
            to-do text
            $('#add-todo').on('click', function(event) {
                event.preventDefault();
                //values per text box
                todos = $("#todo-input").val().trim();
                //test values from textbox
                console.log(todos);
                //code for handling the push
                database.ref().push({
                    todos: todos
                });
            });
            //firebase watcher
            database.ref().limitToLast(1).on('value', snapshot => {
                var index = 0;
                var test = snapshot.val();
                var keys = Object.keys(test);
                snapshot.forEach((snap) => {
                    todos = snap.child("todos").val();
                    //prepend values to html
                    $("<div/>", {
                        "class": "to-do-item",
                        "data-path": keys[index]
                    }).append([localStorage.setItem('data', todos)]).appendTo($(".col-4"));
                    index++;
                    //to remove item from checklist
                    todos = snap.child("todos").val();
                    $(document.body).on("click", ".to-do-item",function(e) {
                        $(this).remove();
                        database.ref(`/${e.currentTarget.attributes[1].nodeValue}`).remove();
                    });
                });
            });
        });
    }
}

Answer 1

你在这里要求limitToLast(1)：

database.ref().limitToLast(1).on('value', snapshot => {

limitToLast(1)意味着数据库返回仅包含来自ref()的最新项目的快照。如果需要更多项目，请将呼叫中的号码更改为limitToLast()或将其完全删除（以获取所有项目）：

database.ref().on('value', snapshot => {