STR

assets/js/app.js

@@ -25,7 +25,16 @@ import topbar from "../vendor/topbar"
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
-  params: {_csrf_token: csrfToken}
+  params: { _csrf_token: csrfToken },
+  navigation: {
+    beforeEach() {
+      console.log("nav saving")
+      return { "foo": "bar" }
+    },
+    afterEach(_to, _from, userData) {
+      console.log("nav restoring", userData)
+    }
+  }
 })
 
 // Show progress bar on live navigation and form submits

lib/demo_web/controllers/page_controller.ex

@@ -1,9 +1,37 @@
 defmodule DemoWeb.PageController do
-  use DemoWeb, :controller
+  use DemoWeb, :live_view
 
-  def home(conn, _params) do
-    # The home page is often custom made,
-    # so skip the default app layout.
-    render(conn, :home, layout: false)
+  @spec render(any()) :: none()
+  def render(assigns) do
+    inspect(assigns)
+    assigns = assign(assigns, :page, assigns[:page] || 1)
+
+    ~H"""
+    page <%= @page %>
+    <br />
+    <br />
+    <.link style="color: blue; text-decoration: underline" patch={"?page=#{@page+1}"}>
+      goto page <%= @page + 1 %>
+    </.link>
+    <br />
+    <br />
+
+    <pre>
+    STR:
+    1. open dev console
+    2. navigate to page 2
+    3. use browser backward
+       observe that it prints the stored user data
+    4. use browser forward to get back to this page
+       observe that it forgot stored user data
+    </pre>
+    """
   end
+
+  def handle_params(%{"page" => page}, _url, socket) do
+    socket = assign(socket, page: String.to_integer(page))
+    {:noreply, socket}
+  end
+
+  def handle_params(_params, _url, socket), do: {:noreply, socket}
 end

lib/demo_web/router.ex

@@ -17,7 +17,7 @@ defmodule DemoWeb.Router do
   scope "/", DemoWeb do
     pipe_through :browser
 
-    get "/", PageController, :home
+    live "/", PageController, as: :home
   end
 
   # Other scopes may use custom stacks.