Browser Storage Inspector

Browser Support

Installation

 # If you use npm:
 npm i storage-inspector-js

 # If you use yarn:
 yarn add storage-inspector-js


 ES6 Usage
 import { BROWSER, getStorageUsageAndQuota, clearSiteData } from 'storage-inspector-js';

 Commonjs Usage
 var { BROWSER, getStorageUsageAndQuota, clearSiteData } = require('storage-inspector-js');

Usage

import React, {useEffect} from 'react';
import { BROWSER, getStorageUsageAndQuota, clearSiteData, STORAGE_INFO } from 'storage-inspector-js';

const App = () => {
  const [storageInfo, setStorageInfo] = useState<STORAGE_INFO>()

 useEffect(()=>{
  (async()=>{
     const res= await getStorageUsageAndQuota();
     setStorageInfo(res)
    })()
  },[])


  const clearStorage = async () => {
    await clearSiteData({ reload: true})

    // to delete specific IndexDB
    await clearSiteData({ indexDBName: "DBName", reload: true})

  }

  return (
   <div>
    <h3>BROWSER: {BROWSER}</h3>
    <p>Storage Info: {storageInfo.baked.usage/storageInfo.baked.quota}</p>
    <button onClick={clearStorage}>Clear Site Data</button>
   </div>
  );
};

export default App;

Props

| name | type | params | default | description | | ----------------------- | ---------- | ----------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | | BROWSER | string | | | it will provide the browser name i.e. Brave, Chrome, Firefox, Safari, Internet Explorer Edge, Samsung Browser, UC Browser, Opera, Unknown. | | getStorageUsageAndQuota | function | | | get storage usage & quota { raw: { usage: 180670, quota: 24090080 }, baked: { usage: "230KiB", quota: "980MiB" } } | | clearSiteData | function | indexDBName required for firefox, reload required | | clears site data which includes all browser storage. Set reload params to true, to reload the site once storage is clear. |