DEV Community

Rahul kumar
Rahul kumar

Posted on

Save your application from crashing by wrong use of Web Storage API or localStorage in browser

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

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.

// 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
Enter fullscreen mode Exit fullscreen mode

Let's try

block-cookie

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

HTML file

<!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>
Enter fullscreen mode Exit fullscreen mode

JavaScript file

// index.js
if(localStorage)
    console.log("local item storage is persent")
console.log("hello")
Enter fullscreen mode Exit fullscreen mode

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.

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

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.

/**
 * 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');
Enter fullscreen mode Exit fullscreen mode

conclusion

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

If you liked, then please give a starthttps://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c

Thanku

Discussion (2)

Collapse
darkwiiplayer profile image
DarkWiiPlayer

I have cookies disabled by default and many websites completely refuse to work and just stay blank instead. Every web developer needs to read this article!

Collapse
ats1999 profile image
Rahul kumar Author

Please, do share this.
Also, thanks for reading.