storage-inspector-js

Browser Storage Inspector

storage-inspector-js library helps to clear site data & provides storage usage & quota.

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.