封装localstorage目的

• localstorage的兼容性问题
• localstorage的储存上限
• 储存为对象时

解决办法

• 惰性函数封装
• 进行序列化储存，读取进行反序列化

方法实现

// isCheckLoaclStorage.js

export default function isCheckLoaclStorage() {
    try {
        localStorage.setItem('key', 'value')
        if (localStorage.getItem('key') === 'value') {
            localStorage.removeItem('key')
            return {
                set: function (key, value) {
                    if (Object.prototype.toString.call(key).slice(8, -1).toLowerCase() !== 'string') {
                        console.log('key 不是string 类型')
                        key = String(key)
                    }
                    localStorage.setItem(key, JSON.stringify(value))
                },
                get: function (key) {
                    if (Object.prototype.toString.call(localStorage.getItem(key)).slice(8, -1).toLowerCase() === 'undefined') {
                        // 如果储存值时undefined时,不进行反序列化
                        return localStorage.getItem(key)
                    }
                    return JSON.parse(localStorage.getItem(key))
                },
                remove: function (key) {
                    return localStorage.removeItem(key)
                },
            }
        }
        
    } catch(e) {
        return function () {
            if (e.name === 'QuotaExceededError' || e.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
              console.warn('localStorage 存储已达上限！')
            } else {
              console.warn('当前浏览器不支持 localStorage！');
            }
        }
    }
}

方法调用

// 导入
import isCheckLoaclStorage form 'isCheckLoaclStorage.js'
// 方法调用定义，根据当前浏览器是否支持localstorage||根据当前的localstorage是否能继续储存
let loaclStorage_ = isCheckLoaclStorage()
// 设置
loaclStorage_.set('key', 'value')
// 读取
localstorage_.get('key')
// 移除
localstorage_.remove('key')