What is the JavaScript equivalent of "Clear Site Data" in Chrome Dev Tools?

Question

I am looking for a way to trigger the same behavior as "Clear site data" in Chrome Dev tools or as close to the same behavior as possible. I know there are some things that are not possible i.e. clearing browser cache, and this doesn't need to be within the scope of this question. I am not sure if Clear Site Data does some special things other than clearing cookies, Web SQL/IndexedDB and unregistering service workers.

I use localForage in some of the projects I work on so cleaning IndexedDB/localStorage is fairly simple and making sure to call clear but I am unfamiliar what goes on behind the scenes for other parts or if there's something I may be missing. For context, there are times in my app where I see awkward regressions (I make some updates and they don't update). I have a programmatic trigger that clears localStorage and cookies but it doesn't fix the situation but clicking "Clear Site Data" with everything checked does.

Also side note I also found a W3C spec draft regarding clear site data headers? I am uncertain if this is the direction we may be moving to trigger a clear in site data? Any information would be most appreciated.

Answer 1

Yikes so after not getting any answers, decided to dig into some source code. I found the repository for Chrome Devtools and also the code where they actually call the this._clear from the UI (can be found in resources/ClearStorageView.js).

  _clear() {
    if (!this._securityOrigin)
      return;
    const storageTypes = [];
    for (const type of this._settings.keys()) {
      if (this._settings.get(type).get())
        storageTypes.push(type);
    }

    this._target.storageAgent().clearDataForOrigin(this._securityOrigin, storageTypes.join(','));

    const set = new Set(storageTypes);
    const hasAll = set.has(Protocol.Storage.StorageType.All);
    if (set.has(Protocol.Storage.StorageType.Cookies) || hasAll) {
      const cookieModel = this._target.model(SDK.CookieModel);
      if (cookieModel)
        cookieModel.clear();
    }

    if (set.has(Protocol.Storage.StorageType.Indexeddb) || hasAll) {
      for (const target of SDK.targetManager.targets()) {
        const indexedDBModel = target.model(Resources.IndexedDBModel);
        if (indexedDBModel)
          indexedDBModel.clearForOrigin(this._securityOrigin);
      }
    }

    if (set.has(Protocol.Storage.StorageType.Local_storage) || hasAll) {
      const storageModel = this._target.model(Resources.DOMStorageModel);
      if (storageModel)
        storageModel.clearForOrigin(this._securityOrigin);
    }

    if (set.has(Protocol.Storage.StorageType.Websql) || hasAll) {
      const databaseModel = this._target.model(Resources.DatabaseModel);
      if (databaseModel) {
        databaseModel.disable();
        databaseModel.enable();
      }
    }

    if (set.has(Protocol.Storage.StorageType.Cache_storage) || hasAll) {
      const target = SDK.targetManager.mainTarget();
      const model = target && target.model(SDK.ServiceWorkerCacheModel);
      if (model)
        model.clearForOrigin(this._securityOrigin);
    }

    if (set.has(Protocol.Storage.StorageType.Appcache) || hasAll) {
      const appcacheModel = this._target.model(Resources.ApplicationCacheModel);
      if (appcacheModel)
        appcacheModel.reset();
    }

    this._clearButton.disabled = true;
    const label = this._clearButton.textContent;
    this._clearButton.textContent = Common.UIString('Clearing...');
    setTimeout(() => {
      this._clearButton.disabled = false;
      this._clearButton.textContent = label;
    }, 500);
  }

I think the tl;dr is naturally their Clear Site data hooks into the checkbox options they have on the form which goes through and clears the options. In my original question I was personally wondering if there was something MORE than just that and it does look like they do call at the very top, regardless of what you have checked:

this._target.storageAgent().clearDataForOrigin(this._securityOrigin, storageTypes.join(','));

Not sure what this was but doing some digging, it looks like it might be some experimental API for clearing data from origin for Lighthouse apps. Personally I'm not sure or feel qualified to say this is correct. Hope this helps people.

If I can make a JavaScript equivalent script I'll try but technically all of Chrome Devtools is in JavaScript :P