Local state caching

When navigating browser history, Inertia reloads pages using prop data cached in history state. Inertia does not, however, cache local component state, since this is beyond its reach. This can lead to outdated pages in your browser history.

For example, if a user partially completes a form, then navigates away, and then returns back, the form will be reset and their work will have been lost.

Remembering local state

To mitigate this issue, you can tell Inertia which local component state to cache in the browser history.

{
  // Option 1: Object
  remember: {
    data: ['form'],
  },

  // Option 2: Array
  remember: ['form'],

  // Option 3: String
  remember: 'form',

  data() {
    return {
      form: {
        first_name: null,
        last_name: null,
        // ...
      },
    }
  },
}

Multiple components

If your page contains multiple components using the remember functionality, you'll need to provide a unique key for each component. For example, Users/Create.

If you have multiple instances of the same component on the page, be sure to include a unique identifier for each of those instances. For example, Users/Edit:{id}.

{
  remember: {
    data: ['form'],
    key: () =>`Users/Edit:${this.user.id}`,
  },
  data() {
    return {
      form: {
        first_name: this.user.first_name,
        last_name: this.user.last_name,
        // ...
      },
    }
  },
}