div whose id is
localStorage.getItem method lets us retrieve the state which is stored as raw JSON string. That method expects a key.
post-app-save is the same key we used for saving the state in the previous section.
How do we pass
startingState to the Elm app? We can actually give it to
Elm.App.embed as the second argument. Update that line in
beginning-elm/index.html like this:
startingState comes out on the Elm side as a flag. If we want to pass values to an Elm app during initialization we need to send them as flags. Flags are different from an incoming port which creates a subscription. Flags on the other hand are delivered directly to the initialization function which gets passed to the
init field in
init function in
PostApp/State.elm so that it can accept the flags too.
Flags are passed as the first argument to the
init function. Their type varies between applications. In our case, it’s
null. To accommodate that, we need to use the
Maybe type. Remember,
Nothing in Elm.
let area of
init, we attempt to extract the posts from
flags. If they do exist, we need to use the
succeed function defined in
RemoteData module to convert the
List Post type to
succeed lifts an ordinary Elm value into the realm of
RemoteData. Here’s how its type signature looks:
If no posts are found, we need to initialize the
posts field with
RemoteData.Loading. Next modify the
initialModel function in
PostApp/State.elm so that it can accept
To initialize an app with flags, we need to switch from
The type of
main also changed from
Program Never Model Msg to
Program (Maybe (List Post)) Model Msg. The
Never type indicates the program doesn’t accept any flags. Now that we’re accepting flags, we need to replace that with
Maybe (List Post).
Navigation.programWithFlags behaves very much like
Navigation.program. The only additional thing it does is accept flags. The
Html module also provides a function called
programWithFlags which is meant to be used by apps that don’t implement routing.
Navigation.program’s type signatures look:
And here are the type signatures for
We are now ready to test. Run the following command from the
beginning-elm directory in terminal to compile the app.
You shouldn’t see any errors. Also start
json-server by running the following command from the
beginning-elm directory in a separate terminal window.
Now go to
http://localhost:8000/ in a browser and open the browser console. You should see the retrieved state printed as JSON in the console.
How do we verify that our app did get initialized with the stored state? Let’s stop
json-server by pressing
Ctrl + c and see how the app behaves when the server is unreachable. Refresh the page at
Unfortunately, we see an error instead of the posts retrieved from local storage. How about we don’t fetch the posts from a server when the app is initialized? That way if we see a list of posts on the page when the app is launched and the server is not running, we’ll definitely know that those posts are from local storage.
PostApp/State.elm and replace
Cmd.none inside the
in area in
Now if you refresh the page at
http://localhost:8000/, you should see the posts. Those are definitely loaded from local storage.
json-sever back up by running the following command from the
beginning-elm directory in terminal.
Click the Refresh posts button from the home page. If you open the browser console, you should see both the saved and retrieved states. Whenever we retrieve posts from the server, they immediately get saved in local storage.