1
resposta

Uso do localstorage para armazenar dados

Mudei o nomes de alguns ids mas esse é meu código

// encontra o formulário
const _form = document.getElementById("formNewItem");
// encontra a lista de itens <ul>
const _ulBagItens = document.getElementById('bagItens');
// array para guardar os itens salvos
let _addedItemsInBag = [];

_form.addEventListener("submit", (evento) => {
    evento.preventDefault();

    const inputName = evento.target.elements.name;
    const inputQty = evento.target.elements.quantity;

    // para capturar os valores dos campos do formulário
   const newItem = {
        name: inputName.value,
        qty: inputQty.value
   };

   saveNewItem(newItem);
   addItemInBag(newItem);
   clearForm(inputName, inputQty);

});

loadBag();

function saveNewItem(newItem) {
    loadFromStorage();
    _addedItemsInBag.push(newItem);
    // save itens in local storage
    localStorage.setItem('items', JSON.stringify(_addedItemsInBag));
}

function loadFromStorage(){
    const storagedItems = localStorage.getItem('items');

    if (storagedItems != null && storagedItems.length > 0) {
        _addedItemsInBag = JSON.parse(storagedItems);
    }
}

function loadBag(){
    loadFromStorage();
    _addedItemsInBag.forEach((item) => { 
            addItemInBag(item); 
        });
}

function clearForm(inputName, inputQty) {
    inputName.value = '';
    inputQty.value = '';    
}

function addItemInBag(item){
    // cria um novo elemento de lista
    const liTag = document.createElement('li');
    // adiciona a classe chamada item ao novo item para aplicar o css
    liTag.classList.add("item");

    // cria uma nova tag <strong>
    const strongTag = document.createElement('strong');
    // adiciona a quantidade ao conteúdo interno da tag strong
    strongTag.innerHTML = item.qty;   

    // adiciona o elemento <strong> dentro do novo item da lista <li>
    liTag.appendChild(strongTag);

    // adiciona ao conteúdo interno do HTML o texto 'nome'
    liTag.innerHTML += item.name;

    // adiciona o novo <li> a lista <ul>
    _ulBagItens.appendChild(liTag);

}
1 resposta

Oi Leonardo, tudo bem?

Muito obrigada por compartilhar com a gente o seu código! Muito bom ver você praticando :D

Ficou muito bom e é ótimo que você deixa comentários no código, é uma ótima maneira de fixar bem o que cada linha de código faz.

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software