Photo by Joshua Sortino on Unsplash

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.

“cache”

When you want to clear the browser cache data. That could be scripts, images, cached icons

“cookies”

When you want to clear all the cookies for your site. That could be useful if you for example have an auth cookie.

“storage”

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.

“execution contexts”

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!”.

Usecases

A common way to use this header; is when a user logs out of your web application. Then you can send for example the ‘cookie’ option and that will clear the cookies for the browser without involving any Javascript.

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

Compatability

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!