18 - 实现本地存储函数

[mu-muw]

// 你的答案
<script setup>

import { ref, customRef } from "vue"; 
/**
* 实现 useLocalStorage 函数
*/
function useLocalStorage(key, ass) {
 // 使用 customRef 创建一个响应式的对象
 const value = customRef((aa, bb) => {
   return {
     // getter 方法用于获取本地存储的值
     get() {
       aa();
       return localStorage.getItem(key) ?? ass;
     },
     // setter 方法用于设置本地存储的值
     set(nvals) {
       localStorage.setItem(key, nvals);
       bb();
     }
   };
 });
 // 返回这个响应式对象
 return value;
}

// 调用 useLocalStorage 函数,传入 key 和默认值,得到一个响应式对象 counter
const counter = useLocalStorage("counter", 0);

// 打印 counter 的值
console.log(counter.value);

// 定义一个函数 update,用于更新 counter 的值
function update() {
 // 调用 counter 的 setter 方法,将值加 1
 counter.value++;
}

// 定义一个函数 Self,用于将 counter 的值减 1
function Self() {
 if (counter.value > 0) {
   counter.value--;
 }
}

// 定义一个函数 empty,用于将 counter 的值设置为 0
function empty() {
 counter.value = 0;
}

</script>

<template>
 <p>Counter: {{ counter }}</p>
 <button @click="update">自增</button>
 <button @click="Self">自减</button>
 <button @click="empty">清空</button>
</template>

[ToDouNi]

Good idea