ng-field-memory

Save and restore form fields automatically. No boilerplate, no custom wiring — just add an attribute and your inputs remember their values across refreshes and navigation.

What it does

• Saves values as you type to localStorage
• Restores values on page load automatically
• Works with inputs, textareas, and selects
• Lets you save a whole form (object) on submit using a simple service

Install

npm i ng-fieldmemory

Use it

1. Import the module

Standalone component:

import { NgFieldMemoryModule } from "ng-fieldmemory";

@Component({
  standalone: true,
  imports: [NgFieldMemoryModule],
})
export class MyComponent {}

NgModule:

import { NgFieldMemoryModule } from "ng-fieldmemory";

@NgModule({ imports: [NgFieldMemoryModule] })
export class MyModule {}

2. Remember a field

<input type="text" ngFieldMemory="user-email" placeholder="Email" />

3. JSON-friendly fields

<input type="text" ngFieldMemory="user-data" [isJson]="true" placeholder='{"name":"Alex"}' />

4. Selects and numbers work too

<select ngFieldMemory="page-size">
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="20">20</option>
</select>

<input type="number" ngFieldMemory="current-page" />

5. Save a whole form on submit

import { NgFieldMemoryService } from 'ng-fieldmemory'

constructor(private memory: NgFieldMemoryService) {}

onSubmit() {
  this.memory.save('profile-form', this.form.value)
  // After a successful POST:
  // this.memory.clear('profile-form')
}

ngOnInit() {
  const saved = this.memory.get<any>('profile-form')
  if (saved) this.form.patchValue(saved)
}

How keys work

• Each field or form uses a unique key that you choose, like user-email or profile-form.
• Values are stored under a namespaced key: ng-field-memory:<your-key>.
• Use the same key on different pages/components to share the same value.

Minimal API you’ll use

Service (NgFieldMemoryService):

• save(key, value) — store anything JSON-serializable
• get<T>(key) — read it back (typed)
• clear(key) — remove it

Directive ([ngFieldMemory]):

• ngFieldMemory="key" — enable memory for a field
• [isJson]="true" — store as object/array instead of plain string
• [memoryDebounce]="500" — debounce ms for saving (default 500)

Good to know

• Works in the browser; during SSR it falls back to an in-memory store (no crashes).
• Restores values and notifies Angular so your bindings update.
• You don’t need to write localStorage code — use the directive or the service.

Troubleshooting

• Field shows the right value but your UI logic didn’t react?
  • If you’re listening to (change) on a <select>, the library triggers change and input events on load so handlers run. If you have custom logic, make sure it listens to the right event.
• Want to clear something?
  • memory.clear('user-email') for one key, or change the key to “reset” a field.

License

MIT