Remembering state

When navigating browser history, Inertia restores pages using prop data cached in history state. Inertia does not, however, restore local page 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 be lost.

To mitigate this issue, you can tell Inertia which local component state to save 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,
        // ...
      },
    }
  },
}

Now, whenever your local form state changes, Inertia will automatically save this data to the history state, and restore it on history navigation.

Multiple components

If your page contains multiple components that use the remember functionality, you'll need to provide a unique identifier for each component, so that Inertia knows which data to restore to each component.

{
  remember: {
    data: ['form'],
    key: 'Users/Create',
  },
  data() {
    return {
      form: {
        first_name: null,
        last_name: null,
      },
    }
  },
}

If you have multiple instances of the same component on the page using the remember functionality, be sure to also include a unique identifier for each component instance.

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