在 Svelte 中切换本地存储项目

Question

Svelte 的新手，所以请原谅我知之甚少。

我正在尝试保存 localStorage 项 on:click 并在再次单击时切换它。目前，该项目已添加到 localStorage，但在第二次单击时，它不会被删除。如果您刷新页面并单击该项目将被删除，但我希望这不是必需的。

点击事件

<button on:click={dyslexiaFriendlyFont} class="primaryBtn" >Dyslexia friendly font</button>

切换处理

  let _ac_dyslexiaFriendlyFontToken = localStorage.getItem(
    '_ac_dyslexiaFriendlyFontToken'
  )

  function dyslexiaFriendlyFont() {
    console.log('clicked')
    if (_ac_dyslexiaFriendlyFontToken == undefined) {
      localStorage.setItem('_ac_dyslexiaFriendlyFontToken', 'true')
      body.classList.add('_ac_dyslexiaFont')
    } else (_ac_dyslexiaFriendlyFontToken == "true") {
      localStorage.removeItem('_ac_dyslexiaFriendlyFontToken')
      body.classList.toggle('_ac_dyslexiaFont')
    }
  }

有人可以帮我吗？ :)

Answer 1

当您打开页面时，该行会计算一次

  let _ac_dyslexiaFriendlyFontToken = localStorage.getItem(
    '_ac_dyslexiaFriendlyFontToken'
  )

当您第一次点击时，您将 'true' 写入 localStorage，但变量 _ac_dyslexiaFriendlyFontToken 保持不变，因此当您第二次点击时，您将再次进入 [=14] =]

_ac_dyslexiaFriendlyFontToken 是 null，但是 undefined == null // true 因为你只有两个等号 ~ 可以简单地检查 if(_ac_dyslexiaFriendlyFontToken) 或 if(!_ac_dyslexiaFriendlyFontToken) 来检查值是否为真或虚假
https://developer.mozilla.org/en-US/docs/Glossary/Truthy
https://developer.mozilla.org/en-US/docs/Glossary/Falsy

因此，除了写入本地存储

之外，还要在 if(){}else{} 更改 _ac_dyslexiaFriendlyFontToken 之间切换

这是您修改后的示例，如果在打开页面时在 localStorage 中设置了令牌，它还会添加 class

<script>
    import {onMount} from 'svelte'

    let _ac_dyslexiaFriendlyFontToken = localStorage.getItem('_ac_dyslexiaFriendlyFontToken') // null or 'true'
    console.log(_ac_dyslexiaFriendlyFontToken)

    let body

    onMount(() => {
        body = document.querySelector('body')
        if (_ac_dyslexiaFriendlyFontToken) body.classList.add('_ac_dyslexiaFont')
    })

    function dyslexiaFriendlyFont() {
        if (_ac_dyslexiaFriendlyFontToken) {
            console.log('remove token')
            _ac_dyslexiaFriendlyFontToken = null
            localStorage.removeItem('_ac_dyslexiaFriendlyFontToken')
            body.classList.remove('_ac_dyslexiaFont')
        } else {
            console.log('add token')
            _ac_dyslexiaFriendlyFontToken = 'true'
            localStorage.setItem('_ac_dyslexiaFriendlyFontToken', 'true')
            body.classList.add('_ac_dyslexiaFont')
        }
    }
</script>

<button on:click={dyslexiaFriendlyFont} class="primaryBtn">Dyslexia friendly font</button>

<style>
    :global(._ac_dyslexiaFont) {
        background: teal;
    }
</style>

(_ac_dyslexiaFriendlyFontToken 设置为 'true' 或 null，就像 localStorage 中的值一样。也可以使用布尔值 true 和 false 不确定是否有要遵循的约定...)

在 Svelte 中切换本地存储项目

Toggle localstorage item in Svelte

javascript

local-storage

svelte

svelte-component

sveltekit