What are these: cookies, JavaScript local storage, and session storage? What are the differences, and when to use which one? Cookies are small text files that websites use to store information about a session, or user cookies have an expiration date that the websites can set so they can expire immediately after the session or they can last for days, months or years.
Generally, websites write the data in the cookies for analytics and create a better customer experience. The data contained in a cookie is sent back to the server on every request to the server. Cookies have a four-kilobyte limit which means you can only add a limited amount of data associated with the domain, and only those domains that create those cookies can read them as long as the site uses HTTPS protocol instead of HTTP.
Both the clients i.e., browser and the webserver serving the site, can read and write cookies – any JavaScript included in the website. Websites have used cookies from the early days of the internet for analytics and to create a better customer experience.
Local storage is like cookies to store information in the browser. Some refer to the local storage as JavaScript local storage. Use JavaScript to read and write the content to local storage, and the same happens with session storage. The information is stored in the browser’s local storage, with no expiration date.
The data stored in local storage is only available on the client-side. Unlike cookies, it is not sent to the server on each request. The major difference between cookies and local storage is the amount of data that can be stored. In cookies, the limit is 4MB; however, you can store up to 5MB of data in local storage, which is huge. It allows writing a lot of content in local storage to use on the website.
Similar to local storage is session storage. There are two main differences between local storage and session storage. The session storage data is only available during the browser session. As soon the browser is closed the data is gone. The second difference is that session storage has a higher data storage limit; however, these limits depend on the user’s browser. Local storage has a maximum availability of 5MB. Session storage can go up to 10 MB or more megabytes in some browsers.
How to look cookies, local and session storage in a website
Open msn.com in the chrome web browser to see the cookie’s local storage and session storage. Click on the three dots on the top and go down to more tools and developer tools. Once in developer tools, browse over to the application. It is the storage that has local storage session storage and cookies. Click on the arrow to expand and then click on the domain to see the local storage. Here we can see all the keys and the values that MSN is storing in local storage.
Similarly, to see session storage expand, click on MSN, and here we can see the session storage. To see the cookies expand on cookies and click on the domain and see all the site’s cookies. To see the cookies, use a chrome browser extension called edit this cookie. Click on it, and see all the cookies. Click on the arrow next to the name of the cookie to see the values stored in them, the domain they are tied, to path expiration, etc. it’s the same information that is available in the developer’s console. It has the domain, path, the expiration date, the size of the cookie, etc.
Everything is stored here in edit this cookie. It is easier to see the information using edit this cookie extension. We can even change any of the values for testing purposes in this extension. One can read and write the data in cookies local storage and session storage using JavaScript. As we understand the difference between cookies session storage and local storage, the next question is, which one should you use?
Here is a simple guide for deciding which one to use and when? Need the values on the server? Use cookies. Need values in session only? Use cookies or session storage. Need values across days or visits? Use cookies or local storage. Need to store a large amount of data? Local storage is the answer. Read and write the values to cookies, local storage, and session storage using JavasScript.
Learn JavaScript for Google Tag Manager
If you want to master JavaScript for Google Tag Manager then check out the complete course for Marketers and Marketing Analysts to learn JavaScript. This course is focused on teaching you the fundamentals and applications in Google Tag Manager. Even though examples are in Google Tag Manager (GTM), you can use them for Adobe Analytics using Adobe Launch as well or any other marketing analytics tools.
Other posts you might be interested in
https://www.optizent.com/blog/how-to-add-javascript-to-google-tag-manager/
Where to get more help with JavaScript, Google Analytics 4, and Google Tag Manager?
- Workshop – We offer onsite customized workshops. Reach out to us for more details.
- Consulting – We can get you up and running with Google Analytics 4 as well as train your and your team to use it effectively. Reach out to us for more details.
- Freelancers – Join our network and get support to help your clients with JavaScript, Google Tag Manager, and more.