Session & Local Storage on Client Side with Weather API Example.

Hello all, the objective of this blog is to show how to use session and local storage in browser…

Before Going, why caching is required. Why these all things…

Think now you are shopkeeper with multiple groceries. There are about up to 100 racks filled by unique groceries. Consider to access 1st rack it takes one second, for 2nd rack it takes two second like that. And also there is one free rack(which takes 0.5 second to access). You don’t remember where everything is . Now first customer and asks some coffee powder..

Now coffee powder is at 99th rack. It takes 99 seconds to deliver it to first customer. Now second customer comes, they also asked for coffee powder. Shit again , now it takes also 99 seconds. So u think like coffee powder is selling like rain… I can take some coffee powder from 99th rack and put it on free rack. So now if customer comes it takes 0.5 second to access.

This is what caching to improve performance for both seller(server) and buyer(client).

Again Caching itself is huge topic. There are caching done at multiple layers from user screen to data where it is stored. Today I show only how to done on client side by using browser.

Glimpse of Netflix cache, For full blog: https://medium.com/refraction-tech-everything/how-netflix-works-the-hugely-simplified-complex-stuff-that-happens-every-time-you-hit-play-3a40c9be254b

This is what I taken for simple example, Get weather and it’s some of parameters based on city..

Initial Screen

Here I achieved cache for two things.

1. For city list
2. Weather For Particular city.

City List:

I have list of 1481 Indian Cities with states which is stored on json at server. When User visiting webpage, the json gets served to client. The file size is about 64KB. I have used local storage to cache it. The local storage, if u close the tab or browser the file remains there.. Only if we cleared means it’s will be deleted.

Indian Cites Json(If u want same visit below link)

indian-cities-database/cities.json at master · thatisuday/indian-cities-database

I think these file have to serve only once and have to store it on client machine. Because 64kb is not much bigger. And also if client changes this file and delete this file it is not going to affect much in my case.

Don’t trust data that is from client blindly. This is the statement I read multiple times at multiple blogs. Consider u have restriction to enter only cities on this list only. After caching , the client is easily able to edit and bypass it. It is for improving user interaction with webpage.

Initial No caching.

Caching Occurs After Visit

So on next visit it takes less time to load. I also writes like if cache time and current access time is more than 30 mins, then browser again hit the server and update the cache. So local storage does not implicitly support this time concept. I achieved by using javascript.

2. Weather for Particular city.

And also for weather, I have taken session storage based on city wise. Session storage means if tab is close the value got cleared.. In same tab if we enter second time same city it takes cached values. There is one button also available to clear session caches. I used Open Weather Map API for weather details.

https://openweathermap.org/api

On first enter of bankura..

On second vist of bankura..

SERVER CODE

HTML CODE

Please change the code and try executing it.. And play with it. If u have any cool ideas on this please drop your view..

Thank You.. Happy Learning.. Share Learning….