localStorage

描述：

localStorage本地缓存对象，通过localStorage能够在用户浏览器中对数据进行本地存储。
在html5之前，应用程序数据只能存储在cookie中，但是存储在cookie中存在存储数据小，只有4kb
使用localStorage存储时，更安全一些(本地存储更安全),信息不会被传输到服务器，且比着cookie存储数据量的限制大大减小了，能够存储5M数据。
但是localStorage存储有一个致命的缺陷那就是无法设置有效期(即存储数据没有生命周期，不手动移除时，就会一直在页面缓存，因为浏览器关闭时数据不会删除)；解决这个问题需要自己重新封装一下localStorage对象，这个等会在下面给出解决方案：

localStorage使用

设置localStorage,localStorage是以key-value形式存在;value值必须为字符串 locaclStorage方法使用都比较简单，简单介绍一下使用

    localStorage.setItem(key, value);
    //在缓存中添加一个值
    localStorage.setItem('firstOne', JSON.Stringfy(123));
    //取出时
    let firstOneValue = localStorage.getItem('firstOne');
    //查看数据时需要再进行转换一下
    console.log(JSON.parse(firstOneValue)); //123
    //移除指定key
    localStorage.remove(key)
    //移除全部
    localStorage.clear();

封装localStorage能够指定有效期

重新封装localStorage,加入有效期,封装的时候借鉴了一下js-cookie中传入有效期的方式，数字和时间，数字类型的参数默认是以天为单位；封装代码如下：

export default class Storage{
    constructor(name){
        this.name= name != null ? name:"storage";
    }
    /**
     * 设置缓存 
     * @param {*} key 键
     * @param {*} value 值
     * @param {*} expires 有效时间 默认单位是天
     * 小于一天的有效时长传入参数表示 ml(毫秒)=>new Date(new Date().getTime() + ml);
     * s(秒)=>new Date(new Date().getTime() + s*1000);
     * m(分)=>new Date(new Date().getTime() + m*60*1000); 或者直接传入m/(60*24)
     * h(小时)=>new Date(new Date().getTime() + h*60*60*1000);或者直接传入h/24
     */
    setItem(key, value, expires){
        // 判断有效时间是否为空且数据类型为Date或number类型,为空/或其他数据类型时则直接返回false;
        //为空时则直接返回
        expires = expires && (expires instanceof Date || typeof expires === 'number') ?  expires : false;
        if(expires){
            if(expires instanceof Date){
                expires = expires.getTime();
            }else{
                expires = new Date().getTime() + expires * 24 * 3600 * 1000;
            }
        }
        let options = {
            key: key,
            value: value ? value : '',
            expires: expires,
        }
        localStorage.setItem(options.key, JSON.stringify(options))
    }

    /**
     * 获取缓存数据
     * @param {*} key 键
     * @returns 返回缓存数据
     */
    getItem(key) {
        let item = localStorage.getItem(key);
        try{
            item = JSON.parse(item);
            if(item){
                if(item && item.expires){
                    let endTime = new Date().getTime();
                    /* console.log(item.expires);
                    console.log(endTime); */
                    if(endTime > item.expires){
                        //移除指定键(key)的缓存 返回值有待考虑，
                        //暂时设置为与localStorage.getItem(key)数值不存在时返回null保持一致
                        localStorage.removeItem(key);
                        return null;
                    }else{
                        return item.value;
                    }
                }
            }else{
                return item;
            }   
        }catch(error){
            console.log(error);
        } 
    }
    
    /**
     * * 移除缓存
     * @param {*} key 键值
     */
    removeItem(key){
        localStorage.removeItem(key);
    }
    /**
     * 移除全部缓存
     */
    clear(){
        localStorage.clear();
    }
}

使用方法

需要先引入Storage类
import Storage from '@/utils/storage.js'
let storage = new Storage();
//有效期60s，60s之后失效
storage.setItem("test",'测试有效时长', new Date(new Date().getTime()+60*1000));
//有效期半小时
storage.setItem("test",'测试有效时长', new Date(new Date().getTime()+30*60*1000));
storage.setItem("test",'测试有效时长',30/(60*24));
//有效期12小时
storage.setItem("test",'测试有效时长', new Date(new Date().getTime()+12*60*60*1000));
storage.setItem("test",'测试有效时长',0.5);
//有效期一天，一天之后失效
storage.setItem("testTwo",'测试天数有效时长', 1);
//获取指定key的数据
console.log(storage.getItem("test"));// 测试有效时长 60s后返回null
console.log(storage.getItem("testTwo"));//测试天数有效时长 
//移除指定key
storage.remove(key);
//移除所有key
storage.clear();

总结和注意事项

以上代码是在localStorage的基础上进行封装后，添加有效期的类 在上述代码中有一个问题，当传入有效期数值类型不是时间和number类型或者不传参数时，expires(有效期会设置为false)，有效期会是永久，除非自己手动移除，否则会一直存在，不失效。

上述方式只是自己的个人见解，欢迎各位大佬提出更好的解决方案