Learning Notes #85 โ Local Storage in Browsers
Introduction
The Web storage api is a set of mechanisms that enable browsers to store key-value pairs. Before HTML5, application data had to be sorted in cookies, included in every server request. Its intended to be far more user-friendly than using cookies.
Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.
There are 2 types of web storage,
- Local Storage
- Session Storage
We already have cookies. Why additional objects?
Unlike cookies, web storage objects are not sent to server with each request. Because of that, we can store much more. Most modern browsers allow at least 5 megabytes of data (or more) and have settings to configure that.
Also unlike cookies, the server canโt manipulate storage objects via HTTP headers. Everythingโs done in JavaScript.The storage is bound to the origin (domain/protocol/port triplet). That is, different protocols or subdomains infer different storage objects, they canโt access data from each other.
In this guide, you will learn/refresh about LocalStorage.
LocalStorage
The localStorage is property of the window (browser window object) interface allows you to access a Storage object for the Documentโs origin; the stored data is saved across browser sessions.
- Data is kept for a longtime in local storage (with no expiration date.). This could be one day, one week, or even one year as per the developer preference ( Data in local storage maintained even if the browser is closed).
- Local storage only stores strings. So, if you intend to store objects, lists or arrays, you must convert them into a string using JSON.stringfy()
- Local storage will be available via the window.localstorage property.
- Whatโs interesting about them is that the data survives a page refresh (for sessionStorage) and even a full browser restart (for localStorage).
Functionalities
// setItem normal strings window.localStorage.setItem("name", "goku"); // getItem const name = window.localStorage.getItem("name"); console.log("name from localstorage, "+name); // Storing an Object without JSON stringify const data = { "commodity":"apple", "price":43 }; window.localStorage.setItem('commodity', data); var result = window.localStorage.getItem('commodity'); console.log("Retrived data without jsonified, "+ result); // Storing an object after converting to JSON string. var jsonifiedString = JSON.stringify(data); window.localStorage.setItem('commodity', jsonifiedString); var result = window.localStorage.getItem('commodity'); console.log("Retrived data after jsonified, "+ result); // remove item window.localStorage.removeItem("commodity"); var result = window.localStorage.getItem('commodity'); console.log("Data after removing the key "+ result); //length console.log("length of local storage " + window.localStorage.length); // clear window.localStorage.clear(); console.log("length of local storage - after clear " + window.localStorage.length);
When to use Local Storage
- Data stored in Local Storage can be easily accessed by third party individuals.
- So its important to know that any sensitive data must not sorted in Local Storage.
- Local Storage can help in storing temporary data before it is pushed to the server.
- Always clear local storage once the operation is completed.
Where the local storage is saved ?
Windows
- Firefox: C:\Users\\AppData\Roaming\Mozilla\Firefox\Profiles\\webappsstore.sqlite, %APPDATA%\Mozilla\Firefox\Profiles\\webappsstore.sqlite
- Chrome: %LocalAppData%\Google\Chrome\User Data\Default\Local Storage\
Linux
- Firefox: ~/.mozilla/firefox//webappsstore.sqlite
- Chrome: ~/.config/google-chrome/Default/Local Storage/
Mac
- Firefox: ~/Library/Application Support/Firefox/Profiles//webappsstore.sqlite, ~/Library/Mozilla/Firefox/Profiles//webappsstore.sqlite
- Chrome: ~/Library/Application Support/Google/Chrome//Local Storage/, ~/Library/Application Support/Google/Chrome/Default/Local Storage/
Downside of Localstorage
The majority of local storageโs drawbacks arenโt really significant. You may still not use it, but your app will run a little slower and youโll experience a tiny developer inconvenience. Security, however, is distinct. Knowing and understanding the security model of local storage is crucial since it will have a significant impact on your website in ways you might not have anticipated.
Local storage also has the drawback of being insecure. In no way! Everyone who stores sensitive information in local storage, such as session data, user information, credit card information (even momentarily! ), and anything else you wouldnโt want shared publicly on social media, is doing it incorrectly.
The purpose of local storage in a browser for safe storage was not intended. It was intended to be a straightforward key/value store for strings only that programmers could use to create somewhat more complicated single page apps.
General Preventions
- For example, if we are using third party JavaScript libraries and they are injected with some scripts which extract the storage objects, our storage data wonโt be secure anymore. Therefore itโs not recommended to save sensitive data as
- Username/Password
- Credit card info
- JWT tokens
- API keys
- Personal info
- Session ids
- Do not use the same origin for multiple web applications. Instead, use subdomains since otherwise, the storage will be shared with all. Reason is, for each subdomain it will have an unique localstorage; and they canโt communicate between subdomain instances.
- Once some data are stored in Local storage, the developers donโt have any control over it until the user clears it. If you want the data to be removed once the session ends, use SessionStorage.
- Validate, encode and escape data read from browser storage
- Encrypt data before saving