重新加载页面时不保存本地存储

Question

我试图创建一个数组，该数组保存我输入到表单中的值。我希望它显示一个HTML元素节点，但也要存储在本地存储中，以便它保存我的“食品”列表，以便以后添加和删除。出于某种原因，本地存储可以正常工作，但是刷新页面后便无法保存。

var itemsArray = [];

var items;

if(localStorage.getItem('items')){
  items = JSON.parse(localStorage.getItem('items'))

} else {
    items = [];
}

var data = JSON.parse(localStorage.getItem('items'))


foodArray = Array.from(foodItems);


form.addEventListener('submit', function(e){
    e.preventDefault();

    const value = input.value;
    if (value === '') {
        document.querySelector('.success').style.display = 'none';
        document.querySelector('.danger').style.display = 'block';

        setTimeout(function(){
            document.querySelector('.danger').style.display = 'none';
        }, 2000);
    } else {
        document.querySelector('.success').style.display = 'block';
        document.querySelector('.danger').style.display = 'none';
        setTimeout(function(){
            document.querySelector('.success').style.display = 'none';
        }, 2000);


        itemsArray.push(input.value)
        localStorage.setItem('items', JSON.stringify(itemsArray))
        addItem(value)
        input.value = ''

        data.forEach(item => {
            addItem(item)
        })

    }

    clearBtn.addEventListener('click', function(e){
        const itemList = document.querySelector('.item_list');
        localStorage.removeItem('key')
        while(itemList.firstChild){
            itemList.removeChild(itemList.firstChild);
        }

    });