实现本地存储函数useLocalStorage

我们经常需要使用 LocalStorage API,一个好用的可组合函数封装将帮助我们更好地使用它,让我们开始吧 👇:

TypeScript 复制代码
<script setup lang='ts'>

import { ref, watch } from "vue"

/**
 * Implement the composable function
 * Make sure the function works correctly
*/
function useLocalStorage(key: string, initialValue: any) {
  const value = ref(initialValue)
  watch(value,(val)=>{
    localStorage.setItem(key,val)
  },{
    immediate:true
  })
  return value
}

const counter = useLocalStorage("counter", 0)

// We can get localStorage by triggering the getter:
console.log(counter.value)

// And we can also set localStorage by triggering the setter:

const update = () => counter.value++

</script>

<template>
  <p>Counter: {{ counter }}</p>
  <button @click="update">
    Update
  </button>
</template>

其中的watch可以修改为以下方式:

TypeScript 复制代码
watchEffect(() => {
    localStorage.setItem(key, value.value)
})

// watchEffect自动添加了immediate:true

watchEffect:立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行。

watchEffect的特点可以查看watchEffect()和effectScope()-CSDN博客

相关推荐
codelang11 分钟前
Cline + MCP 开发实战
前端·后端
好_快2 小时前
Lodash源码阅读-memoizeCapped
前端·javascript·源码阅读
好_快2 小时前
Lodash源码阅读-toString
前端·javascript·源码阅读
好_快2 小时前
Lodash源码阅读-memoize
前端·javascript·源码阅读
excel2 小时前
webpack 核心编译器 十四 节
前端
excel2 小时前
webpack 核心编译器 十三 节
前端
腾讯TNTWeb前端团队9 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰12 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪12 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪13 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试