Estoy obteniendo datos json de una API de noticias en Vanilla JS. Creé teasers para las informaciones obtenidas. Cuando hago clic en uno de los teasers, necesito pasar una identificación y, según la identificación, algún contenido a otra "página de detalles". Los datos de recepción se ven así:
[{"id":6657824,"title":"Britische Medienaufsicht: 16 Prozent der britischen Kleinkinder schon auf Tiktok","synopsis":"Eine Studie der britischen Medienaufsichtsbehörde Ofcom zeigt, dass 16 Prozent der 4- bis 5-Jährigen bereits Videos der Kurzvideoplattform Tiktok ansehen.","meta":{"pubDate":"2022-03-30T17:36:00+02:00"},"image":{"src":"https://heise.cloudimg.io/v7/_www-heise-de_/imgs/18/3/4/4/4/7/9/9/shutterstock_576828061.jpg-4a293722ddae462b.jpeg?org_if_sml=1&q=70&width=3800","width":"3800","height":"2135","alt":"Kind schaut im Dunkeln auf ein beleuchtetes Display"}}]El código JS que genera mi teaser + botón leer más se ve así:
const detail = document.createElement('a'); const linkText = document.createTextNode("Mehr erfahren"); detail.appendChild(linkText); detail.href = loadNews(); detail.target="_blank"; newNews.appendChild(detail)Puede pasar la información relevante como parámetros de consulta , por ejemplo, href = "link/to/detail-page.html?id=6657824" . y léalo en la página siguiente a través de new URLSearchParams(location.search).get("id") .
También es posible almacenar la respuesta completa de los teasers en indexedDB / localStorage si desea recuperarla en la página siguiente sin volver a buscarla (por ejemplo, cuando el servidor no puede enviar los encabezados de caché correctos).