An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
Some of Our Sources
- Team Treehouse
- Spoon Graphics
- Smashing Magazine
- TutsPlus - Design
- Web Design Ledger
- Stylized Web
- Specky Boy
- Freelance Switch
- Design Modo
- Android Headlines
Help Webnuz
Referal links:
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 blockedUncaught 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:1Let'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.jsif(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.jstry { 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; }}// callgetLocalStorage('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
Original Link: https://dev.to/ats1999/save-your-application-from-crashing-by-wrong-use-of-web-storage-api-or-localstorage-in-browser-i53
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To