Save your application from crashing by wrong use of Web Storage API or localStorage in browser
Tags: javascript, news, react
Published: 2021-09-19 17:19:47


While coding front-end applications, we many need to store some data on client side. There are four types of storage on browser namely cookie, localStorage, sessionStorage and indexDB. 

## Github source
see code for 
- [getLocalStorage](https://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c#file-save-web-storage-js-L2)
- [setLocalStorage](https://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c#file-save-web-storage-js-L12)
- [isCookie](https://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c#file-save-web-storage-js-L23)


## What is `Web Storage API`
The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.

<https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API>


***
When you refer the above mentioned document, then you'll get the importance of **web storage**.  But do you know that if you are not using it safely, then it'll brake your application from further processing. Meaning, if cookie is blocked, then you won't be able to access `web storage API`, it'll throw an error like below.

```js
// error - when cookie is blocked
Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    at file:///home/rahul/Desktop/projects/test/index.js:1:1
```

## Let's try
[block-cookie](https://www.google.com/search?q=how+to+block+cookie&oq=how+to+block+cookie&aqs=chrome..69i57.4096j0j1&sourceid=chrome&ie=UTF-8)

> You can refer the above link to know more about, how can you block cookie. 

**HTML file**
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="index.js"></script>
    <title>Document</title>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>
```

**JavaScript file**
```js
// index.js
if(localStorage)
    console.log("local item storage is persent")
console.log("hello")
```

Now, after blocking the cookie, load the HTML file in browser. You won't see any information on browser console`(hello),etc`. This is because, once your script encountered exception, javascript engine stops the further processing. 

In order to avoid the crashing the application, we need to wrap the code into `try` and `catch`.

```js
// index.js
try {
    if(localStorage)
        console.log("local item storage is persent")
} catch (error) {
    console.log(error)
}
console.log("hello")
```

Now, you can try the above code. In the above code exception is handled by `catch` block. Although, we still can not access `localStorage` but this way our application will not crash.

## Do i need to `try/catch` every where?
Writing `try/catch` every where can be tedious task. To avoid writing `try/catch`, we can wrap it into another function. 

```js
/**
 * get item from localstorage
 * @param {String} str name of attribte in local storage`
 * @returns item | false
 */
function getLocalStorage(str){
    try {
        return localStorage.getItem(str);
    } catch (error) {
        return false;   
    }
}

// call
getLocalStorage('item');
```

## conclusion
instead of using `localStorage.getItem(str)` , we should use `getLocalStorage(str)`.

If you liked, then please give a start<https://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c>
## Thanku