Ember JS - How to persist UI state to LocalStorage

The Ember guide distinguishes between:

• Models - Persistent application data


• Controllers - Ephemeral UI state

In my Ember App, I'd like to persist the collapsed/expanded state of a navigation bar to LocalStorage. This data is purely a UI consideration, so it would normally belong on the controller.

Since the data is persistent however, putting this data on the controller requires that the controller be responsible for loading and saving the state - which feels wrong.

Options:

1. Store on an EmberData Model and use the LocalStorage adapter


2. Store on the controller and use an observer to update LocalStorage


3. Something else?

Option #1 feels wrong because the data is UI-only. Also, an entire model for this boolean feels overkill. #2 seems more practical, but compromises the non-persistence of a controller.

What's standard practice? Thanks in advance!

Note: This is a more specific restatement of this question.