What is the difference between local storage and cache in the browser?

Question

When we open application segment in the developer console of chrome, we see many things like:

• Application

  • Manifest
  • service Workers

• Storage

  • local storage
  • session storage
  • indexed db
  • Web sql
  • Cookies

• Cache

  • Cache Storage
  • Application Cache

I know that cache is used for saving the resource locally and cookies are for saving the data in the client side for maintaining the session. Cache stores in key value format.

I want to know exactly what the difference is between them.

Answer 1

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.

1. 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.
2. 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

• http://www.differencebetween.com/difference-between-ram-and-vs-cache-memory/

• 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.