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

getLocalStorage
setLocal…


This content originally appeared on DEV Community and was authored by Rahul kumar

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

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>

JavaScript file

// 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.

// 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.

/**
 * 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 starthttps://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c

Thanku


This content originally appeared on DEV Community and was authored by Rahul kumar


Print Share Comment Cite Upload Translate Updates
APA

Rahul kumar | Sciencx (2021-09-19T17:19:47+00:00) Save your application from crashing by wrong use of Web Storage API or localStorage in browser. Retrieved from https://www.scien.cx/2021/09/19/save-your-application-from-crashing-by-wrong-use-of-web-storage-api-or-localstorage-in-browser/

MLA
" » Save your application from crashing by wrong use of Web Storage API or localStorage in browser." Rahul kumar | Sciencx - Sunday September 19, 2021, https://www.scien.cx/2021/09/19/save-your-application-from-crashing-by-wrong-use-of-web-storage-api-or-localstorage-in-browser/
HARVARD
Rahul kumar | Sciencx Sunday September 19, 2021 » Save your application from crashing by wrong use of Web Storage API or localStorage in browser., viewed ,<https://www.scien.cx/2021/09/19/save-your-application-from-crashing-by-wrong-use-of-web-storage-api-or-localstorage-in-browser/>
VANCOUVER
Rahul kumar | Sciencx - » Save your application from crashing by wrong use of Web Storage API or localStorage in browser. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/19/save-your-application-from-crashing-by-wrong-use-of-web-storage-api-or-localstorage-in-browser/
CHICAGO
" » Save your application from crashing by wrong use of Web Storage API or localStorage in browser." Rahul kumar | Sciencx - Accessed . https://www.scien.cx/2021/09/19/save-your-application-from-crashing-by-wrong-use-of-web-storage-api-or-localstorage-in-browser/
IEEE
" » Save your application from crashing by wrong use of Web Storage API or localStorage in browser." Rahul kumar | Sciencx [Online]. Available: https://www.scien.cx/2021/09/19/save-your-application-from-crashing-by-wrong-use-of-web-storage-api-or-localstorage-in-browser/. [Accessed: ]
rf:citation
» Save your application from crashing by wrong use of Web Storage API or localStorage in browser | Rahul kumar | Sciencx | https://www.scien.cx/2021/09/19/save-your-application-from-crashing-by-wrong-use-of-web-storage-api-or-localstorage-in-browser/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.