前端缓存技术

思路：加载列表数据切数据不进行额外操作，做数据优化

• 当页面第一次加载先判断本地储存中有没有旧数据 //储存数据格式{time:Date.now(), data}
• 没有旧数据直接发送请求，并将数据储存本地
• 有旧数据并且数据没有过期，就使用本地储存的旧数据

init(){
    <!-- 1,获取本地数据 -->
    const getData = sessionStorage.getItem('key');
    <!-- 2,判断数据是否存在 -->
    if(!getData){
        this.getData()
    }else{
        <!-- 定义过期时间 (如:10s) -->
        if(Date.new() - getData.time > 1000*10){
            <!-- 如果时间超过过期时间 重新发送请求 -->
            this.getData()
        }else{
            <!-- 如果时间未超过过期时间 使用本地储存数据 -->
            this.render(getData.data);
        }
    }
},
getData(){
    <!-- 没有旧数据直接发送请求 -->
    request('url').then(data=>{
        <!-- 并将数据储存本地 -->
        sessionStorage.setItem('key',{time: Date.new(), data});
        this.render(data)
    })
},
render(data){
    <!-- 这里是数据展示 -->
    console.log(data)
}