Session storage

[spandl]

I am trying to implement session storage for a input, much as demonstrated here:
https://observablehq.observablehq.cloud/pangea/support/stored-inputs

The only difference is that I would like to create the inputs and place it in HTML.
This leads to some conflicts with the reactive system, I believe.

Here is my setup:

```js
// Define options and create Input
const dateRanges = [
  { name: "Last 28 days", value: "28-dd" },
  { name: "Last month", value: "last-mm" },
  { name: "Last quarter", value: "last-qq" },
];

const value = dateRanges[0] // JSON.parse(sessionStorage.getItem("dateRangeType")) ?? 

const dateRangeInputs = Inputs.radio(dateRanges, {
  format: (x) => x.name,
  value,
});

const selectedDateRange = view(dateRangeInputs);
```

```js
// Update session storage
if (selectedDateRange) {
  sessionStorage.setItem("dateRangeType", JSON.stringify(selectedDateRange));
}
```

```js
// Use the value and convert to start and end date
const selectedDateRangeObject = dateRange.getDateRangePeriod(
  new Date(),
  selectedDateRange.value
);
```

```html
<!-- Display inputs in HTML-->
<div class="date-range">${ view(dateRangeInputs) }<span class="date-range-label">${formatDate(selectedDateRangeObject.startDate)} – ${formatDate(selectedDateRangeObject.endDate)}</span></div>
```

Issue

The code above works and the session object is placed in the session object. Reading the and parsing the session object also works, but as soon I change the value from:

const value = dateRanges[0]

to

const value = JSON.parse(sessionStorage.getItem("dateRangeType")) ?? dateRanges[0]

The radio buttons render without default value. I assume it has to do with the order things are executed.
The crucial difference between the example created by Fil and mine is that I store the inputs as a variable. (I do this, because I want to make these radio buttons reusable).

Is there any way out?

[Fil]

The issue here is that JSON.parse(JSON.stringify({x})) is not strictly equal to {x}: it's a different object. Instead, you could compare the string representations:

const value = dateRanges.find((d) => JSON.stringify(d) === sessionStorage.getItem("dateRangeType")) ??  dateRanges[0];

[spandl]

Ahhh! Of course. Then it will be even easier to just store the value in the session object

const dateRanges = [
  { name: "Last 28 days", value: "28-dd" },
  { name: "Last month", value: "last-mm" },
  { name: "Last quarter", value: "last-qq" },
];

const sessionValue = dateRanges.find(d => d.value === sessionStorage.getItem("dateRangeType"))

const dateRangeInputs = Inputs.radio(dateRanges, {
  format: (x) => x.name,
  value: sessionValue ?? dateRanges[0],
});

const selectedDateRange = view(dateRangeInputs);

if (selectedDateRange) {
  sessionStorage.setItem("dateRangeType", selectedDateRange.value);
}

Thanks again!!