ACIT 1620

Week 12

---

Objectives:

• Fetch API
• Local Storage

---

Fetch API

• Allows making HTTP requests programmatically
• No page reloads
• Often used to access data from a variety of data endpoints, including RESTful web services
• Asynchronous, i.e. returns a promise
• Generally uses JSON

---

REST (REpresentational State Transfer)

• Exposes networked resources represented as URIs
• Accessed using HTTP protocols

Examples:

• /users : a collection of users
• /users/1: a single user
• /users/1/posts: blog posts belonging to a particular user

---

HTTP methods/ verbs

• GET: for retrieving resources
• POST: for creating a resource
• PUT: for fully updating an existing resource
• PATCH: for partially updating an existing resource
• DELETE: for deleting a resource

---

Examples

Schema (blog post):

{
   title: '',
   body: '',
}

Retrieving resources

fetch("/posts")
.then(response => response.json())
.then(data => {
    // use data
    console.log(data);
})
.catch(error => console.error(error));

---

Creating a resource

fetch("/posts", {
    method: 'POST',
    headers: {
        'Content-type': 'application/json',
    },
    body: JSON.stringify({
        title: 'My title',
        body: 'post body',
    }),
})
.then(response => response.json())
.then(data => {
    // use data -> the newly created resource
    console.log(data);
})
.catch(error => console.error(error));

---

Updating a resouce

fetch("/posts/1", {
    method: 'PUT',
    headers: {
        'Content-type': 'application/json',
    },
    body: JSON.stringify({
        id: 1,
        title: 'New title',
        body: 'new post body'
    }),
})
.then(response => response.json())
.then(data => {
    // use data -> the updated resource
    console.log(data);
}).catch(error => console.error(error));

---

Deleting a resource

fetch("/posts/1", {
    method: 'DELETE',
})
.then(response => {
    if (response.ok) console.log('Deleted!')
})
.catch(error => console.error(error));

---

Using async/await

async function getPosts() {
    try {
        const response = await fetch("/posts");
        const data = await response.json();
    
        // use data
        console.log(data)
    } catch(error) {
        console.error(error);
    }
}

getPosts();

---

Local Storage

• part of Web Storage API
• two varieties: localStorage and sessionStorage
• sessionStorage lets you store data on the client for a single session (until the browser or tab is closed)
• localStorage lets you store data on the client that persists until explicitly deleted.

---

Origin

• Local storage APIs create a storage area per origin
• origin to the part of a URL that includes the protocol or scheme, the hostname and port.
  • Eg: https://example.com
• Both https://example.com/sales/ and https://example.com/products share the same origin
• …but not https://sales.example.com

---

• use localStorage.getItem(item) to retrieve an item from storage. Returns null if the item does not exist
• use localStorage.setItem(item, value) to store an item in storage
• localStorage can only store strings (both keys and values)

---

• localStorage can only store string objects
• To store complex data structures, you need to first convert them to a string representation using JSON
  • JSON.stringify(obj): converts an object to a string representation in JSON format
  • JSON.parse(JSON_string): converts a JSON object into a javascript object

---

• Take the following object for example:

const person = {
    name: 'John Doe',
    age: 35
};

You can store it like so:

localStorage.setItem('john', JSON.stringify(person));

You can retrieve it like so:

const person = JSON.parse(localStorage.getItem('john'));