【vue 引入并使用cookie】

最新推荐文章于 2024-06-26 01:39:39 发布
最新推荐文章于 2024-06-26 01:39:39 发布
阅读量793 收藏 2
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TWenYuan/article/details/126412699
版权
本文介绍了如何在Vue项目中使用vue-cookies库进行Cookie的添加、读取、删除和检查。首先通过npm安装vue-cookies，然后在main.js中引入并应用。在Vue组件内，可以使用this.$cookies.set()、this.$cookies.get()、this.$cookies.remove()和this.$cookies.isKey()等方法进行相关操作。
摘要由CSDN通过智能技术生成

vue 引入并使用cookie

1、使用命令安装 npm install vue-cookies --save
2、main.js里面引用

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

3、页面js使用


this.$cookies.set('key',value);//增加cookie，返回 this
 
this.$cookies.get('key');//获取cookie，返回 value
 
this.$cookies.remove('key');//删除cookie，返回 false 或 true
 
this.$cookies.isKey('key');//查询cookie是否存在该key，返回 false 或 true
 
this.$cookies.keys();//查询已存在的所有cookie，返回数组
TWenYuan
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
10-14
在Vue中使用cookie来记住用户的选择是一个常见的需求，尤其是在开发Web应用时。当用户在页面上进行某些选择，如下拉框的选择后，为了提升用户体验，希望用户下次访问页面时能够看到之前的选择依然被保留。这就需要...
vue-cookies，在vue中安装及使用cookie
一只程序猿
06-10 4979
npm官方示列：https://www.npmjs.com/package/vue-cookies 1、使用命令安装：npm install vue-cookies --save 2、main.js里面引用 import VueCookies from 'vue-cookies' Vue.use(VueCookies) 3、页面js使用 this.$cookies.set('ke...
vue中如何引入vue-cookie?
闫小样丶的博客
10-21 1560
在最近使用vue做项目的过程中，发现vue有自己的一个引入的cookie文件，极大的方便了我们进行cookie数据的存储。 在此大概总结一下： 一、引入vue-cookies.js npm链接：https://www.npmjs.com/package/vue-cookies 二、API文档 1. 设置默认值，$cookies.config() $cookies. config(e...
前端：Vue中使用JS-Cookie
最新发布
一些平时在开发过程中遇到的常见问题，分享给大家
06-26 465
在我们构建Vue站点时候，可能需要使用 cookie 来记录用户信息或者偏好设置，我们可以引入第三方库JS-Cookie
vue引入js-cookie
YYF的博客
04-19 415
vue引入js-cookie 安装 npm install js-cookie 建立通用的js，在\src\utils下创建auth.js import Cookies from 'js-cookie' const TokenKey = 'Admin-Token' export function getToken() { return Cookies.get(TokenKey) } ...
vue项目中使用cookie
romeo12334的博客
08-29 3698
安装vue-cookies包： npm install vue-cookies --save 在main.js中引入： 使用require： var Vue = require('vue') Vue.use(require('vue-cookies')) 若支持es6，则： import Vue from 'Vue' import VueCookies from 'vue-cookie...
vue中如何使用cookie
qq_45256497的博客
10-10 315
vue中如何使用cookie
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
12-01
总结，要使Vue项目中的axios请求携带cookie，关键在于设置axios的`withCredentials`选项为`true`，并在服务端正确配置CORS策略。这样，无论是常规的请求还是跨域请求，都可以顺利地将用户的登录状态传递给服务器，...
详解vue中localStorage的使用方法
12-09
总的来说，Vue中使用localStorage可以方便地在用户关闭和重新打开浏览器时保持应用状态，解决像Cookie那样需要刷新才能获取新值的问题。合理运用localStorage和sessionStorage，可以在不增加服务器负担的情况下，...
VUE单点登陆传cookie
weixin_33854644的博客
11-22 464
Cookie跨域单点登录 为了快速、简单的实现这一功能，首先想到就是通过JS操作Cookie并让两个不同域的cookie能够相互访问，这样就可达到了上述的效果，具体实现过程大致可分以下两个步骤： １、在Ａ系统下成功登录后，利用JS动态创建一个隐藏的iframe，通过iframe的src属性将Ａ域下的cookie值作为 get参数重定向到Ｂ系统下b.aspx页面上；...
vue项目关于前端传Cookie总结
qq_35371821的博客
08-12 1780
1.请求传cookie 配置 //直接在拦截器里加 Axios.defaults.withCredentials = true; 2.cookie的写入，读取，清除 注意： cookie写入需要注意 当项目有多个文件夹时我们需要设置path cookie清除一般是设置过期日期或者置空，我这里用的是置空 /** * 添加cookie * @param {String} objName * @param {String} objValue * @param {Number} objHours */
vue-cookie
xiao-啸
07-21 558
vue-cookie 第一步：安装vue-cookie npm install vue-cookie --save 第二步：es5es6引入cookie的方法 // require es5 方法 var Vue = require('vue') Vue.use(require('vue-cookie')) // es6 方法 import Vue from 'Vue' import VueC...
Vue中如何使用引入和使用Cookie(简单使用版)？
m0_63553261的博客
02-21 380
Vue中Cookie的简单使用
vue之vue-cookies安装和使用说明
weixin_33736649的博客
01-07 401
vue之vue-cookies安装和使用说明npm官方链接：https://www.npmjs.com/package/vue-cookies 安装,在对应项目根目录下执行：npm install vue-cookies --save或者cnpm install --save vue-cookies 使用：import Vue from 'Vue'import VueCookies from ...
vue axios 前台跨域传cookie到后台中去
HeartCoreT的博客
01-26 1105
1、后台配置 import org.springframework.boot.web.servlet.FilterRegistrationBean; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.sp
vue-cookies的使用
weixin_30872867的博客
12-04 539
一.安装vue-cookies 　　在软件的命令行中输入以下命令: npm install vue-cookies -S 二.引入和使用vue-cookies 　　在软件的main.js中加入: import VueCookies from 'vue-cookies' Vue.use(VueCookies) 三.如果在局部使用可以用 1.设置cookies ...
vue 中的cookie使用
前端技术的学习整理
07-06 1万+
一，安装饼干在Vue2.0下，这个貌似已经不需要安装了。因为当你创建一个项目的时候，npm install已经为我们安装好了。我的安装方式如下：# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖，走你 $ cd my-project $ ...
Vue中 引入使用 js-cookie
明天也要努力的博客
04-29 3703
1. js-cookie 安装及引入 js-cookie 是关于 cookie 存储的一个js的API，根据官网描述其优点有：适用所有浏览器、接受任何字符、经过任何测试没什么 bug、支持 CMD 和 CommonJS、压缩之后非常小，仅900个字节。 npm install js-cookie --save 在这里插入代码片 ...
vue+axios+element ui 实现全局loading加载
热门推荐
周搏的博客
04-23 1万+
实现全局loading加载 分析需求，我们只需要在请求发起的时候开始loading，响应结束的时候关闭loading，就这么简单 对不对？ import axios from 'axios'; import { Message, Loading } from 'element-ui'; import Cookies from 'js-cookie'; import rou...
vue使用js-cookie
03-01
Vue.js 是一个流行的 JavaScript 框架，而 js-cookie 是一个用于操作浏览器 cookie 的 JavaScript 库。通过结合使用 Vue.js 和 js-cookie，我们可以方便地在 Vue.js 应用程序中管理和操作 cookie。 要使用 js-cookie，首先需要在项目中安装它。可以通过 npm 或者 yarn 进行安装： ``` npm install js-cookie ``` 或者 ``` yarn add js-cookie ``` 安装完成后，在需要使用 cookie 的组件中引入 js-cookie： ```javascript import Cookies from 'js-cookie'; ``` 然后，你可以使用 js-cookie 提供的方法来设置、获取和删除 cookie。以下是一些常用的方法示例： 1. 设置 cookie： ```javascript Cookies.set('key', 'value'); ``` 2. 获取 cookie： ```javascript const value = Cookies.get('key'); ``` 3. 删除 cookie： ```javascript Cookies.remove('key'); ``` 在 Vue.js 组件中使用 js-cookie 的示例代码如下： ```javascript <template> <div> <button @click="setCookie">Set Cookie</button> <button @click="getCookie">Get Cookie</button> <button @click="deleteCookie">Delete Cookie</button> </div> </template> <script> import Cookies from 'js-cookie'; export default { methods: { setCookie() { Cookies.set('key', 'value'); }, getCookie() { const value = Cookies.get('key'); console.log(value); }, deleteCookie() { Cookies.remove('key'); }, }, }; </script> ``` 这样，你就可以在 Vue.js 应用程序中使用 js-cookie 来管理 cookie 了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值