Remove all client-side stored data on website using JavaScript

Question

Client-side data can be stored in many different ways (cookies, localStorage, granted permissions, etc.). On my website I want to have a "Clear data" button, and when the user clicks on that one I want to remove all client-side stored data, so there's no trace of the user ever have visited my website on the client's computer. Do web browser contains an API for that? (and if so, how do I use it?) Or do I have to use each individual storage-related API and tell each to delete the data it has stored?

Answer 1

you can call an API and add Clear-Site-Data:"*" in the header of that HTTP response. you can find more information here

if you want to handle it with javascript code, this might help you

sessionStorage.clear()

localStorage.clear()

caches.keys().then(keys => {
  keys.forEach(key => caches.delete(key))
})

indexedDB.databases().then(dbs => {
  dbs.forEach(db => indexedDB.deleteDatabase(db.name))
})

document.cookie = document.cookie.split(';').reduce((newCookie1, keyVal) => {
  var pair = keyVal.trim().split('=')
  if (pair[0]) {
    if (pair[0] !== 'path' && pair[0] !== 'expires') {
      newCookie1 += pair[0] + '=;'
    }
  }
  return newCookie1
}, 'expires=Thu, 01 Jan 1970 00:00:00 UTC; path:/;')