https://github.com/mykalmachon/formstore

simple web form "autosave" via browser cache
https://github.com/mykalmachon/formstore

forms indexeddb

Last synced: 7 days ago
JSON representation

simple web form "autosave" via browser cache

• Host: GitHub
• URL: https://github.com/mykalmachon/formstore
• Owner: MykalMachon
• License: apache-2.0
• Created: 2022-01-25T03:50:58.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-03-10T06:25:06.000Z (almost 3 years ago)
• Last Synced: 2025-01-19T09:32:37.638Z (14 days ago)
• Topics: forms, indexeddb
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@tinybox-software/formstore
• Size: 363 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# FormStore

a really simple indexedDB based form caching/storage system.

## Installation

You can install this package via npm with

```bash

npm install @tinybox-software/formstore

```

## Usage

### init

To get started with FormStore, you just have to initialize it.

```js

import { init } from formstore;

const store = init({});

```

Once initialized, FormStore will find any form with the `data-cache` attribute on it and:

1. Attempt to load existing form data from cache, and "hydrate" the form

2. Update the forms cache on save

3. Clear the forms cache on submission

### options

FormStore provides a few options via the init object:

1. **beforeHydrate:** Function

2. **afterHydrate:** Function

3. **beforeCache:** Function

4. **afterCache:** Function

5. **onError:** Function

here's an example of init using those hooks

```js

import { init } from formstore;

const store = init({

  beforeHydrate: () => {console.log('loading form...')},

  afterHydrate: () => {console.log('loaded form')},

  beforeCache: () => {console.log('saving form...')},

  afterCache: () => {console.log('saved form')},

  onError: (err) => {console.log(`something went wrong ${err}`)}

})

```

These hooks can be useful for UI side effects (i.e showing a "saving form" indicator, showing an error when no form exists...)

## Attribution

This is heavily based on [idb-keyval by Jake Archibald](https://github.com/jakearchibald/idb-keyval)

## Testing

Because of  the heavily async nature of the code I use, and considering I want to do more integration that unit tests,

I'm going to be migrating from JS-DOM to something like puppeteer. Tests wont run as fast, but we'll be able to validate that FormStore works in a real world environment.