HTTP header you probably don’t know — Clear-Site-Data
The hypertext transfer protocol also known as HTTP is the protocol for the web. Every time you communicate through the browser, a request is sent to a server over the HTTP protocol. You have probably heard of some of the other protocols like method, Content-Type, or User-Agent, but HTTP has many more headers you can use.
Clear-Site-Data is a header you can use the clear the data for your site (what a great name!).
When using the Clear-Site-Data header you have 5 options to choose from.
Every option is based on the origin of the response URL.
When you want to clear the browser cache data. That could be scripts, images, cached icons
When you want to clear all the cookies for your site. That could be useful if you for example have an auth cookie.
When you want to remove all the data from the DOM storage. That is not only localStorage but also sessionStorage, IndexedDb, service worker registrations, AppCache, WebSQL databases, FileSystem API data, and plugin data.
When you want to reload the site.
The wildcard option is a combination of the other four options, and is just a shorthand to say to the browser “Just clear everything you got. Wipe it all!”.
Another use case could be if you have some aggressive caching strategy and want to reload all the styles and images on your site, then you can send the “cache” option and you are good to go!.
This header is not supported on Internet Explorer or Safari. The executionContext option is only supported on Samsung Internet and specific versions of Firefox, so be careful before implementing it.
Hope you find it useful!