返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中的cookies缓存存值方式超简单
  • 353
分享到

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

vuecookiescookies缓存存值vue缓存 2022-11-13 14:11:39 353人浏览 安东尼
摘要

目录使用Vue-cookies插件第一步:安装第二步:全局引入 main.js 无需多言第三步:设置cookies第四步:获取cookiesvue使用缓存遇到的坑总结(1) Good

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue中的cookies缓存存值方式超简单

本文链接: https://lsjlt.com/news/171613.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue中的cookies缓存存值方式超简单
    目录使用vue-cookies插件第一步:安装第二步:全局引入 main.js 无需多言第三步:设置cookies第四步:获取cookiesvue使用缓存遇到的坑总结(1) good...
    99+
    2022-11-13
    vue cookies cookies缓存存值 vue 缓存
  • vue Keep-alive组件缓存的简单使用代码
    目录Props:用法:一、基本用法二、结合Router使用总结Props: include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达...
    99+
    2024-04-02
  • Java实现一个简单的缓存方法
    缓存是在web开发中经常用到的,将程序经常使用到或调用到的对象存在内存中,或者是耗时较长但又不具有实时性的查询数据放入内存中,在一定程度上可以提高性能和效率。下面我实现了一个简单的缓存,步骤如下。创建缓存对象EntityCache.java...
    99+
    2023-05-31
    java 缓存 ava
  • 超简单易懂的vue组件传值
    目录前言实现思路实例1:父传子实例2:子传父总结前言 vue中的组件传值大家应该都不陌生,今天用两个简单易懂的小案例教大家在项目中如何使用父传子、子传父组件之间的数据传递。 实现思路...
    99+
    2024-04-02
  • vue的缓存实现方式有哪些
    这篇文章主要讲解了“vue的缓存实现方式有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue的缓存实现方式有哪些”吧!vue实现缓存有4种方式:1、利用localStorage;2、利...
    99+
    2023-06-22
  • jsp中存取session值简单介绍
    我们在jsp中会操作一些表单的值。或者获得用户的值操作,那么我们就可以使用jsp的作用域操作,1.page、request、session、application这四个作用域,其中最常用的便是request和session的域操作。使用se...
    99+
    2023-05-30
    jsp session 简单介绍
  • redis缓存的简单操作(get、put)
    本文介绍简单的redis缓存操作,包括引入jedisjar包、配置redis、RedisDao需要的一些工具、向redis中放数据(put)、从redis中取数据(get)、访问redis时的逻辑 一、引入...
    99+
    2022-06-04
    缓存 操作 简单
  • PHP缓存技术的简单介绍
    本篇内容介绍了“PHP缓存技术的简单介绍”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!php缓存技术的应用时相当普遍的,也许有些人还对这项技...
    99+
    2023-06-17
  • 如何解决vue单页缓存存在的问题
    这篇文章主要介绍了如何解决vue单页缓存存在的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1.css同名覆盖,解决方法:父组件加上sc...
    99+
    2024-04-02
  • 简单点,学习的方式简单点~(函数存储过程)
    一个很熟悉的词语函数,最早接触于函数是数学课,万分没想到它在以后的学习中越来越重要。编程语言都会单独给函数开一章节来详细介绍,可见在编程语言中的地位杠杠的!那么函数真的很难学吗?起码对于编程来说(源码除外)...
    99+
    2024-04-02
  • Spring更简单的存储方式与获取方式详解
    目录存储方式(注解)@Controller@Service@Repository@Configuration@Component方法注解@Bean重命名bean五大注解之间的关系从S...
    99+
    2024-04-02
  • 揭秘 PHP Cookies 与 Sessions 的黑魔法:让网页存储变得简单
    Cookie 和 Session 是 PHP 中实现网页存储的关键技术,它们使网站能够在用户访问期间存储和检索信息。对于任何希望创建动态且个性化网络体验的开发人员来说,了解这些技术的内部工作原理至关重要。 Cookie Cookie 是在...
    99+
    2024-04-02
  • Redis中三大缓存现象缓存击穿、缓存穿透、缓存雪崩的解决方法
    这篇文章主要介绍“Redis中三大缓存现象缓存击穿、缓存穿透、缓存雪崩的解决方法”,在日常操作中,相信很多人在Redis中三大缓存现象缓存击穿、缓存穿透、缓存雪崩的解决方法问题上存在疑惑,小编查阅了各式资料...
    99+
    2024-04-02
  • Vue的缓存方法示例详解
    最近新做了个需求“前端缓存” 需求背景:解决表单高频率重复填报问题,要求打开页面自动填充上次录入的数据,数据存储期限为一周(7天有效期)。 说起缓存首先想到的则是 localstor...
    99+
    2024-04-02
  • Redis缓存更新一致性的简单介绍
    这篇文章主要介绍“Redis缓存更新一致性的简单介绍”,在日常操作中,相信很多人在Redis缓存更新一致性的简单介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Redis缓...
    99+
    2024-04-02
  • vue部署上线清除浏览器缓存的方式
    目录部署上线清除浏览器缓存修改根目录index.html配置 nginx 不缓存 html打包的文件路径添加时间戳vue项目部署,清理缓存方式部署上线清除浏览器缓存 vue 项目打包...
    99+
    2022-11-13
    vue 部署上线 vue清除浏览器缓存 vue浏览器缓存
  • 【超简单】MySQL存储引擎的选择与配置
    【超简单】MySQL存储引擎的选择与配置 存储引擎简介 MySQL中的数据用各种不同的技术存储在文件(或内存)中。每一种技术都使用不同的存储机构,索引技巧,锁定水平并且最终提供广泛的不同的功能和能力。通过选...
    99+
    2024-04-02
  • 深入解读PHPcms栏目缓存的存储方式
    PHPcms是一个非常流行的开源内容管理系统,广泛应用于各种网站的建设中。其中,栏目缓存是一个非常重要的功能,通过缓存可以有效提高网站的访问速度和性能。本文将深入解读PHPcms栏目缓...
    99+
    2024-03-14
    缓存 php cms
  • 利用Python编写一个简单的缓存系统
    目录项目展示不用落地的缓存系统系统应该如何实现铺垫python字典基本操作定义一个不用落地的缓存系统数据如何落地将对象保存到磁盘将对象从磁盘中导入到内存中将数据落地和缓存系统结合起来...
    99+
    2023-05-16
    Python实现缓存系统 Python缓存系统 Python缓存
  • vue中使用keep-alive动态删除已缓存组件方式
    目录项目场景问题描述解决方案项目场景 在做后台管理系统的时候,有这样一个需求: 后台的界面如下: 点击左边的菜单,会在右边的顶部生成一个个tag导航标签。当打开多个tag页时,用户...
    99+
    2022-11-13
    vue使用keep-alive keep-alive动态删除 keep-alive删除缓存组件
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作