vue中的cookies缓存存值方式 超简单

目录
  • 使用vue-cookies插件
    • 第一步：安装
    • 第二步：全局引入 main.js 无需多言
    • 第三步：设置cookies
    • 第四步：获取cookies
  • vue使用缓存遇到的坑总结
    • (1) good-storage     good-storage库地址
    • (2) vue-cookie   vue-cookie库地址
    • (3) vue-cookies   vue-cookies库地址

使用vue-cookies插件

第一步：安装

npm install vue-cookies --save

第二步：全局引入 main.js 无需多言

import Vue from 'vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

第三步：设置cookies

this.$cookies.set('selectValue', this.value,"1h")  
//  selectValue==cookies名称
//  this.value==值
//  1h cookies过期时间

第四步：获取cookies

this.$cookies.get('selectValue')

完成啦~

vue使用缓存遇到的坑总结

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

[ localStorage 、sessionStorage 、cookie ] 

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

(1) 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库地址

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库地址

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不同，别的貌似没有什么大的区别。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue项目中实现缓存的最佳方案详解

    vue项目中实现缓存的最佳方案详解

    需求 在开发vue的项目中有遇到了这样一个需求:一个视频列表页面,展示视频名称和是否收藏,点击进去某一项观看,可以收藏或者取消收藏,返回的时候需要记住列表页面的页码等状态,同时这条视频的收藏状态也需要更新, 但是从其他页面进来视频列表页面的时候不缓存这个页面,也就是进入的时候是视频列表页面的第一页 一句话总结一下: pageAList->pageADetail->pageAList, 缓存pageAList, 同时该视频的收藏状态如果发生变化需要更新, 其他页面->pageAList,

  • VUE前端cookie简单操作

    如下是简单cookie操作,当前仅限前端实例,具体内容如下 要注意的有两点: 1.cookie内容存贮的名称 2.删除cookie是通过设置过期为过去时间实现的 <body> <div id="app"> <button @click="clearCookie()"> 清除cookie </button> </div> </body> <script> let app = new V

  • vue项目中js-cookie的使用存储token操作

    1.安装js-cookie # npm install js-cookie --save # yarn add js-cookie 2.引用(需要的文件) import Cookies from 'js-cookie' const TokenKey = 'Admin-Token' export function getToken() { return Cookies.get(TokenKey) } export function setToken(tcuncuoken) { return Coo

  • vue中的cookies缓存存值方式 超简单

    目录 使用vue-cookies插件 第一步:安装 第二步:全局引入 main.js 无需多言 第三步:设置cookies 第四步:获取cookies vue使用缓存遇到的坑总结 (1) good-storage     good-storage库地址 (2) vue-cookie   vue-cookie库地址 (3) vue-cookies   vue-cookies库地址 使用vue-cookies插件 第一步:安装 npm install vue-cookies --save 第二步:全

  • 详解Vue中组件的缓存

    详解Vue中组件的缓存

    之前在<Vue一个案例引发的动态组件与全局事件绑定总结>这篇文章中简单提到过组件的缓存.当时只是简单的提供了一个解决问题的思路,并没有说到多少组件缓存的东西,今天我们就来详细说说组件的缓存. 组件化开发模式下,我们会把整个项目拆分成很多组件,然后按照合理的方式组织起来. 自然就存在组件之间的切换问题,Vue 中有个「动态组件」的概念,它能够让我们更好的实现组件的切换. 在实际的项目开发中,产品是不可能放过我们的,需求总是在不停的变化,如果你碰到那些不改需求的产品就嫁了吧,太难得了. 最近项目中

  • vue App.vue中的公共组件改变值触发其他组件或.vue页面监听

    业务场景重现 现在我的App.vue里面有一个头部的公共组件,头部组件里有一个输入框,当我输入词条时,将词条传进App.vue里的<router-view>里的.vue页面,并进行查询获取数据 解决思路如下: 1.如何拿到头部的词条 2.当词条改变时如何触发.vue里的请求数据事件 解决方案 我是用vuex数据仓库来存储词条的,当词条改变时,修改数据仓库里的词条 然后在.vue页面里监听这个词条,当词条改变时触发请求数据的事件 代码 数据仓库store.js import Vue from '

  • 详解Vue中组件传值的多重实现方式

    vue中组件传值方式整理 1.我们最熟悉的父子组件传值 父->子 props 子->父 $emit 这些我们最常用的就不说了,如果有不理解的,俺这儿有篇不错的文章,链接奉上~ https://www.cnblogs.com/LoveAndPeace/p/7273648.html 2.兄弟组件或无关系组件之间的传值 我们最常用的方式采用一个第三方变量 俗称eventbus 通过其中一个$emit发另一个$on接收的方式 实现组件传值 main.js中挂载一下 在其中一个页面$emit 另一个页面

  • Vue中keep-alive的两种应用方式

    Vue中keep-alive的使用我总结的有两种方式应用: 首先简述一下keep-alive的作用,kee-alive可以缓存不活动的的组件.当组件之间进行相互切换的时候,默认会销毁,当重新切换回来时又重新初始化.现在有需求切换回来不销毁组件,保持原来的状态,此时用keep-alive就可以实现了 我创建了两个组件,可以相互切换 组件1: 组件2: 第一种方式 在组件1的路由中添加 meta: { keepAlive: true }, 也就是当前路由需要缓存 此时路由设置完毕,keep-aliv

  • vue中,在本地缓存中读写数据的方法

    1.安装good-storage插件 cnpm i good-storage --save 2.读/写的方法 common/js/cache.js: import storage from 'good-storage' const SEARCH_KEY = '__search__' const SEARCH_MAX_LENGTH = 15 // compare:findindex传入的是function,所以不能直接传val function insertArray(arr, val, comp

  • 详解Vue中使用Echarts的两种方式

    1. 直接引入echarts 先npm安装echarts npm install echarts --save 开发: main.js import myCharts from './comm/js/myCharts.js' Vue.use(myCharts) myCharts.js /** * 各种画echarts图表的方法都封装在这里 */ import echarts from 'echarts' (function() { var chart = {}; chart.install =

  • Vue中如何使用Map键值对传参详析

    目录 Vue里使用Map键值对传参 补充:vue遍历Map,Map在vue中的使用方法 总结 Vue里使用Map键值对传参 问题描述:在参数传递时时候Map键值对key:value的形式进行传参. 1.date数据区定义声明map变量和中间数据变量temp: data(){ return{ //其他代码 map:'', temp:[] } }, 2.methods方法区接口传值:声明map为Map变量,接收接口传过来的key数据生成表单项数据项: this.map=new Map() 即: //

  • 在vue中写jsx的几种方式

    目录 版本 render函数 jsx/tsx 使用jsx的几种方式 使用js对象注册component 使用.vue文件 vue2.7在.vue文件中结合compositionApi和jsx 版本 本文版本配置 vue: 2.7.2 vue-cli: ~4.5.18: 本文代码github仓库地址 render函数 render函数和vue中的template是互斥的,template最终是要编译成virtual Dom的,而render函数可以更直接构建virtual Dom: virtual

  • vue中的非父子间的通讯问题简单的实例代码

    官网上的例子好晦涩,看了一个头两个大,关于非父子间的通讯问题,经过查阅得到了下面的例子, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兄弟之间的通讯问题</title> <script src="vue.js"></script> </head>

随机推荐