Page to page

A list and a detail view on separate HTML pages. Clicking a row navigates to the detail page. "一覧へ戻る" (Back to list) returns to the list.

Behavior

Filter the list and click a row. The detail page opens and shows that order.

Reload the detail page, and the browser returns to the list. The value passed to the detail page is deleted when read, so there is nothing to display. This is treated the same as opening the detail page directly.

Click "一覧へ戻る", and the list reopens with the filter and scroll position as they were.

Why storage is used

Within one page, a selected order number can be held in an actor's field. The Orders screen does this.

When navigating to another HTML page, the list's actor no longer exists by the time the detail page's actor starts. The value has to be stored outside any actor, in this case in sessionStorage.

What is passed

When a row is clicked, the list writes the order number and the information needed to return, then navigates.

Once at: 'detail' putJson: (Json object: {
  #code -> (Json str: code).
  #back -> (Json object: {
    #filter -> (Json str: filter).
    #top    -> (Json int: top) }) }).
Loc assign: 'detail.html'.

The write comes before the navigation. In the other order, the writing actor no longer exists.

The detail page receives only the order number and fetches the data from the server. Passing the list's data would show stale values if time had passed.

Read-once values

Once take: reads and deletes in one operation. There is no read-only operation.

Reloading the detail page finds no value, so it returns to the list. The read-once storage is the screen's specification.

On return, the return information is written back. The list reads it once and restores the filter and scroll position.

Testing

Navigation and scroll restoration are tested in a real browser: click a row, check the number on the detail page, reload and check that the list reopens, and check the filter and scroll position after returning.