Tengo dos archivos HTML: índice y categorías. En index.html, creé la lista de categorías usando la función javascript y agregué una etiqueta para dirigir al usuario a las categorías.html (todos los enlaces tienen el mismo atributo href). Quiero cambiar el contenido de las categorías.html de acuerdo con el texto interno de la etiqueta en la que se hizo clic en la página anterior.
Utilicé localStorage para almacenar todos los nombres de categoría, pero no sé cómo usar esos nombres para buscarlos en category.html cuando no sé qué etiqueta dirigió al usuario a category.html. ¿Cómo puedo detectar el enlace en el que se hizo clic?
Estoy compartiendo la creación de elementos y el código de almacenamiento local en caso de que el problema se pueda solucionar en ese código:
import { fetchData, createListItem} from "../Utils.js"; // List Categories const createHeroCategories = () => fetchData("https://www.themealdb.com/api/json/v1/1/categories.php") .then((data) => { data.categories.forEach((category) => createListItem(".categories-list", category["strCategory"], "category-item") ); Array.from(document.getElementsByClassName('category-item')).forEach(element => { let temp = element.innerText; element.innerHTML = `<a href="./pages/categories.html">${temp}</a>`; localStorage.setItem(`${temp}`, temp); }) }) .catch((e) => alert(e.message)); export {createHeroCategories};El problema se resolvió agregando la función onclick que asigna el texto interno a una sola variable llamada "clickedItem". Cambiará el valor almacenado, si se hace clic en otra etiqueta. Se me ocurrió esta solución ya que el método "setItem" se puede usar para cambiar/sobrescribir el valor anterior de la misma variable. El valor se almacenará cuando el usuario esté en index.html, justo antes de ser dirigido a las categorías.html.
Array.from(document.getElementsByClassName('category-item')).forEach(element => { let temp = element.innerText; element.innerHTML = `<a onclick="localStorage.setItem('clickedItem','${temp}');" href="./pages/categories.html">${temp}</a>`; })De esta manera, se puede llamar a "clickedItem" en las categorías.html, y se puede usar para buscar usando literales de plantilla como este:
let clickedItem = localStorage.getItem("clickedItem") let API = `https://www.themealdb.com/api/json/v1/1/filter.php?c=${clickedItem}` fetch(API).then(...).catch(...)