AlpineJS 下拉菜单，默认选项使用持久存储本地存储

Question

以下代码包含一个下拉菜单，其中包含“巴黎”和“罗马”两个选项。下拉菜单本身工作正常，并且将所选选项存储在本地存储中也工作得很好。这些都不是问题。让我解释一下我想要实现的目标。

用户可能会在选择选项之前进入此页面。如果他们在选择任何内容之前登陆带有此下拉列表的页面，我希望默认选项为“添加目的地”。一旦他们选择/更改选项，它将被添加/更新到本地存储，并用存储的内容替换默认选项。

目前，如果您在从其他页面进行选择之前登陆具有此下拉列表的页面，则该下拉列表将为空白。一旦您选择了“巴黎”或“罗马”，数据将使用“x-data”存储，并使用“x-html”放入 byinnerHTML 中。

“x-text”允许默认为“添加目的地”，因为“x-html”正在寻找本地存储项：“chosenDestination”。

<div
                    x-data="{ open: false, selected: '' }"
                    @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 p-4 text-left border border-gray-500 rounded-lg"
                        :class="{'text-black': selected !== '', 'text-gray-500': selected === ''}"
                        x-data="{ destination: localStorage.getItem('chosenDestination') }"
                    >
                        <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 overflow-hidden text-gray-600 whitespace-nowrap"
                        x-text="selected === '' ? 'Add destination' : selected"
                        x-html="destination"
                        id="destination"
                        ></span>

                    </button>

                    <!-- Dropdown Menu -->

                    <div
                        x-show="open"
                        class="absolute left-0 p-4 mt-2 bg-white rounded-md shadow-md"
                        x-cloak
                    >
                        <ul
                        class="max-h-[140px] overflow-auto [&>li]:text-gray-500 [&>li]:px-4 [&>li]:py-2 hover:[&>li]:bg-gray-100 [&>li]:cursor-pointer space-y-2"
                        @click="chosenDestination();"
                        >
                        <li @click="selected = $el.textContent; open = false;">Paris</li>
                        <li @click="selected = $el.textContent; open = false;">Rome</li>
                        </ul>
                    </div>
                </div>

<script>
    function chosenDestination() {
        var destination = document.getElementById('destination').innerHTML;
        localStorage.setItem("chosenDestination", destination);
    }
</script>

这不是一个破坏交易的因素，但如果有的话就更好了： 目前我使用 javascript 函数来执行本地存储，但我更愿意使用 AlpineJS Persist 来处理这个问题，但是，我似乎不知道如何实现这一点。

任何帮助将不胜感激。

Answer 1

使用 Persist 你可以稍微简化你的代码（这里如何在你的项目中包含Persist）：

<div
        x-data="{ open: false, selected: $persist('').using(sessionStorage).as('chosenDestination') }"
        @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 p-4 text-left border border-gray-500 rounded-lg"
            :class="{'text-black': selected !== '', 'text-gray-500': selected === ''}"

    >
        <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 overflow-hidden text-gray-600 whitespace-nowrap"
              x-text="selected === '' ? 'Add destination' : selected"
              id="destination"
        ></span>

    </button>

    <!-- Dropdown Menu -->

    <div x-show="open"
         class="absolute left-0 p-4 mt-2 bg-white rounded-md shadow-md"
         x-cloak
    >
        <ul class="max-h-[140px] overflow-auto [&>li]:text-gray-500 [&>li]:px-4 [&>li]:py-2 hover:[&>li]:bg-gray-100 [&>li]:cursor-pointer space-y-2"
        >
            <li @click="selected = $el.textContent; open = false;">Paris</li>
            <li @click="selected = $el.textContent; open = false;">Rome</li>
        </ul>
    </div>

</div>

我从按钮中删除了 destination 变量（以及 x-data）： selected 变量足以存储所选目的地。
在 x-data 中，destination 变量通过 $persist 初始化，默认为空字符串并选择 sessionStorage，因此当您关闭浏览器并重新打开它时，destination 会被重置。
x-html="destination" 不是必需的。
现在 @click="chosenDestination();" 也不再需要，通过 Persist 存储的值会自动更新