以下代码包含一个下拉菜单,其中包含“巴黎”和“罗马”两个选项。下拉菜单本身工作正常,并且将所选选项存储在本地存储中也工作得很好。这些都不是问题。让我解释一下我想要实现的目标。
用户可能会在选择选项之前进入此页面。如果他们在选择任何内容之前登陆带有此下拉列表的页面,我希望默认选项为“添加目的地”。一旦他们选择/更改选项,它将被添加/更新到本地存储,并用存储的内容替换默认选项。
目前,如果您在从其他页面进行选择之前登陆具有此下拉列表的页面,则该下拉列表将为空白。一旦您选择了“巴黎”或“罗马”,数据将使用“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 来处理这个问题,但是,我似乎不知道如何实现这一点。
任何帮助将不胜感激。
使用 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 存储的值会自动更新