Tengo un problema con sessionStorage; en particular, quiero que la identificación de los anuncios se guarde en la sesión en la que el usuario pone el me gusta en ese artículo favorito en particular.
Sin embargo, observo que la matriz de objetos que se devuelve contiene los identificadores que comienzan con comillas simples, como se muestra a continuación:
['', '1', '7']
pero quiero que se me muestre '1' directamente.
Mientras que si entro en sessionStorage, noto que me gusta se muestra como:
,1,7
es decir, con la coma inicial, pero quiero que comience directamente con el número.
¿Cómo puedo arreglar esto?
function likeAnnunci(){ let likeBtn = document.querySelectorAll('.like'); likeBtn.forEach(btn => { btn.addEventListener('click', function(){ let id = btn.getAttribute('ann-id'); //sessionStorage.setItem('like', []) let storage = sessionStorage.getItem('like').split(','); //console.log(storage); if(storage.includes(id)){ storage = storage.filter(id_a => id_a != id); } else { storage.push(id); } sessionStorage.setItem('like', storage) console.log(sessionStorage.getItem('like').split(',')); btn.classList.toggle('fas'); btn.classList.toggle('far'); btn.classList.toggle('tx-main'); }) }) }; function setLike(id){ if(sessionStorage.getItem('like')){ let storage = sessionStorage.getItem('like').split(','); if(storage.includes(id.toString())){ return `fas` } else { return `far` } } else { sessionStorage.setItem('like', ''); return`far`; } }El principal problema que tiene es que se está dividiendo en un , en lugar de usar JSON.parse() .
Además, tiene otros problemas de código y errores lógicos.
Solución:
function likeAnnunci() { const likeBtn = document.querySelectorAll('.like'); likeBtn.forEach((btn) => { btn.addEventListener('click', function () { let id = btn.getAttribute('ann-id'); //sessionStorage.setItem('like', []) let storage = JSON.parse(sessionStorage.getItem('like') || '[]'); //console.log(storage); if (!storage.includes(id)) { storage.push(id); } sessionStorage.setItem('like', JSON.stringify(storage)); console.log(JSON.parse(sessionStorage.getItem('like'))); btn.classList.toggle('fas'); btn.classList.toggle('far'); btn.classList.toggle('tx-main'); }); }); }Solución más modular y óptima:
const likeBtns = document.querySelectorAll('.like'); // If there is no previous array stored, initialize it as an empty array const initLikesStore = () => { if (!sessionStorage.getItem('likes')) sessionStorage.setItem('likes', JSON.stringify([])); }; // Get the item from sessionStorage and parse it into an array const grabLikesStore = () => JSON.parse(sessionStorage.getItem('likes')); // Set a new value for the likesStore, automatically serializing the value into a string const setLikesStore = (array) => sessionStorage.setItem('likes', JSON.stringify(array)); // Pass in a value. const addToLikesStore = (value) => { // Grab the current likes state const pulled = grabStorage(); // If the value is already there, do nothing if (pulled.includes(value)) return; // Otherwise, add the value and set the new array // of the likesStore storage.push(value); setLikesStore(pulled); }; const likeAnnunci = (e) => { // Grab the ID from the button clicked const id = e.target.getAttribute('ann-id'); // Pass the ID to be handled by the logic in the // function above. addToLikesStore(id); console.log(grabLikesStore()); btn.classList.toggle('fas'); btn.classList.toggle('far'); btn.classList.toggle('tx-main'); }; // When the dom content loads, initialize the likesStore and // add all the button event listeners window.addEventListener('DOMContentLoaded', () => { initLikesStore(); likeBtns.forEach((btn) => btn.addEventListener('click', likeAnnunci)); });