How to store and use data in HTML

Script Literal expression

When creating you HTML document, you can add/inject a javascript expression that contains your data.

For instance:

• The injected script element with the data

<script>
let data = {
   property: "injectedValue"
}
</script>

• You can then use it with your code or library

console.log(`The value injected is:  ${data.property}`);

• Output:

Data Block

Example of a ld json: data block

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "url": "http://www.example.com",
  "name": "Unlimited Ball Bearings Corp.",
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+1-401-555-1212",
    "contactType": "Customer service"
  }
}
</script>

Data Scheme

With the url data scheme

Example with a hello world text encode:

<a href="data:text/plain,SGVsbG8gV29ybGQgIQ==" download="hello-world.txt">Download hello-world.txt</a>

Data Attribute

In the HTML data attribute where you can store data for a element.

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
</article>

Json Module

You can also import data via a JSON module

 import peopleInSpace from "http://api.open-notify.org/astros.json" assert { type: "json" };

 const list = document.querySelector("#people-in-space");
 for (const { craft, name } of peopleInSpace.people) {
   const li = document.createElement("li");
   li.textContent = `${name} / ${craft}`;
   list.append(li);
 }