I have limited experience, but for what I can understand:
Cache is data which is used very frequently, so it is stored to reduce processing and loading required.
- In a computer, the cache is what helps to hold temporary data used by the processor to compute the most basic instructions. It is a lot faster, therefore, more expensive/smaller than ram, but same ideology.
- On your browser that frequent data are files like the HTML and CSS you get from a web page
Local Storage instead, is data little less generic and a little more user specific, like a form info or your already viewed pages that appear on purple at Google It is also the objects and data your CSS and HTML renders.
For example: on YouTube, you have a standard format in which information, icons, and toolbars are displayed, imagine this as the interface. Cache helps a lot here. That is why you can search for new videos without having to wait for YouTube icon, search bar, etc… to reload again.
On the other hand, When you log in to youtube or any other web page like Amazon, That site knows your id by the local storage. Local storage also has different javascript interface objects like some tabs or extra menus.
Sources:
- HTML5 Local Storage VS App Cache Offline Website Browsing
- http://searchstorage.techtarget.com/definition/cache
-
-
I also went and tried myself the following: I went to my browser settings and deleted cache data and the page refreshed. Then I cleared Local Storage and I had to log in again.