前言：
前面说了一下路由的封装,主要是页面的访问,和路径,接下来说一下storage封装，顾名思义名字就已经告诉我们大概意思了，针对数据封装,storage和cookie localstorage sessionstorage的区别 还有本身vue不是提供storage api了吗为什么还要封装。

三者的区别：
存储大小：cookie 4k storage 5M
有效期：cookie拥有有效期 stirage永久存储
cookie会发送到服务端 存储在内存中 storage只存储在浏览器端
路径：cookie有路径限制 torage只存储在域名下
api：cookie没有特定的api storage有对应的api

为什么要封装storage?
storage本身有api,但是只是简单的key/value形式
storage只存储字符串,需要人工转换成json对象
storage只能一次性清空,不能单个清空

示例代码完成封装：

// 封装storge
const STORAGE_KEY = "minmall";

export default{
    //存储值
    //示例：('a',123)无module_name
    //示例2:('a',123,"b")有module_name
    setItem(key,value,module_name){
        //判断module是否有值
        if(module_name){
           let val = this.getStorage(); //获取Storage对象minmall下的模块
           val[key] = value; //key就是需要传入的key value就是需要传入的值 minmall:对象{"a":123}
           this.setItem(module_name,val); //把传入的key和value重新写入 minmall:{"b"{"a":123}}
        }else{
            let val = this.getStorage();//获取Storage对象minmall下的模块
            val[key] = value; //key就是需要传入的key value就是需要传入的值 minmall:对象{"a":123}
            window.sessionStorage.setItem(STORAGE_KEY,JSON.stringify(val)); //把传入的key和value重新写入 minmall:{"a":123}
        }
    },
    //获取值,只需要传入key
    //示例：('a')无module_name
    //示例2:('a',"b")有module_name
    getItem(key,module_name){
        //调用getStorage方法获取到storage json对象
        if (module_name){
            let val = this.getItem(module_name); //获取Storage对象minmall下的模块['b']
            if(val) return val[key] //b:{'a'}
            }
        return this.getStorage()[key] //获取Storage对象minmall下的模块['a']:json对象
    },

    //获取storage
    getStorage(){
       return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}'); 
    },
    //清空值,只需要传入key
     //示例：('a')无module_name
     //示例2:('a',"b")有module_name
    clearItem(key,module_name){
        let val = this.getStorage();  //获取Storage对象minmall下的模块
        if(module_name){
            delete val[module_name][key]; //minmall下的模块{"a":{"b"}}
        }else{
            delete val[key] //minmall下的模块{"a"}
        }
       window.sessionStorage.setItem(STORAGE_KEY,JSON.stringify(val)); //调用对象的方法传入minmall:{'a'}
    }
}

app.vue中写入：

<script>
import storage from './storage/storage' //导入模块
export default {
  name:'app',
  components:{
    
  },
  mounted(){ //请求
    //storage.setItem("liu",789) //封装的方法
    //storage.getItem('liu')
    storage.clearItem('liu')
  },
}
</script>

结果：

总结：
自己封装storage可以有助我们自定义storage方法,实现的过程我们也可以了解,并且不会受api约束,同样一些场景我们也可以考虑的比较全面,storage在游览器中存储建议是一个key对应一个json对象对象中可以写入很多值,这样我们只需要获取到一个key就可以操作里面的对象.