How to Save to Local Storage with Alpine JS

Saving to local storage is a great way to maintain user choice for features such as:

  • Dark mode
  • Grid/list layout

Thankfully, there's an Alpine JS plugin that adds this functionality with an easy to use magic method. All it requires you to do is wrap you data within x-data in a $persist method, something like this:

x-data="{ darkMode: $persist(false), collectionLayout: $persist('grid') }"

On initial load these values will be saved into local storage and then updated when the values are changed.

Make some changes and refresh the page to see your changes saved.

Created by Mark Mead.