vue hooks about LocalStorage

最新推荐文章于 2024-09-16 15:56:04 发布

Dragen丶

最新推荐文章于 2024-09-16 15:56:04 发布

阅读量139

点赞数

分类专栏： vue hooks 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Lucifer_Samas/article/details/130823476

版权

vue hooks 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该代码段定义了一个名为useLocalStorage的函数，用于处理浏览器的本地存储。它包括获取、设置和删除本地存储数据的方法。getStorage方法从localStorage获取数据并尝试将其解析为JSON对象。setStorage可以存储单个键值对或者整个对象到本地存储。removeStorage则能删除单一或多个键的缓存数据。

摘要由CSDN通过智能技术生成

// 操作本地缓存
const useLocalStorage = () => {
    
  // 获取本地缓存数据
  const getStorage = (key) => {
    
    let jsonStr = localStorage.getItem(key)

    // 判断获取的数据是否为 json
    if(jsonStr instance String && typeof JSON.parse(jsonStr) === 'object'){
        return JSON.parse(jsonStr)
    }

    return jsonStr;
  };


  // 存储本地缓存数据 key: string / array 必传 , value: 可选参数, 非必传
  const setStorage = (key, value) => {

    // 如果传入的 key 是 object
    if (key instanceof Object) {

      // 遍历对象
      for (let objKey in key) {
        localStorage.setItem(objKey, key[objKey]);
      }

      return;
    }

    // 如果 key 是 string 并且传入了 value 
    if (key instanceof String && value) {
      localStorage.setItem(key, value);
    }
  };


  // 删除缓存， key: string / array
  const removeStorage = (key) => {

    // 如果传入 数组
    if (key instanceof Array) {
      key.forEach((storageKey) => localStorage.removeItem(storageKey));
      return;
    }

    localStorage.removeItem(key);
  };

  return {
    getStorage,
    setStorage,
    removeStorage,
  };
};

export { useLocalStorage };