# Web APIs

## Canvas API

{% code title="index.html" %}
```html
<canvas id="canvas"></canvas>
```
{% endcode %}

{% code title="index.js" %}
```javascript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);
```
{% endcode %}

## DOM

* DOM document is a big tree of nodes

## Fetch API

## Geolocation API

* returns the location of the device

```javascript
navigator.geolocation.getCurrentPosition(function(loc){
    console.log(loc.coords.latitude + ', ' + loc.coords.longitude);
}
```

## Web Storage API

* With web storage, web applications can store data locally within the user's browser.
* Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.
* Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.
* Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.

Before using web storage, check browser support for `localStorage` and `sessionStorage`:

```css
if (typeof(Storage) !== "undefined") {
  // Code for localStorage/sessionStorage.
} else {
  // Sorry! No Web Storage support..
}
```

HTML web storage provides two objects for storing data on the client:

### `window.localStorage`

* stores the data with no expiration date

{% code title="index.js" %}
```javascript
// Store
window.localStorage.setItem("language", "JavaScript");

// Retrieve
console.log(window.localStorage.getItem("language")); // JavaScript

// Delete
window.localStorage.removeItem("language");
```
{% endcode %}

### `sessionStorage`

* stores data for one session (data is lost when the browser tab is closed)

{% code title="index.js" %}
```javascript
// Store
sessionStorage.setItem("language", "JavaScript");
// sessionStorage.language = "JavaScript";

// Retrieve
console.log(sessionStorage.getItem("language"));
```
{% endcode %}

{% hint style="info" %}
Name/value pairs are always stored as strings. Remember to convert them to another format when needed.
{% endhint %}

## Web Workers API

When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.

A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

Before creating a web worker, check whether the user's browser supports it:

{% code title="index.js" %}
```javascript
if (typeof(Worker) !== "undefined") {
  // Yes! Web worker support!
  // Some code.....
} else {
  // Sorry! No Web Worker support..
}
```
{% endcode %}

## XHR

`XMLHttpRequest` (XHR) is a JavaScript API to create AJAX requests.&#x20;

* Its methods provide the ability to send network requests between the browser and a server.
* It can be used to retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing.

{% hint style="info" %}
`XMLHttpRequest` can be used to retrieve any type of data, not just XML.
{% endhint %}

{% embed url="https://developer.mozilla.org/en-US/docs/Web/API" fullWidth="true" %}
