详解Vue3中useLocalStorage的用法

更新时间：2023年10月26日 17:00:31 作者：白瓷梅子汤

这篇文章主要为大家详细介绍了Vue3中useLocalStorage用法的相关知识,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解一下

基础封装

初始化数据，如果 localStorage 中已有对应的数据则使用 localStorage 的值
使用 onMounted 来确保组件已经挂载后再执行操作
为 data 添加一个监听器
监听 data 的变化，并将新值保存到 localStorage

import { ref, onMounted, watchEffect } from 'vue';

function useLocalStorage(key, defaultValue) {
  const data = ref(localStorage.getItem(key) || defaultValue);

  onMounted(() => {
    const localStorageUpdate = () => {
      localStorage.setItem(key, data.value);
    };

    watchEffect(localStorageUpdate);
  });

  return data;
}

export default useLocalStorage;

使用

每当输入框的值发生变化时，它会自动更新localStorage，并且如果你刷新页面，它会保留之前的值。

<template>
  <el-input v-model="text" />
  {{ text }}
</template>

<script lang="ts" setup>
import { ref } from "vue";
import useLocalStorage from "../hooks/useLocalStorage.js";

const text = useLocalStorage("myText", "Default Text");
</script>

支持更多数据类型

因为localStorage只能存储字符串，当涉及到存储函数（function类型）或其他非字符串/JSON类型数据时，需要特殊处理。在存储和检索函数时，将其序列化为字符串，然后在检索时反序列化。

import { ref, onMounted, watchEffect } from "vue";

function useLocalStorage(key, defaultValue) {
  const storedValue = localStorage.getItem(key);

  const data = ref(storedValue ? deserialize(storedValue) : defaultValue);

  onMounted(() => {
    const localStorageUpdate = () => {
      localStorage.setItem(key, serialize(data.value));
    };

    watchEffect(localStorageUpdate);
  });

  // 反序列化数据
  function deserialize(value) {
    try {
      const deserialized = JSON.parse(value);
      if (typeof deserialized === "object" && deserialized !== null) {
        return deserialized;
      } else if (typeof deserialized === "function") {
        return new Function(`return ${deserialized}`)();
      } else {
        return deserialized;
      }
    } catch (e) {
      return value;
    }
  }

  // 序列化数据
  function serialize(value) {
    if (typeof value === "function") {
      return value.toString();
    } else if (Array.isArray(value)) {
      return JSON.stringify(value);
    } else if (typeof value === "object" && value !== null) {
      return JSON.stringify(value);
    } else {
      return value;
    }
  }

  return data;
}

export default useLocalStorage;

到期删除

在现有的自定义useLocalStorage hook 中增加一个配置项，以控制数据的有效期。

onMounted，向 localStorage 中设置时间戳

localStorage.setItem(`${key}_timestamp`, Date.now().toString());

使用 setInterval，在组件的生命周期内定期检查数据是否过期，然后在过期时手动删除它。

onMounted(() => {
  localStorage.setItem(`${key}_timestamp`, Date.now().toString());

  //....

  const checkExpiration = () => {
    if (
      expiration &&
      storedTimestamp &&
      Date.now() - parseInt(storedTimestamp) > expiration
    ) {
      localStorage.removeItem(key);
      localStorage.removeItem(`${key}_timestamp`);
    }
  };

  setInterval(checkExpiration, 1000);
});

完整代码：

import { ref, onMounted, watchEffect } from "vue";

function useLocalStorage(key, defaultValue, expiration) {
  const storedValue = localStorage.getItem(key);
  const storedTimestamp = localStorage.getItem(`${key}_timestamp`);

  const data = ref(storedValue ? deserialize(storedValue) : defaultValue);

  onMounted(() => {
    localStorage.setItem(`${key}_timestamp`, Date.now().toString());

    const localStorageUpdate = () => {
      localStorage.setItem(key, serialize(data.value));
    };

    watchEffect(localStorageUpdate);

    const checkExpiration = () => {
      if (
        expiration &&
        storedTimestamp &&
        Date.now() - parseInt(storedTimestamp) > expiration
      ) {
        localStorage.removeItem(key);
        localStorage.removeItem(`${key}_timestamp`);
      }
    };

    setInterval(checkExpiration, 1000);
  });

  // 反序列化数据
  function deserialize(value) {
    try {
      const deserialized = JSON.parse(value);
      if (typeof deserialized === "object" && deserialized !== null) {
        return deserialized;
      } else if (typeof deserialized === "function") {
        return new Function(`return ${deserialized}`)();
      } else {
        return deserialized;
      }
    } catch (e) {
      return value;
    }
  }

  // 序列化数据
  function serialize(value) {
    if (typeof value === "function") {
      return value.toString();
    } else if (
      Array.isArray(value) ||
      (typeof value === "object" && value !== null)
    ) {
      return JSON.stringify(value);
    } else {
      return value;
    }
  }

  return data;
}

export default useLocalStorage;

到此这篇关于详解Vue3中useLocalStorage的用法的文章就介绍到这了,更多相关Vue3 useLocalStorage内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

在 Vue 3 中设置 `@` 指向根目录的几种常见方法汇总
在 Vue 3 项目开发中,为了方便管理和引用文件路径,设置 @ 指向根目录是一项常见的需求,下面给大家分享在Vue3中设置 `@` 指向根目录的方法汇总,感兴趣的朋友一起看看吧
2024-06-06
使用vue.js在页面内组件监听scroll事件的方法
今天小编就为大家分享一篇使用vue.js在页面内组件监听scroll事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue Vite热更新不起作用的正确解决办法
热更新全称Hot Module Reload,常常在构建工具里面出现,下面这篇文章主要介绍了Vue Vite热更新不起作用的正确解决办法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-03-03
vue中注册自定义的全局js方法
这篇文章主要介绍了vue中注册自定义的全局js方法,文中给大家补充介绍了vue自定义函数挂到全局的方法，需要的朋友可以参考下
2019-11-11
Vue动态设置img的src不生效的问题解决
本文主要介绍了Vue动态设置img的src不生效的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-01-01
Vue数据双向绑定的深入探究
这篇文章主要给大家介绍了关于Vue数据双向绑定的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-11-11
vue中实现代码高亮与语法着色的方法介绍
在Vue的开发过程中，我们经常需要展示代码片段或者进行代码高亮与语法着色，Vue提供了多种方式来实现代码高亮与语法着色，本文将为你详细介绍这些方法,需要的朋友可以参考下
2023-06-06
Vue 组件封装并使用 NPM 发布的教程
这篇文章主要介绍了Vue 组件封装并使用 NPM 发布的教程,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-09-09
vue+epubjs实现电子书阅读器的基本功能
这篇文章主要为大家详细介绍了如何使用vue+epubjs实现电子书阅读器的基本功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2023-11-11
vxe-list vue 如何实现下拉框的虚拟列表
这篇文章主要介绍了vxe-list vue 如何实现下拉框的虚拟列表，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06

详解Vue3中useLocalStorage的用法

目录

基础封装

支持更多数据类型

到期删除

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具