The Storage API Module #38

Question 1

What are the two mechanisms provided by the Web Storage API.

Answer 1

“Session Storage” and “Local Storage”.

Question 2

How does session storage work?

Answer 2

This data only exists as long as the user is on a page. As soon as the tab or window is closed the data is cleared. Multiple pages of the same site will have unique instances of session storage data.

Question 3

How does Local Storage differ from Session Storage

Answer 3

While Session Storage is cleared immediately upon the closure of a browser window, Local Storage persists until it is explicitly removed by the program or the end user.

Question 4

How does their set of properties and methods differ?

Answer 4

They do not differ. They access the same Storage object.

Question 5

What property is available to the Storage object?

Answer 5

Length (which is the number of data items stored into it)

Question 6

Describe the setItem method

Answer 6

Adds the item to the storage and accepts a string as a key and a string as a value. As below:

localStorage.setItem(“username”, “flaviocopes”)
localStorage.setItem(“id”, “123”)

Question 7

What happens if you pass a value in setItem that is not a string?

Answer 7

Boom, the item is converted into string format. Consider the below:

localStorage.setItem(“test”, 123) // stored as ‘123’ or
localStorage.setItem(“test”, {test: 1}) stored as “[object Object]”

Question 8

How can we retrieve a key value from storage?

Answer 8

By invoking the getItem(key) syntax. Just use the name of the key inside the parenthesis to retrieve the value.

localStorage.getItem(“username”) // ‘flaviocopes’
localStorage.getItem(“id”) // ‘123’

Question 9

How can an item be removed from the storage object?

Answer 9

By invoking the (removeItem(key) method.

localStorage.removeItem(“id”)

Question 10

When you encounter key(n) or key number what is the concept here?

Answer 10

Keys added into the Storage Object have index numbers. However MDN states that the index is set by the user agent (browser) therefore the order is unreliable. Storage items that do not exist return a value of NULL.

Question 11

How can we clear the storage object.

Answer 11

By calling the clear( ) method. As below:

localStorage.clear( )

Question 12

What are the storage limits of Local and Session storage?

Answer 12

Your mileage my vary. It seems to me that >5mb is sufficient. That said, for the big market share browsers, such as Chrome, Firefox and IE allow for 10mb while Safari allows 5mb of Local Storage and unlimited Session Storage. Same on mobile, unless you’re targeting very old versions of iOS.

Question 13

How are errors handled when the storage quota gets exceeded?

Answer 13

Using the exact same structure (try & catch) as error handling for Fetch or Axios. See below:

try {
  localStorage.setItem("key", "value")
} catch (domException) {
  if (
    ["QuotaExceededError", "NS_ERROR_DOM_QUOTA_REACHED"].includes(
      domException.name
    )
  ) {
    // handle quota limit exceeded error
  }
}