封装localStorage本地存储

辰漪
2021-12-22 / 0 评论 / 70 阅读 / 正在检测是否收录...

封装本地存储是为了更好更方便的实现本地存储,简洁明了

实现本地存储的步骤

1. 首先创建枚举列表,用来记录本地存储的键,可以清楚地知道,你本地都存了啥

// storageEnum枚举列表
const storageEnum = {
    user: ['user', '用户'], // key:简写名称  value array[0]: 本地存储的键名, array[1]:描述是干嘛的
    userToken: ['user::access_token', '用户token'],
    userInfo: ['sc_selfInfo', '用户信息'],
    cart: ['cart', 'cart购物车'],
}
module.exports = storageEnum

2. 定义枚举工具

/**
 * 枚举定义工具
 * 示例:
 * const AA = createEnum({
 *     b: [1, '审核中'],
 *     C: [2, '审核通过']
 * })
 * 获取枚举值:AA.b
 * 获取枚举描述:AA.getDesc('b')
 * 通过枚举值获取描述:AA.getDescFromValue(AA.b)
 *
 */
export function createEnum(definition) {
    const strToValueMap = {}
    const numToDescMap = {}
    for (const enumName of Object.keys(definition)) {
        const [value, desc] = definition[enumName]
        strToValueMap[enumName] = value
        numToDescMap[value] = desc
    }
    return {
        ...strToValueMap,
        getDesc(enumName) {
            return (definition[enumName] && definition[enumName][1]) || ''
        },
        getDescFromValue(value) {
            return numToDescMap[value] || ''
        }
    }
}

3. 封装本地存储方法

/*
* @param param {Object} key值为 method name data
*/
Vue.prototype.$storageEnum = (param) => {
    let that = this;
    let {
        method, // get  /  set
        name, // 存储storageEnum的键名简写
        data // 要存储的数据
    } = param
    let storagelist = createEnum(storageEnum)
    let storageAction = new Map()
        .set('set', () => {
            uni.setStorageSync(storagelist[name], data)
        })
        .set('get', () => {
            return uni.getStorageSync(storagelist[name]);
        })
    try {
        return storageAction.get(method)();
    } catch (e) {
        uni.showToast({
            icon: 'none',
            title: `<${name}>缓存,使用错误请检查!`
        });
    }
}

4. 使用

this.$storageEnum({
  method: 'set',
  name: 'userInfo',
  data: {
    username: 'zs',
    age: 18
  }
})
1
选择打赏方式:
微信

评论 (0)

取消