# Save App State in LocalStorage In Elm

**URL:** <https://discourse.elm-lang.org/t/save-app-state-in-localstorage-in-elm/5527>\
**Category:** Learn\
**Created:** [April 13, 2020, 8:42am UTC](https://discourse.elm-lang.org/t/save-app-state-in-localstorage-in-elm/5527 "2020-04-13T08:42:07Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Victory\_Okhormhe](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/victory_okhormhe/32/3044_2.png) [@Victory\_Okhormhe](https://discourse.elm-lang.org/u/Victory_Okhormhe)\
**Post date:** [April 13, 2020, 8:42am UTC](https://discourse.elm-lang.org/t/save-app-state-in-localstorage-in-elm/5527/1 "2020-04-13T08:42:07Z")

</div>

I want to cache the whole app state in the browser local storage. My model is a kind of check-out page consisting of various types , Here is the Model type alias :

```
type alias Model =
{ showCheckoutModal : Bool
, showAddressForm : Bool
, emailAddress : String
, address : Address
, selectedAddress : Maybe Address
, addresses : List Address
, name : String
, listings : List Listing
, shop : Maybe Shop
, shop_id : String
, shippingInfo : ShippingInfo
, selectedDestination : Maybe ShippingDestination
}

```

I have created the outgoing port and Incoming Port

`port outgoing : OutgoingMsg -> Cmd msg`

`port incoming : (E.Value -> msg) -> Sub msg`

So , I made some research and It can be done but all examples online are of simpler models , I havent seen any for a model as complex as mine. Please I appreciate any contribution , Thanks

---

<div class="post-metadata">

**Author:** ![Philipp\_Krueger](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/philipp_krueger/32/2674_2.png) [@Philipp\_Krueger](https://discourse.elm-lang.org/u/Philipp_Krueger)\
**Post date:** [April 13, 2020, 11:43am UTC](https://discourse.elm-lang.org/t/save-app-state-in-localstorage-in-elm/5527/2 "2020-04-13T11:43:49Z")

</div>

I’d recommend using [elm-codec](https://package.elm-lang.org/packages/miniBill/elm-codec/latest/).

It lets you write compatible encoder/decoders at the same time. A codec for your Model would look like this:

```elm
codecModel : Codec Model
codecModel =
    Codec.object Model
        |> Codec.field "showCheckoutModal" .showCheckoutModal Codec.bool
        |> Codec.field "showAddressForm" .showAddressForm Codec.bool
        |> Codec.field "emailAddress" .emailAddress Codec.string
        |> Codec.field "address" .address codecAddress
        |> Codec.optionalField "selectedAddress" .selectedAddress codecAddress
        |> Codec.field "addresses" .addresses (Codec.list codecAddress)
        |> Codec.field "name" .name Codec.string
        |> Codec.field "listings" .listings (Codec.list codecListing)
        |> Codec.optionalField "shop" .shop codecShop
        |> Codec.field "shop_id" .shop_id Codec.string
        |> Codec.field "shippingInfo" .shippingInfo codecShippingInfo
        |> Codec.optionalField "selectedDestination" .selectedDestination codecShippingDestination
        |> Codec.buildObject

```

You still need to build `codecAddress`, `codecShop`, `codecListing`, etc. (I didn’t know what types those are).

You can see how to write encoders in [elm-codec’s examples](https://github.com/miniBill/elm-codec/blob/1.2.0/examples/Example.elm). It doesn’t only work for records, it also works for custom types.

As for getting that into the browser’s local storage: You create a port:

```elm
port saveModelLocalStorage : Encode.Value -> Cmd msg

```

And on the javascript side you can subscribe to that port. More info about that in [the elm guide](https://guide.elm-lang.org/interop/ports.html).

If you want to load the Model on page load out of local storage, I don’t recommend ports, I recommend [flags](https://guide.elm-lang.org/interop/flags.html). I think you can just take an `Encode.Value` as a flag and parse it using elm-codec.

Ah and now that I think of it, there is a very recent [js integration example](https://github.com/elm-community/js-integration-examples/blob/master/localStorage/index.html) about how to use local storage with elm.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [April 23, 2020, 11:43am UTC](https://discourse.elm-lang.org/t/save-app-state-in-localstorage-in-elm/5527/3 "2020-04-23T11:43:53Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.