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
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
Top comments (2)
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!
Please, do share this.
Also, thanks for reading.