Local Storage

Question 1

What is local storage? and who provides the functionality?

Answer 1

Ability to store data, after tab is closed and computer is closed down. It depends on the browser. E.g firefox/Chrome, which provides this API.

Question 2

In what form is it stored?

Answer 2

Key value pairs.

Question 3

What does the Web API web storage allow you to do to data?

Answer 3

setItem, getItem, removeItem, clear.

Question 4

What is difference local storage and session storage?

Answer 4

Session Storage: data is only available for the duration of the browser session. It is cleared when the user closes the browser or after a specified timeout period of inactivity.

Local - persists beyond closing browser/pc.

Question 5

How would I set name: Laura into local storage?

Answer 5

localStorage.setItem(“name”, “Laura”);

Question 6

How would I ‘get’ the local Storage of localStorage.setItem(“name”, “Laura”); and then console.log it?

Answer 6

const name = localStorage.getItem(‘name’);

console.log(name);

Question 7

How would I remove an item from local Storage, and would I use the value or the key?

Answer 7

• the key.

localStorage.removeItem(‘name’);

Question 8

How do I clear all localStorage?

Answer 8

localStorage.clear();

Question 9

Data in local Storage can only be stored as a …

Answer 9

String or key value pairs

Question 10

In order for a JS object or string or other values, to be stored in local Storage what method needs to be used? What does this do?

Answer 10

JSON.stringify();

It changes the JSON (JavaScript Object Notation) into a string to able to store it locally. JSON-formatted string.

Question 11

if you have data which has been changed into a JSON formatted string, in local storage, how can you convert it back to use in JS?

Answer 11

JSON.parse(element);

const friends = JSON.parse(localStorage.getItem(‘friends));

console.log(friends) / friends.[0] etc

Question 12

Describe what is happening here:

let coffees;

if (localStorage.getItem(“coffees”)) {
coffees = JSON.parse(localStorage.getItem(“coffees”));
} else {
coffees = [];
}

console.log(coffees);

coffees.push(“cappucino”);
localStorage.setItem(“coffee-array”, JSON.stringify(coffees));

Answer 12

1) create an empty array.

2) if the item already exists in local storage then parse it and bring it back to JavaScript.

3) If not then create an empty coffee array.

4) if it’s empty then push a cappucino item to local storage by stringifying it.

Question 13

What is the ‘window’?

Answer 13

The “window” object is a global object in the browser’s JavaScript environment. It represents the current browser window or tab and serves as the global scope for JavaScript code running within that window.

Question 14

What does the window object provide? Give an example.

Answer 14

The “window” object provides various properties and methods to interact with the browser window, such as manipulating the DOM (Document Object Model), setTimeout() etc.

Question 15

What is the difference between invoking a function, and referencing it?

Answer 15

Invoking, is making the code run directly.

References are not running them, but using them in another function for example as a call back OR just storing it.

Referencing a function means obtaining a reference to the function itself without invoking it, allowing you to store the function or pass it as a value for later invocation.

Question 16

function marriageProposal(name, surname) {
console.log(“He said yes - Of course I will marry you “ + name);
}

setTimeout(marriageProposal, 5000, “Laura”, “Kambanis” );

WHAT DOES THIS CODE DO?

Answer 16

It is a callback function, which will be carried out after 5 seconds.

Question 17

What’s the difference between setTimeout() and setInterval()?

Answer 17

setInterval() is a function used to repeatedly execute a function or a code block with a fixed time interval between each execution.

setTimeout() is a function used to execute a function or a code block once after a specified delay (in milliseconds).

Question 18

What does the unique identifier mean/do in setInterval()?

Answer 18

It is the ‘counter’ for each sort of iteration of the timer. You can use it to cancel the timer.

const intervalId = setInterval(function, delay); - This would be ID - 1.

Question 19

What is the use of DOMContentLoaded() window event?

<!DOCTYPE html>

<html>
<head>
<title>DOM Content Loaded Example</title>
</head>
<body>
<h1>Hello, World!</h1>

<script>
// This event listener will be triggered when the DOM is fully loaded and ready to be manipulated.
    document.addEventListener('DOMContentLoaded', function() {
      // Your code that depends on the DOM can be placed here.
      // For example, you can interact with DOM elements or set up event listeners.
      const heading = document.querySelector('h1');
      heading.textContent = 'Hello, DOM Content Loaded!';
    });
</script>

</body>
</html>

Answer 19

-The event is fired - HTML document has been completely loaded and parsed.

• without waiting for images, stylesheets, or external resources to finish loading.

Useful so you can use site function -e.g search, without waiting for all videos/ images - faster.

Question 20

What is

window.addEventListener('load', function() { }

Answer 20

-Event triggered - when a web page and all its external resources (like images, stylesheets, scripts, etc.) have finished loading.

• It is fired once all resources on the page have been fetched and rendered, ensuring that the entire page, including external content, is ready for interaction.

Question 21

Which is bigger viewport or window?

Answer 21

-Window is bigger. Includes all content on webpage even if you have to scroll. Includes - address bar, navigation buttons, and tabs/ search bar.

• Viewport - the visible area of the web page that you can see without scrolling. Only part user interacts with. E.g website content.
• viewport size will be smaller than that if you have scrollbars, or if your web page content doesn’t fully occupy the entire screen.

WINDOW -