别致的localStorage

前言

    在之前工作的几年里，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个接口

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

    使用

        1-setItem

            基本使用

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

            存储到指定命名空间

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

            对值进行加密

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

            设置过期时间（3秒后过期自动删除）

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

            完整使用

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

            批量操作

                storage.setItem([{

                    namespace:'space1',

                    key:'a',

                    value:'34',

                    expireTime:30000

                },{

                    key:'b',

                    value:34,

                    encrypt:true

                }],"space2")

            存储结果如下

        2-getItem

            基本使用

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

            按命名空间读取

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

            读取加密的存储值

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

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

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

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

                storage.getItem(['username',{

                    namespace:'space1',

                    key:'a'

                },{

                    namespace:'space2',

                    key:'b'

                }],true) // ["spp","34",34]

    3-removeItem

        基本使用

            storage.removeItem('a')

        删除指定命名空间下的值

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

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

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

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

            storage.removeItem([{

                namespace:'space1',

                key:'a'

            }])

    4-clear

        基本使用

            storage.clear()

        指定命名空间不清空

            storage.clear(['space1'])

    5-onChange

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

    6-onExpire

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

    7-postMessage与onMessage

    8-use

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