LocalStorage/sessionStorage 封装 - 基于TypeScript

简介: 文章主要介绍了如何封装一个自定义 Hooks 形式的存储服务,用于在 localStorage 或者 sessionStorage 中进行持久化存储值。通过封装的方法包括 get、set、remove、clearExcept 和 clearAll,使得操作存储变得更加简单和方便。

实际上社区已经有非常成熟的库了,可以轻量化引入并使用store2,当然,我们这篇文章分享日常简单or局部使用时的简单封装。

我们经常需要在 localStorage 或者 sessionStorage 去持久化存储值,但是 localStorage 和 sessionStorage 提供的 api 在处理对象的时候,往往需要 stringify 去转成字符串去存储,再通过 parse 去转换回来,这样是比较麻烦的,我们就可以将这些操作封装成函数去调用

封装为自定义Hooks形式

支持以下方法

  • get
  • set
  • remove
  • clearAll
  • clearExcept

实现:

type StorageService = {
   
    get: (key: string) => any;
    set: (key: string, value: any) => void;
    remove: (key: string) => void;
    clearExcept: (key: string) => void;
    clearAll: () => void;
}

type Func = ($storage?: Storage) => StorageService;

export const useStorage: Func = ($storage = localStorage) => {
   
    /**
     * 根据 key 值获取储存在 storage 中的值
     * @param key storage key
     */
    const get = (key: string) => {
   
        let value = $storage.getItem(key);
        try {
   
            value = JSON.parse(value);
            return value;
        } catch {
   
            return value;
        }
    }

    /**
     * 根据 key 值向 storage 中储存值
     * @param key storage key
     * @param value 需要储存在 storage 中的值
     */
    const set = (key: string, value: any) => {
   
        return $storage.setItem(key, value ? JSON.stringify(value) : value);
    }

    /**
     * 根据 key 值移除储存在 storage 中的值
     * @param key storage key
     */
    const remove = (key: string) => {
   
        return $storage.removeItem(key);
    }

    /**
     * 移除除了 key 之外的所有储存在 storage 中的值
     * @param key storage key
     */
    const clearExcept = (key: string) => {
   
        for (let i = 0; i < $storage.length; i++) {
   
            const itemKey: string | undefined = $storage.key(i);
            if (itemKey && itemKey !== key) {
   
                $storage.removeItem(itemKey);
            }
        }
    }

    /**
     * 移除所有储存在 storage 中的值
     */
    const clearAll = () => {
   
        for (const itemKey in $storage) {
   
            if (itemKey) {
   
                $storage.removeItem(itemKey);
            }
        }
    }

    return {
   
        get,
        set,
        remove,
        clearExcept,
        clearAll,
    }
}

export default useStorage;

使用:

const store = useStorage(); // 可选,默认localStorage
store.get('key');
store.set('key', {
    a: 1 });
store.remove('key');
store.clearExcept('key');
store.clearAll();
目录
相关文章
|
29天前
|
JavaScript Go 数据库
用Typescript 的方式封装Vue3的表单绑定,支持防抖等功能。
Vue3 的父子组件传值、绑定表单数据、UI库的二次封装、防抖等,想来大家都很熟悉了,本篇介绍一种使用 Typescript 的方式进行统一的封装的方法。
|
8月前
|
JavaScript 前端开发
使用vue3+TypeScript手动封装tabs组件
使用vue3+TypeScript手动封装tabs组件
105 0
|
8月前
|
JavaScript 前端开发 API
带你读《现代TypeScript高级教程》十七、TypeScript封装Fetch(1)
带你读《现代TypeScript高级教程》十七、TypeScript封装Fetch(1)
|
8月前
|
JavaScript API
带你读《现代TypeScript高级教程》十七、TypeScript封装Fetch(2)
带你读《现代TypeScript高级教程》十七、TypeScript封装Fetch(2)
|
8月前
|
JSON JavaScript 数据格式
带你读《现代TypeScript高级教程》十七、TypeScript封装Fetch(3)
带你读《现代TypeScript高级教程》十七、TypeScript封装Fetch(3)
|
11月前
|
JavaScript 前端开发 API
《现代Typescript高级教程》实战之封装Fetch
TypeScript封装Fetch 1. 安装与配置TypeScript 首先,你需要在你的机器上安装TypeScript。在命令行中输入以下命令:
351 0
|
存储 JavaScript
typescript封装LocalStorage并支持过期时间
在存储的时候设置一个过期时间,并且存储的数据进行格式化方便统一校验,在读取的时候获取当前时间进行判断是否过期,如果过期进行删除即可。
138 0
typescript封装LocalStorage并支持过期时间
|
JavaScript
antd组件库封装2-为什么要使用typescript
antd组件库封装2-为什么要使用typescript
56 0
antd组件库封装2-为什么要使用typescript
|
JavaScript
antd组件库封装1-什么是typescript
antd组件库封装1-什么是typescript
71 0
antd组件库封装1-什么是typescript
|
JavaScript
antd组件库封装3-安装和使用typescript
antd组件库封装3-安装和使用typescript
82 0
antd组件库封装3-安装和使用typescript