React Use Window.sessionStorageuseClearSessionStorage
Description
This hook calls sessionStorage.clear() to clear all items from sessionStorage.
All hooks will be reset back to their default values, or to null if none was provided.
Usage
import { useClearSessionStorage } from 'react-use-window-sessionstorage';
In your function component:
const clearSessionStorage = useClearSessionStorage();
Call clearSessionStorage() to clear sessionStorage.
Signature
useClearSessionStorage() => (() => void)
Props
The hook takes no props.
Return
The hook returns a function, clearSessionStorage:
clearSessionStorage() => void
Calling this function clears sessionStorage and synchronizes all hooks.
Example
In the following example, four numbers are defaulted to 0 and can be set to randomly generated values. The fifth value has no default. Calling clearSessionStorage() will clear
sessionStorage using sessionStorage.clear() and synchronize all hooks.
Stored values:
- val1: 0
- val2: 0
- val3: 0
- val4: 0
- val5 (no default):
import * as React from 'react';import { useClearSessionStorage, useSessionStorageNumber } from 'react-use-window-sessionstorage';export function UseClearExample() {const [val1, setVal1] = useSessionStorageNumber('val1', 0);const [val2, setVal2] = useSessionStorageNumber('val2', 0);const [val3, setVal3] = useSessionStorageNumber('val3', 0);const [val4, setVal4] = useSessionStorageNumber('val4', 0);const [val5, setVal5] = useSessionStorageNumber('val5');const clearSessionStorage = useClearSessionStorage();return (<div><div><div><strong>Stored values:</strong><ul><li>val1: {val1}</li><li>val2: {val2}</li><li>val3: {val3}</li><li>val4: {val4}</li><li>val5 (no default): {val5}</li></ul></div></div><div><buttononClick={() => {setVal1(Math.random());setVal2(Math.random());setVal3(Math.random());setVal4(Math.random());setVal5(Math.random());}}>Generate Random Values</button></div><div><button onClick={() => clearSessionStorage()}>Clear</button></div></div>);}