vue项目中使用缓存遇到的坑总结。

野性酷女 2023-06-11 04:22 78阅读 0赞

### 缓存选对了，顺风顺水，选错了，全都是坑。 ###

### \[ localStorage 、sessionStorage 、cookie \]  ###

vue中的缓存也是比较多的，例如：good-storage、vue-cookie、还有个vue-cookies。等这些都可以用来缓存。

（1）good-storage     [good-storage库地址][good-storage]

npm install good-storage

//  main.js里面写入
    import storage from 'good-storage'
    
    // localStorage
     storage.set(key,val) 
     
     storage.get(key, def)
     
     // sessionStorage
     storage.session.set(key, val)
     
     storage.session.get(key, val)

**缺点：**

**localStorage：**设置的缓存，永久的，除非自己手动清除，不然会一直都存留。这肯定不是我们想要的。

**sessionStorage ：**设置的缓存，当浏览器关闭，或者页面调转外部，设置的缓存就会失效。这也不是我们预期想要的。

（2）vue-cookie   [vue-cookie库地址][vue-cookie]

npm install vue-cookie --save

var Vue = require('vue');
    var VueCookie = require('vue-cookie');
    
    
    Vue.use(VueCookie);
    
    
    // 设置cookie  
    this.$cookie.set('test', 'Hello world!', {expires: 1, domain: 'localhost'});
    // expires 过期时间：  
    1Y  ---->  1年 
    1M  ---->  1个月
    1D  ---->  1天
    1h  ---->  1小时
    10m ---->  10分支
    30s ---->  30秒
    
     
    // 使用cookie
    this.$cookie.get('test');
    
    //删除cookie
    this.$cookie.delete('test');

**优点：**

可以设置缓存的过期时间、设置domain等。

（3）vue-cookies   [vue-cookies库地址][vue-cookies]

npm install vue-cookies --save

两种引入方式：
    
    //方式1： require
    var Vue = require('vue')
    Vue.use(require('vue-cookies'))
    
    //方式2： es2015 module
    import Vue from 'vue'
    import VueCookies from 'vue-cookies'
    Vue.use(VueCookies)

// 设置默认配置   过期时间7天
    VueCookies.config('7d')
    
    
    // 设置全局的
    VueCookies.set('theme','default');
    VueCookies.set('hover-time','1s');
    
    
    // 设置cookie   （expireTimes、path、domain非必须设置）
    $cookies.set(keyName, value[, expireTimes[, path[, domain[, secure]]]]) 
    
    // 使用cookie
    $cookies.get(keyName)  
    
    //删除cookie
    $cookies.remove(keyName [, path [, domain]])

\----------------完。----------------

暂时没明白 vue-cookie和vue-cookies 的主要区别，除了设置cookie时的Api不同，别的貌似没有什么大的区别。

[good-storage]: https://www.npmjs.com/package/good-storage
[vue-cookie]: https://www.npmjs.com/package/vue-cookie
[vue-cookies]: https://www.npmjs.com/package/vue-cookies