Choose own storage backend

[darthf1]

Hi!

The new addon from beta 17 to allow saving values to local storage is awesome. It would be great if it is possible to, instead of hardcode it to the localStorage, provide an abstraction layer so we can use our own storage layer like sessionStorage (not much benefit though), cookies, or whatever. This opens up the possibility to use https://github.com/michelonsouza/encrypt-storage.

Links:

• https://github.com/michelonsouza/encrypt-storage
• https://prazdevs.github.io/pinia-plugin-persistedstate/guide/config.html#storage
• https://github.com/prazdevs/pinia-plugin-persistedstate/blob/main/packages/nuxt/src/runtime/storages.ts

[andrew-boyd]

Working on some updates for the localStorage plugin. I do think we'll keep this plugin scoped to localStorage and a plugin that allows for remote storage would be a separate add-on.

That said, part of the updates is including beforeSave and beforeLoad callbacks you can register with the plugin that will allow you to do whatever you want with the data (including remote async calls) before it's stored and before it's loaded back into the form.

You can check the docs here on a preview branch: https://formkit-com-git-feature-localstorage-plugin-updates-formkit.vercel.app/plugins/local-storage

[darthf1]

That sounds great. Right now, I did a straight forward copy/paste of the existing addon code, with my own changes. The beforeSave and beforeLoad callbacks sounds like what I can use.

Then again, it would be quite easy to support more storage options (raw code):

type Storage = {
  getItem(key: string): string | null
  setItem(key: string, value: string): void
  removeItem(key: string): void
}

 /**
  * The options to be passed to {@link createLocalStoragePlugin | createLocalStoragePlugin}
  *
  * @public
  */
 export declare interface LocalStorageOptions {
     prefix?: string;
     maxAge?: number;
     storage?: Storage
 }

I have my own composable:

import CryptoJS from 'crypto-js'

export const useEncryptStorage = (): {
  getItem(key: string): string | null
  setItem(key: string, value: string): void
  removeItem(key: string): void
} => {
  const getItem = (key: string): string | null => {
    const item = localStorage.getItem(key)
    if (item === null) {
      return null
    }

    return CryptoJS.AES.decrypt(item, 'key').toString(
      CryptoJS.enc.Utf8,
    )
  }

  const setItem = (key: string, value: string): void => {
    localStorage.setItem(
      key,
      CryptoJS.AES.encrypt(value, 'key').toString(),
    )
  }

  const removeItem = (key: string): void => {
    localStorage.removeItem(key)
  }

  return {
    getItem,
    setItem,
    removeItem,
  }
}

And then in the formkit.config.ts you could do:

import type { DefaultConfigOptions } from '@formkit/vue'
import { createLocalStoragePlugin } from '@formkit/addons'

const config: DefaultConfigOptions = {
  plugins: [
    createLocalStoragePlugin({
      storage: useEncryptStorage(),
    }),
  ],
}

And in the addon code you would have here:

const storage = LocalStorageOptions?.storage ?? localStorage
const value = storage.getItem(key)

and a few lines further:

      node.hook.submit((payload, next) => {
        storage.removeItem(key)
        return next(payload)
      })