vue中直接操作cookie及如何使用工具js-cookie

xiangsj      2022-02-09     552

关键词:

vue 中直接操作 cookie

以下3种操作方式

set: function (name, value, days) {

    var d = new Date;

    d.setTime(d.getTime() + 24*60*60*1000*days);

    window.document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();

},

get: function (name) {

    var v = window.document.cookie.match((^|;) ? + name + =([^;]*)(;|$));

    return v ? v[2] : null;

},

delete: function (name) {

    this.set(name, ‘‘, -1);

}

 

使用 js-cookie 工具:(比较方便,推荐使用)

工具地址:https://www.npmjs.com/package/js-cookie

//安装 
cnpm i js-cookie
//引入
import Cookies from js-cookie

    //使用
    技术分享图片

具体使用见以下:

Basic Usage

Create a cookie, valid across the entire site:

Cookies.set(name, value);
Create a cookie that expires 7 days from now, valid across the entire site:

Cookies.set(name, value, { expires: 7 });
Create an expiring cookie, valid to the path of the current page:

Cookies.set(name, value, { expires: 7, path: ‘‘ });
Read cookie:

Cookies.get(name); // => ‘value‘
Cookies.get(nothing); // => undefined
Read all visible cookies:

Cookies.get(); // => { name: ‘value‘ }
Delete cookie:

Cookies.remove(name);
Delete a cookie valid to the path of the current page:

Cookies.set(name, value, { path: ‘‘ });
Cookies.remove(name); // fail!
Cookies.remove(name, { path: ‘‘ }); // removed!
IMPORTANT! when deleting a cookie, you must pass the exact same path and domain attributes that was used to set the cookie, unless youre relying on the default attributes.

Note: Removing unexisting cookie does not raise any exception nor return any value

 

如何使用开发人员工具在 Internet Explorer 11 中查看 cookie

】如何使用开发人员工具在InternetExplorer11中查看cookie【英文标题】:HowdoIviewcookiesinInternetExplorer11usingDeveloperTools【发布时间】:2013-11-2507:14:16【问题描述】:我正在寻找如何使用IE11中的开发人员工具查看cookie集。我在网络分析中... 查看详情

如何修改浏览器cookie

...AddCookie…即可增加/修改一个Cookie了。另EditCookies插件也可直接修改COOKIEOpera:Opera可以在菜单->工具->高级->Cookie…对话框中找到当前的页面的Cookie项,选中以后点“编辑…”即可修改。如果修改不成功的话,有可能是因为启... 查看详情

vue使用cookie

...(VueCookie) //挂在在全局了组件中设置一个cookie//组件中直接使用来设置cookiethis.$cookie.set('test','Helloworld!',1);获取一个cookie//组件中获取方式this.$cookie.get('test');   //returnvalue删除一个cookie//删除cookiethis... 查看详情

vue-调试工具vue-devtools安装及使用

1:直接在谷歌应用商店搜索: Vue.jsdevtools进行安装2:用开发环境的CDN,不要用生产环境的CDN<!--生产环境版本,优化了尺寸和速度--><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><!--开发环境版本,包含了有帮助的命... 查看详情

cookiessessionstorage与localstorage在vue中的使用(代码片段)

...ge的使用语法//将值写入到用户浏览器中//普通字符串可以直接写入localStorage.setItem(\'存储在浏览器中的键\',存储在浏览器中的值)//如果是对象或者是数组,需要转换成json格式字符串localStorage.setItem(\'存储在浏览器中的键\',JSON.strin... 查看详情

如何将 cookie 添加到 vue-apollo 请求中?

】如何将cookie添加到vue-apollo请求中?【英文标题】:Howtoaddcookiestovue-apollorequest?【发布时间】:2020-02-2206:11:05【问题描述】:我使用vue-cli-plugin-apollo,我想通过cookie将用户选择的language从前端发送到后端。作为vue-apollo.js,我使用... 查看详情

cookie原理及java端关于cookie的增删改查操作(代码片段)

什么是Cookie在java中,Cookie是来自于Servlet规范中一个工具类,存在于Tomcat提供servlet-api.jar中Cookie存放当前用户的私人数据Cookie原理用户打开浏览器第一次(指每次重新打开浏览器的第一次,而非指历来第一次)... 查看详情

登录、注册及cookie

...注册模块1.用户输入用户名及密码,调用接口1.1注册成功直接跳转到登录页cookie.js为公共方法,用于cookie的存储、获取及删除home.vue为用户登录成功之后的主页login.vue为登录注册页main.vue为后台管理页项目整体文件结构如下cookie.js... 查看详情

如何在html文件中使用vue的开发者工具

...写的组件实例,所以不可以通过newVue(components:testExtend)来直接使用,需要通过newProfile().$mount(\'selector选择器\')来挂载到指定的元素上。_ue.extend+vm.$mount组合 查看详情

vue中使用cookie记住用户上次选择(本次例子中为下拉框)(代码片段)

...拉框的数据,刚开始觉得没思路,后来请教了项目组长,组长直接一句,这不很简单吧,直接用cookie,我:.......好吧,都王的差不多了,于是经过一番百度实践,测试,总算是可以了,接下来就说说实践以及一些坑!开发环境:webpack+vue+java后台要... 查看详情

怎样抓取网站上的cookie

...出来,粘贴到你所使用的采集软件中,或者利用采集软件直接实现登录操作。 查看详情

Laravel 中基于 Vue cookie 的身份验证

...图将现有应用程序(使用Livewire完成登录)移动到Vue,但直接对我的第一个api端点的调用被重定向到登录页面。所以我创建了一个全新 查看详情

本地cookie的使用

...1.设置cookie  cookie是document的一个属性,因此我们可以直接给document.cookie赋值。  functionsetCookie(name,value,iDay){ varoDat 查看详情

自定义的操作cookie的工具类(代码片段)

可以在SpringMVC等环境中使用的操作Cookie的工具类packageutils;importjava.io.UnsupportedEncodingException;importjava.net.URLDecoder;importjava.net.URLEncoder;importjavax.servlet.http.Cookie;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;/****Coo... 查看详情

postman之cookie和token操作

...用需要使用已有的cookie,postman操作cookie可以有2种方式。a.直接在头域中添加cookie头域,适用于已知请求时的cookie头域情况b.使用postman的cookie管理机制,既可以手动添加,同时postman也会将操作流程中获取的参数自动保存。通过调用... 查看详情

vue中使用节流lodashthrottle

...dash中文文档_.throttle这是lodash中的节流函数,具体作用可以直接看官方文档,这里不再进行解释说下在vue中具体怎么用首先上错误用法import_from‘lodash‘exportdefaultmethods:click()_.throttle(()=>console.log(‘hello‘),1000)以上这样写,在执行时... 查看详情

在vue中怎么使用cookie之vue-cookies

...ub地址:https://github.com/cmp-cc/vue-cookies我们具体来看下怎么使用这个插件的使用(a).默认值设置默认:expireTimes=1d,path=\'/\',domain=\'\',secure=\'\',sameSite=\'\'(b).$cookies.set方法添加cookie获取cookie删除cookie检测是否有keycookie列出所有cookie 查看详情

客户端存储cookie---(优缺点及定义及用途)

...cookie是浏览器提供的一种机制,可以由JavaScript对其进行操作(设置、读取、删除)cookie的特性  cookie可以实现跨页面全局变量  cookie可以跨越同域名下的多个网页,但不能跨域使用  同一个网站中所有页面共享一套cookie  ... 查看详情