Как удалить последние поисковые запросы панели поиска из локального хранилища?

Question

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

// save the searches to storage
var saveBook = (newBook) => {
    let bookExists = false;
    for (let i = 0; i < localStorage.length; i++) {
        if (localStorage["books" + i] === newBook) {
            bookExists = true;
            break;
        }
    }
    if (bookExists === false) {
        localStorage.setItem('books' + localStorage.length, newBook);
    }
    renderBook();
}

// render the books to the dropdown menu
var renderBook = () => {
    $('#menu-title').empty();
    let lastBookKey = "books" + (localStorage.length - 1);
    lastBook = localStorage.getItem(lastBookKey);
    for (let i = 0; i < localStorage.length; i++) {
        let book = localStorage.getItem("books" + i);
        let bookEl = `<li id="recall-book"><a id="searchedBook">${book}</a></li>`;
        $('#menu-title').prepend(bookEl);
    }
        let newBooks = $("<menu-title>")
            .addClass("button")
            .text(bookEl)
            .click(() => {
                runApp(event.target.innerHTML);
                event.target.remove();
            });
        if (lastBook < 8) {
            newBooks.prependTo($("#menu-title"));
        } else {
            $("#menu-title")
                .children()
                .last()
                .remove()
                .prepend(lastBook);
        }
}

Answer 1

Ваша проблема заключается в saveBook

В этом for...loop

for (let i = 0; i < localStorage.length; i++) {
        if (localStorage["books" + i] === newBook) {
            bookExists = true;
            break;
        }
    }

i будет достигать только localStorage.length-1, потому что i должно быть меньше localStorage.length. Затем, когда вы не можете найти книгу, вы устанавливаете localStorage ключ на следующее:

localStorage.setItem('books' + localStorage.length, newBook);

Это, localStorage.length, очевидно, больше, чем localStorage.length-1. Итак, что произойдет, это то, что ваш for...loop никогда не проверит последнюю книгу localStorage.

Я бы предложил выбрать схему именования и затем двигаться вперед.

В данный момент вы проверяете на 0 индексирование имен, т.е. book0, book1. Однако ваши книги имеют 1 индексное наименование, т.е. book1, book2.