实现本地存储函数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博客

相关推荐
北京_宏哥几秒前
🔥Jmeter(二十五) - 从入门到精通 - JMeter函数 - 下篇(详解教程)
前端·jmeter·面试
天生我材必有用_吴用2 分钟前
鸿蒙开发入门到进阶:从布局基础到组件实战
前端·harmonyos·arkts
zhangxiao3 分钟前
自定义指令 - 去除所有空格和换行
前端
三思而后行,慎承诺3 分钟前
详解React Fiber架构中,reconcile阶段的具体工作流程
javascript·react.js·ecmascript
前端太佬4 分钟前
微信公众号网页登录:前端视角下的技术实现精要
前端·javascript·微信
神仙别闹5 分钟前
基于Python+Neo4j实现新冠信息挖掘系统
开发语言·python·neo4j
Ryan今天学习了吗5 分钟前
如何在浏览器中渲染100万个元素,并且保证页面不卡顿?超详细底层原理图文分享
前端
前端太佬6 分钟前
微信小程序支付全流程实战指南(Node.js后端篇)
前端·javascript·微信小程序
_十六6 分钟前
面试官最爱问的 TypeScript 装饰器:核心原理与实战技巧全解析.md
前端·typescript
代码搬运媛6 分钟前
mitt 事件发布-订阅库在 react 中的使用
前端