18 - 实现本地存储函数

[cone41]

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

/**
 * Implement the composable function
 * Make sure the function works correctly
 */
function useLocalStorage(key: string, initialValue: any) {
  const localVal = localStorage.getItem(key);
  const value = ref(localVal || initialValue);
  //watchEffect(() => {
  //localStorage.setItem(key, value.value);
  //});
  //const count = computed({
  //get() {
  //const localVal = localStorage.getItem(key);
  //if (localVal) {
  //localStorage.setItem(key, value.value);
  //}
  //return value.value;
  //},
  //set(val) {
  //localStorage.setItem(key, val);
  //value.value = val;
  //},
  //});
  const count = customRef((track, trigger) => {
    return {
      get() {
        track();
        const val = localStorage.getItem(key);
        if (!val) {
          localStorage.setItem(key, initialValue);
        }
        return val;
      },
      set(val) {
        trigger();
        localStorage.setItem(key, val);
      },
    };
  });
  return count;
}

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>