18 - 实现本地存储

[liaohui5]

最简单的做法, 使用自定义 ref

<script setup lang="ts">
import { ref, computed, customRef } from "vue";

function useLocalStorage(key: string, initialValue: any) {
  return customRef((track, trigger) => {
    return {
      get() {
        track();
        const storedValue = localStorage.getItem(key);
        if (storedValue === null) {
          localStorage.setItem(key, JSON.stringify(initialValue));
          return initialValue;
        }
        return JSON.parse(storedValue);
      },
      set(newValue: any) {
        trigger();
        localStorage.setItem(key, JSON.stringify(newValue));
      },
    };
  });
}

const counter = useLocalStorage("counter", 0);

console.log(counter.value);
const update = () => counter.value++;
</script>

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