I'm fetching json data from a news api in vanilla JS. I created teasers for the fetched informations. When I click on one of the teasers I need to pass a ID and based on the ID some content to another "detail page". The receiving data looks like this:
[{"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"}}]
The JS-Code that generates my teaser + read more button looks like this:
const detail = document.createElement('a');
const linkText = document.createTextNode("Mehr erfahren");
detail.appendChild(linkText);
detail.href = loadNews();
detail.target="_blank";
newNews.appendChild(detail)
You can pass the relevant information as query params e.g. href = "link/to/detail-page.html?id=6657824". and read it on the next page via new URLSearchParams(location.search).get("id").
Also possible to store the whole teasers response in indexedDB/ localStorage if you want to retrieve it on the next page without fetching them again (e.g. when the server can't send the correct cache headers.)