HTML5 Web APIs (Overview)

What is a Web API?

A Web API is a built-in browser feature you control with JavaScript. HTML5 added many. You will use these properly in the JavaScript module — here is the map so you know they exist.

Web Storage — save in the browser

Web Storage (often called localStorage) lets a page remember small pieces of information right inside the browser, even after the visitor closes the tab. The little demo below saves a name and reads it back. Do not worry about the JavaScript yet — just read the walk-through after it.

<button onclick="save()">Save name</button>
<button onclick="load()">Load name</button>
<input id="n" placeholder="your name">
<p id="out"></p>
<script>
  function save(){ localStorage.setItem('name', document.getElementById('n').value); }
  function load(){ document.getElementById('out').textContent = 'Saved: ' + localStorage.getItem('name'); }
</script>

Clicking Save name runs localStorage.setItem('name', ...), which tucks whatever you typed into the browser’s storage under the key name. Clicking Load name runs localStorage.getItem('name') to read it back and show it. The clever part: the value survives even if you close the tab and return later.

Geolocation — where am I?

Geolocation is the browser feature that can tell a page where the visitor is in the world — but only after they give permission. The demo below shows your latitude and longitude (the two numbers that pinpoint any spot on Earth) when you click the button. Again, just follow the explanation underneath.

<button onclick="findMe()">Find my location</button>
<p id="loc"></p>
<script>
  function findMe(){
    navigator.geolocation.getCurrentPosition(function(p){
      document.getElementById('loc').textContent =
        'Lat ' + p.coords.latitude.toFixed(2) + ', Lng ' + p.coords.longitude.toFixed(2);
    });
  }
</script>

Clicking the button calls navigator.geolocation.getCurrentPosition(...). The browser first asks the user for permission; only if they allow it does it run the function, which receives the position p and reads p.coords.latitude and longitude to display them. Permission first is the key safety idea — a site can never grab your location silently.