AlpineJS $persist - save option once per page

Question

I have a select dropdown built with AlpineJS and the chosen value is currently saved to sessionStorage once an option is chosen. However, the values for these options are different based on each page these options are available.

The problem is, if a user chooses an option on one page, then changes their mind and accesses a different page with different options, the first chosen option saved in sessionStorage will populate on any other page when the options are different.

Here is the code:

x-data="{ charter: $persist('').using(sessionStorage).as('_x_charterlength') }"

<div
    x-data="{ open: false }"
    @click.away="open = false"
    class="relative flex-1"
    >
        <!-- Button -->

        <button @click="open = !open"
            class="flex items-center justify-between flex-1 w-full gap-2 px-4 py-2 text-left bg-white border border-gray-400 rounded-lg"
            :class="[charter === '' ? 'border-2 border-orange-500' : '']"

        >
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
                <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6"/>
            </svg>

            <span class="w-full ml-2 overflow-hidden text-sm text-gray-600 whitespace-nowrap"
                x-text="charter === '' ? 'Add charter length' : charter"
            ></span>
        </button>
        <div x-show="open"
            class="absolute left-0 z-50 w-full p-4 mt-2 text-sm bg-white rounded-md shadow-md"
            x-cloak
        >
            <ul class="overflow-auto [&>li]:text-gray-500 [&>li]:px-4 [&>li]:py-2 hover:[&>li]:bg-gray-100 [&>li]:cursor-pointer space-y-2"
            >
            {{ pricing }}
            {{ if half_day }}<li @click="charter = $el.textContent; open = false;" class=" whitespace-nowrap"><span>1/2 Day: </span><span class="font-bold">${{ half_day }}.00 </li>{{ /if }}
                {{ if three_quarter_day }}<li @click="charter = $el.textContent; open = false;" class="whitespace-nowrap"><span>3/4 Day: </span><span class="font-bold">${{ three_quarter_day }}.00 </li>{{ /if }}
                    {{ if full_day }} <li @click="charter = $el.textContent; open = false;" class="whitespace-nowrap"><span>Full Day: </span><span class="font-bold">${{ full_day }}.00 </li>{{ /if }}
            </ul>
            {{ /pricing }}
        </div>
        <div x-text="[charter == '' ? 'Choose charter length' : '']" class="mt-1 text-xs font-bold text-orange-500"></div>
    </div>

My question is: How can save the chosen option for a given page in sessionStorage but have it be removed if they visit another page with the same dropdown but different options?

Answer 1

The best thing I could come up with on my own was to clear the specific sessionStorage item everytime someone visits one of the pages with options list.

Maybe there is something better.

sessionStorage.removeItem("_x_charterlength");