LocalStorage Is Cool, But Be Mindful of How You Use It.

Not all data needs to go to a server.

If you are Amazon and you’re storing massive amounts of information in your server about each and every product you sell, do you really want to also store the information about each individual user’s preferences while visiting your site? Like say, what language they speak, whether the prefer light or dark mode, what they stored in their shopping cart but haven’t yet committed to purchasing, etc.? Probably not. The server is already busy handling transactions, shipping information, and more, it doesn’t need to be overloaded with these small pieces of information too. Cookies have been around forever to store such information, but the problem with cookies is that the information is still stored in every server request, and also cookies have limited storage space. Not ideal for more modern web experiences that emphasize greater client-side customization and interactions. Thus LocalStorage was born.

What is LocalStorage?

Simply enough, it’s a form of client-side storage! It’s mostly used to store information that doesn’t need to be transferred to a database. This is a feature purely related to JavaScript websites and stores information as a JavaScript object in key/value pairs. The information can only be saved as strings, so don’t try anything too fancy.

Console in Chrome DevTools (Option⌥ +Command⌘ + I)

Local Storage Methods.

1. ) setItem(); — how to establish a key/value pair in the browser.
2. ) getItem(); — how to retrieve one of those key/value pairs
3. ) removeItem(); —how to delete a key/value pair
4. .) key(); — shows the key name of the given index number
5. ) clear(); — this clears all keys stored in localStorage.

The important traits of LocalStorage

The biggest benefit of LocalStorage is the amount of data that can be stored using it (5MBs! Although this is contested and might theoretically be more.), while also being credibly easy to use. Where cookies max at 4KB, LocalStorage can hold a lot of information. This can be a good and bad thing, depending on how you use it. There might be instances where you want to JSON.stringify() some data, however authorization tokens or user session data should never be used in localStorage, as it is not secure. If you wouldn’t want the information shared publicly, it shouldn’t be stored to LocalStorage. It was designed to hold key/value pairs as strings, not store secure data! However, if you want to be able to save an article on Medium or store a draft of a story, LocalStorage is pretty good for that sort of information(unless you’re writing your next hit novel and don’t want it to leak)!

localStorage.length returns the amount of items stored.

The other thing to note about it is that LocalStorage never expires. This can be beneficial in a lot of ways, especially if a client is visiting the same site repeatedly. However any data stored in LocalStorage isn’t cleared unless manually done. That means if you go to ibuysocks.com(not a real website)and they store data in LocalStorage, even if you never go back to buy a pair of socks from that domain again, the data stored from them will still be saved on your browser.

Fun fact: localStorage is saved on a SQLite file in the user’s profile. For mac:

~/Library/Application Support/Google/Chrome/Default/Local Storage

Session Storage

Session storage has all of the same methods as LocalStorage, however, this information is stored only until the browser is closed. Again, lots of perks to this, but it still lacks a lot of security, even if storing information temporarily.

Overall:

The purpose of LocalStorage was to help make single-page web apps even more dynamic and help offload some of the information transported between servers and client browsers. It can be incredibly useful depending on how it’s used, but be sure to consider whether the data being stored is critical information or not. If it’s sensitive information or data that is better suited to be stored in the server, then it shouldn’t be stored in Local or SessionStorage. But if you want your user to be able to toggle light or dark mode and have that state persisted, then LocalStorage is a good option!