使用 Alpine JS Persist Plugin 在刷新/重新访问页面后记住活动的切换/选项卡

Question

我按照教程使用 Alpine js 在我的网站上放置了一个暗模式切换器。它工作得很好，但每次用户刷新页面时，他们都需要再次选择暗模式选项。我在网上搜索，发现 Persist Plugin 似乎是一个解决方案，但是，我没有任何专业背景，只有按照在线教程构建我的网站的经验，所以我无法真正让它工作。谁能帮我这个？非常感谢:)

以下是我使用的教程代码，它来自 Oxygen Builder 教程：

<script src="//unpkg.com/alpinejs" defer></script>

<style>
    .darkmode-switcher {
        width: 64px;
        height: 32px;
        border-radius: 80px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 2px;
        cursor: pointer;
        background-color: #191919;
        transition: 0.3s all ease-in-out;
    }
    
    .darkmode-switcher__circle {
        width: 28px;
        height: 28px;
        border-radius: 80px;
        background-color: white;
        transition: 0.3s all ease-in-out;
    }   
</style>

<div class="mode-switcher" x-data="{ darkMode: false, switchMode: function() { this.darkMode = !this.darkMode } }">
    <div class="darkmode-switcher" @click="switchMode()">
        <div class="darkmode-switcher__circle"></div>
    </div>
    <template x-if="darkMode">
        <style>
            .darkmode-switcher {
                background-color: white;
            }
            .darkmode-switcher__circle {
                background-color: black;
                transform: translateX(32px);
            }
            
            .content-wrapper {
                background-color: black;
            }
            
            .content {
                color: white;
                background-color: #191919;
            }
            body {
                background-color: black;
            }
        </style>
    </template>
</div>

Answer 1

我使用以下代码修改 Oxygen youtube 视频。

Alpine JS with local storage - x-data showing old/wrong value after page refresh

并且工作。作为额外的奖励，您在模板 x-if 下放置的任何样式都将被格式化。如果您对颜色使用变量，这将有助于在您的所有网站上更轻松地更改它。

例子：

以你的颜色var(--clr-background)

在您的样式表中:root {--clr-background: hsl(0, 0%, 100%);}

x-if 下的样式:root {--clr-background: hsl(0, 0%, 0%);}

<script src="//unpkg.com/alpinejs" defer></script>
<body 
x-data="{darkMode: JSON.parse(localStorage.getItem('dark'))}"
x-init="$watch('darkMode', val => localStorage.setItem('dark', JSON.stringify(val)))"
x-bind:class="{ 'dark': darkMode }"
>

</body>

<style>
    .darkmode-switcher {
        width: 64px;
        height: 32px;
        border-radius: 80px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 2px;
        cursor: pointer;
        background-color: hsl(345, 6%, 13%);
        transition: 0.3s all ease-in-out;
    }
    
    .darkmode-switcher__circle {
        width: 28px;
        height: 28px;
        border-radius: 80px;
        background-color: hsl(0, 0%, 85%);
        transition: 0.3s all ease-in-out;
    }   
    
    
</style>


<div class="mode-switcher">
    <div class="darkmode-switcher" @click="darkMode = !darkMode">
        <div class="darkmode-switcher__circle"></div>
    </div>
    


    <template x-if="darkMode">
        <style>

            //* Add new variable colors here *//  
                
            .darkmode-switcher {
                background-color: hsl(0, 0%, 85%);
            }
            .darkmode-switcher__circle {
                background-color: hsl(345, 6%, 13%);
                transform: translateX(32px);
            }

            .content-wrapper {
                background-color: hsl(345, 6%, 13%);
            }
            
            .content {
                color: hsl(0, 0%, 85%);
                background-color: #191919;
            }

        

        </style>
    </template>
</div>

下一个奖励，如果您想自动检测暗模式并激活。此代码检测是否为暗模式，并保存为第一次。所以它不会每次都自动变暗。

将其添加为 js。

if(!('hasThisRunBefore' in localStorage)) {
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: Dark)').matches
localStorage.setItem('dark', true);
localStorage.setItem("hasThisRunBefore", true);
}