useStorage

If we want to persist data, we can choose between two storages:

The session storage
(new tab)
which stores data only for the active session
The local storage
(new tab)
which stores data until it is actively cleared

To use those in a convenient way, Flora provides a hook for each storage.
They share the same signature.

Do's & Don'ts

Use the session storage for sensitive data such as contact information and bank details.

Params

Name	Type	Default	Description
defaultValue*	any		A default value with which the storage is initially populated
key*	string		The `key` that is used to reference the stored value

Returns

Array

: An array containing the value, a setter and reset function:

const shape = {
  value,
  setValue,
  // can be used to reset the value to the default value
  // if no default is passed, it will be removed from the storage
  // e.g. when we want to clean up user data after a successful checkout
  resetValue,
}

const shape = {
  value,
  setValue,
  // can be used to reset the value to the default value
  // if no default is passed, it will be removed from the storage
  // e.g. when we want to clean up user data after a successful checkout
  resetValue,
}

Note: The first two values act exactly the same as React's

useState

Examples

Dark Mode

function Component() {
  const [localCounter, setLocalCounter, resetLocalCounter] = useLocalStorage(
    'local_counter',
    0
  )
  const [sessionCounter, setSessionCounter, resetSessionCounter] =
    useSessionStorage('session_counter', 0)

  return (
    <Box space={5}>
      <Box space={2} direction="row" alignItems="center">
        <Box width={140}>
          <Text subStyle="emphasis">Local Storage</Text>
        </Box>
        <IconButton
          icon={IconArrowDown}
          onClick={() => setLocalCounter(localCounter - 1)}
        />
        <Box width={100} alignItems="center">
          <Text>{localCounter}</Text>
        </Box>
        <IconButton
          icon={IconArrowUp}
          onClick={() => setLocalCounter(localCounter + 1)}
        />
        <Box alignSelf="flex-start">
          <ActionButton onClick={resetLocalCounter}>Clear</ActionButton>
        </Box>
      </Box>

      <Box space={2} direction="row" alignItems="center">
        <Box width={140}>
          <Text subStyle="emphasis">Session Storage</Text>
        </Box>
        <IconButton
          icon={IconArrowDown}
          onClick={() => setSessionCounter(sessionCounter - 1)}
        />
        <Box width={100} alignItems="center">
          <Text>{sessionCounter}</Text>
        </Box>
        <IconButton
          icon={IconArrowUp}
          onClick={() => setSessionCounter(sessionCounter + 1)}
        />
        <Box alignSelf="flex-start">
          <ActionButton onClick={resetSessionCounter}>Clear</ActionButton>
        </Box>
      </Box>
    </Box>
  )
}function Component() {
  const [localCounter, setLocalCounter, resetLocalCounter] = useLocalStorage(
    'local_counter',
    0
  )
  const [sessionCounter, setSessionCounter, resetSessionCounter] =
    useSessionStorage('session_counter', 0)

  return (
    <Box space={5}>
      <Box space={2} direction="row" alignItems="center">
        <Box width={140}>
          <Text subStyle="emphasis">Local Storage</Text>
        </Box>
        <IconButton
          icon={IconArrowDown}
          onClick={() => setLocalCounter(localCounter - 1)}
        />
        <Box width={100} alignItems="center">
          <Text>{localCounter}</Text>
        </Box>
        <IconButton
          icon={IconArrowUp}
          onClick={() => setLocalCounter(localCounter + 1)}
        />
        <Box alignSelf="flex-start">
          <ActionButton onClick={resetLocalCounter}>Clear</ActionButton>
        </Box>
      </Box>

      <Box space={2} direction="row" alignItems="center">
        <Box width={140}>
          <Text subStyle="emphasis">Session Storage</Text>
        </Box>
        <IconButton
          icon={IconArrowDown}
          onClick={() => setSessionCounter(sessionCounter - 1)}
        />
        <Box width={100} alignItems="center">
          <Text>{sessionCounter}</Text>
        </Box>
        <IconButton
          icon={IconArrowUp}
          onClick={() => setSessionCounter(sessionCounter + 1)}
        />
        <Box alignSelf="flex-start">
          <ActionButton onClick={resetSessionCounter}>Clear</ActionButton>
        </Box>
      </Box>
    </Box>
  )
}