Skip to main content

Storage and Cache

Overview​

In Gauntlet there are 3 tiers of hooks to manage your React view state: useState, useCache and useStorage

  • useState
    • Provided by React
    • State is not saved between view re-openings
  • useCache
    • Provided by Gauntlet
    • Ephemeral, state saved between view re-openings, but not between plugin restarts
    • Internally uses sessionStorage
      • Max size of session storage is 10MB per plugin
  • useStorage
    • Provided by Gauntlet
    • Persistent, state saved between view re-openings and between plugin restarts
    • Internally uses localStorage
      • Max size of local storage is 10MB per plugin

Example​

import { ReactElement, useState } from "react";
import { ActionPanel, List } from "@project-gauntlet/api/components";
import { useCache, useStorage } from "@project-gauntlet/api/hooks";

export default function View(): ReactElement {
    const [state, setState] = useState<number>(0);
    const [cache, setCache] = useCache<number>("cache-item-key", 0);
    const [storage, setStorage] = useStorage<number>("storage-item-key", 0);
    
    return (
        <List actions={
            <ActionPanel>
                <ActionPanel.Action
                    label={"Bump"}
                    onAction={id => {
                        switch (id) {
                            case "state": {
                                setState(prevState => prevState + 1);
                                break
                            }
                            case "cache": {
                                setCache(prevState => prevState + 1);
                                break
                            }
                            case "storage": {
                                setStorage(prevState => prevState + 1);
                                break
                            }
                        }
                    }}
                />
            </ActionPanel>
        }>
            <List.Item id="state" title={"This value will reset after reopening view - " + state}/>
            <List.Item id="cache" title={"This value will reset after restarting plugin - " + cache}/>
            <List.Item id="storage" title={"This value will persist between Gauntlet restarts - " + storage}/>
        </List>
    )
}