Local Storage vs Cookies (The storage showdown)
18 Jun, 2019
Local site storage can open up a ton of possibilities in web design and breath new life into an otherwise static webpage. Whether you just want to do something simple like “show a welcome message only once”, or something a little more complex like “store an array of user preferences”. Without some form of local site storage, this would not be possible.
When it comes to local site storage, there are two main options you have to choose from, Cookies and Local Storage. Each are best suited to a slightly different use case.
A handy tip before we get started. In Chrome, click F12 to open the developer tools and click on “Application”. Here you'll be able to see all the local storage, cookies and session data your site is saving.
Local Storage
Local storage gives you 10MB of space to work with. This makes local storage ideal for most situations where you need to store lots of data locally. Managing local storage is really easy to use compared to cookies as javascript provides a "localStorage" class that handles everything for you. However, HTML5 will need to be supported by the user's browser for local storage to work.
//Storing data
localStorage.setItem("favoriteColor", "red");
//Retrieving stored data
var someData = localStorage.favoriteColor;
console.log(someData);
//Deleting stored data
localStorage.removeItem("favoriteColor");
//Clear localStorage
localStorage.clear()
Unlike cookies, local storage doesn't have an expiration date. It won't be removed from the user's computer unless the user, either clears their browser storage, or the data is deleted by the site itself.
Cookies
The main reason you may want to use cookies over local storage is that cookies are sent to, and can be accessed by the server when making requests. This is especially useful if you need to personalize the server's response based on stored cookie data.
The main downside of cookies is that they only allow for 4KB of usable space so if you were planning on storing anything larger than that then local storage might be your best bet. Because of this, cookies are usually only used to store small bits of information like session IDs to keep the user logged in.
When creating a cookie in javascript, you can specify when you want it to expire, by default its set to expire when the window closes. You can also specify what page the cookie belongs to, this will be useful if you ever want to delete the cookie.
//Creating a new cookie
document.cookie = "favoriteColor=red";
//Additional parameters
document.cookie = "favoriteColor=red; expires=Mon, 21 Dec 2020 12:00:00 UTC; path=/";
To delete a cookie simply override the same cookie with an expiry date that has already passed, make sure you specify the same path:
document.cookie = "favoriteColor=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
Retrieving the actual data from the cookies is a bit more complicated than using the built-in javascript localStorage class. The cookies are stored as a string so when you retrieve the cookie using:
var someData = document.cookie;
You will then need to parse the string yourself to get the individual cookie values. If you're looking for some premade functions to handle this, or just want to learn more, I would recommend checking out the article w3schools did on cookies here.
