别致的localStorage

Sir_苏
710 阅读3分钟

大家好，我是苏先生，一名热爱钻研、乐于分享的前端工程师，跟大家分享一句我很喜欢的话：人活着，其实就是一种心态，你若觉得快乐，幸福便无处不在

github与好文

前言

在之前工作的几年里，localStorage由于其存在大小的限制我是不怎么用的，现在新公司项目对这个应用较多，在使用过程中让我深感其"难用"，一开始秉持着不重复造轮子的想法在github上溜达了一圈，确实是有已经封装过的，但是要么功能不满足要求，要么年代久远不支持typescript，于是自己花了一天半的时间自己进行了实现

点击这里，进入github查看完整实现，如果觉得好用，希望能得到您的star

开始

  • 安装
    yarn add web-localstorage-plus
  • 在入口文件main.ts中引入并初始化，我这里将根仓库名称命名为h5-storage
    import createStorage from 'web-localstorage-plus'
    const storage = createStorage('h5-storage')

一共提供了9个接口，如下

22517122-5f16c7a214888ad3.png

每一个都利用ts的函数重载说明了使用细节

1.png

  • apis

setItem

1.基本使用

    storage.setItem('username','spp')

2.存储到指定命名空间

    storage.setItem('username','spp','system')

3.对值进行加密

    storage.setItem('password',123456,true)

4.设置过期时间（3s后过期）

    storage.setItem('token',{key:1,value:2},3000)

5.完整使用

    storage.setItem('filter',{type:1},'detail',10000,false)

6.批量操作

    storage.setItem([{
        namespace:'space1',
        key:'a',
        value:'34',
        expireTime:30000
    },{
        key:'b',
        value:34,
        encrypt:true
    }],'space2')

存储结果如下

2.png

getItem

1.基本使用

    storage.getItem('username') // "spp"

2.按命名空间读取

    storage.getItem('a','space1') // "34"

3.读取加密的存储值

    storage.getItem('b','space2') // 34

4.批量从指定的命名空间读取多个值（不指定参数3，则返回的是由{key:'',namespace:''}组成数组）

    storage.getItem(['a'],'space1',true) // ["34"]

5.批量从不同的命名空间读取

    storage.getItem(['username',{
        namespace:'space1',
        key:'a'
    },{
        namespace:'space2',
        key:'b'
    }],true) //["spp","34",34]

removeItem

1.基本使用

    storage.removeItem('a')

2.删除指定命名空间下的值

    storage.removeItem('username','system')

3.批量删除单个命名空间下的多个值（参数二不指定则为默认命名空间）

    storage.removeItem(['username','password'])

4.批量删除不同命名空间下的指定值

    storage.removeItem([{
        namespace:'space1',
        key:'a'
    }])

clear

1.基本使用

    storage.clear()

2.指定命名空间不清空

    storage.clear(['space1'])

onChange

监听位置必须在修改发生前才会生效

3.png

onExpire

只有设置了过期时间的key才能被监听到

4.png

postMessage与onMessage

5.png

use

这个接口应该几乎用不到，其作用和vue中的use差不多，其注入的函数会分别在setItem、getItem、removeItem和clear时被调用,其中的wark参数标识当前正在运行的api

6.png

如果本文对您有用，希望能得到您的点赞和收藏

订阅专栏，每周更新1-2篇类型体操，每月1-3篇vue3源码解析，等你哟😎

avatar
文章
阅读
粉丝