# useLocalStorage / useSessionStorage

*Category:* Utilities
*Section:* Browser & device hooks
*Source:* https://uikit.developers.rio.cloud/#/utilities/useLocalStorage
*Captured:* 2026-04-27T14:59:41.668Z

The useLocalStorage and the useSessionStorage hook allows to save custom data in the respective storage locations.

## useLocalStorage / useSessionStorage

### Example: Example 1

Tom - 26
{
"enableBuyOption": true
}

Set Name Set Age Remove Name Remove Age Toggle Settings

#### React (tsx)

```tsx
import Button from '@rio-cloud/rio-uikit/Button';
import useLocalStorage from '@rio-cloud/rio-uikit/useLocalStorage';
import useSessionStorage from '@rio-cloud/rio-uikit/useSessionStorage';

export default () => {
    const [name, setName, removeName] = useSessionStorage('name', 'Tom');

    const [age, setAge, removeAge] = useLocalStorage('age', 26);
    const [settings, setSettings] = useLocalStorage('uikit.demo.settings', { enableBuyOption: true });

    return (
        <div>
            <div className='margin-bottom-15'>
                <div>
                    {name} - {age}
                </div>
                <div>{JSON.stringify(settings, null, 1)}</div>
            </div>
            <div className='btn-toolbar'>
                <Button onClick={() => setName('John')}>Set Name</Button>
                <Button onClick={() => setAge(40)}>Set Age</Button>
                <Button onClick={removeName}>Remove Name</Button>
                <Button onClick={removeAge}>Remove Age</Button>
                <Button onClick={() => setSettings({ ...settings, enableBuyOption: !settings?.enableBuyOption })}>
                    Toggle Settings
                </Button>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div>
    <div class="margin-bottom-15">
        <div>Tom - 26</div>
        <div>{
            "enableBuyOption": true
            }</div>
    </div>
    <div class="btn-toolbar">
        <button type="button" class="btn btn-default btn-component" tabindex="0">Set Name</button>
        <button type="button" class="btn btn-default btn-component" tabindex="0">Set Age</button>
        <button type="button" class="btn btn-default btn-component" tabindex="0">Remove Name</button>
        <button type="button" class="btn btn-default btn-component" tabindex="0">Remove Age</button>
        <button type="button" class="btn btn-default btn-component" tabindex="0">Toggle Settings</button>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| key | string | — | The key used for storing and retrieving values from the storage. |
| defaultValue | any | — | The initial default value to be stored. If passed a function, it gets executed. |
| [value, setValue, removeValue] | [any, Function, Function] | — | Returns the stored value and two functions for setting and removing the value from the storage. |