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

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.