JS-Cookie操作
关于cookie
Cookie
,有时也用其复数形式 Cookies。类型为“小型文本文件”,是某些网站为了辨别用户身份,进行Session跟踪而储存在用户本地终端上的数据(通常经过加密),由用户客户端计算机暂时或永久保存的信息。
组成
Cookie是一段不超过4KB的小型文本数据,由 一个名称(Name)、一个值(Value) 和其它几个用于控制Cookie有效期、安全性、使用范围的可选属性组成。
特点
Cookie 存储数据在客户端浏览器
浏览器对于单个 Cookie 的大小有限制(4kb)以及对同一个域名下的总 Cookie 数量也有限制(20个)
可以在不登录的情况下,完成服务器对客户端的身份识别
二、 操作cookie
大致了解cookie后,发现cookie其实挺重要的,例如项目里面前后端交互,很多就是使用cookie来进行校验的。那在项目里面怎么使用呢?
1. 新建cookie.js
一般情况下,为了在项目里能友好的使用一个功能,那么就会将其封装,然后模块导出使用。此时,我们可以在目录下新建文件夹util
,在util中将各种封装的工具类放入。此时我们可以在 util 下新建 cookie.js 文件。
2. 设置cookie
这类使用场景较多,例如登录或将部分信息存储到cookie等场景都会用到。
新建 setCookie 方法,将常用的内容放到参数中,如:key, value, 过期时间等。我们以这三个参数为例,那么设置 cookie 的方法如下:
// 设置cookie
export function setCookie(c_name, value, expire_days) {let exDate = new Date();exDate.setDate(exDate.getDate() + expire_days);document.cookie =c_name +'=' +encodeURIComponent(value) +';expires=' +exDate.toUTCString() +';path=/';
}
3. 读取cookie
顾名思义,读取,不需要改变什么,那么只需要知道要读取的 cookie 名即可,如果没有找到则返空处理:
export function getCookie(c_name) {let c_start = null;let c_end = null;if (document.cookie.length > 0) {c_start = document.cookie.indexOf(c_name + '=');if (c_start !== -1) {c_start = c_start + c_name.length + 1;c_end = document.cookie.indexOf(';', c_start);if (c_end === -1) c_end = document.cookie.length;return decodeURIComponent(document.cookie.substring(c_start, c_end));}}return '';
}
4. 检查cookie
同样,只需要 cookie 名即可知道是否存在此cookie:
// 检查cookie
export function checkCookie(c_name) {let username = getCookie(c_name);if (username !== null && username !== '') {return true;} else {return false;}
}
5. 清除cookie
在进行退出登录等操作时,一般我们需要将 cookie 进行清除,操作比较简单,接收到要清除的 cookie 名后操作即可,如下:
// 清除cookie
export function clearCookie(name) {setCookie(name, '', -1);
}
三、 具体使用
在对 cookie 进行了这四个方法处理后,一般的业务场景都可满足。那么怎么使用呢?
以 vue 为例,使用方法如下:
1. 引入挂载
在 main.js 中操作:
// ...
import Vue from 'vue'
// 引入
import { setCookie, getCookie, checkCookie, clearCookie } from '@/util/cookie'// 挂载到Vue实例上
Vue.prototype.$setCookie = setCookie;
Vue.prototype.$getCookie = getCookie;
Vue.prototype.$checkCookie = checkCookie;
Vue.prototype.$clearCookie = clearCookie;
2. 组件使用
在需要用到的组件,如登陆组件中,在登陆检验完毕后,后端返回了 cookie 值。在于后端商量好 cookie 名之后,便可设置:
// 例如 res 是拿到的后端的返回值
let res = {code: 200,data: {value: 'ads12as1d32sa13d1sa2d13sa1f'},msg: '登陆成功'
};
// 与后端写上 cookie 名,例如是:test_cookie_name
let cookieName = 'test_cookie_name';
let cookieValue = res.data.value;
// 设置 cookie,有效期1天
this.$setCookie(cookieName, cookieValue, 1);
当然,检查、读取、删除一样处理即可。
小结
还是蛮简单的,一个小操作能节省不少前后端数据交互的校验。总结下:
新建 cookie.js 文件
写几个操作 cookie 方法,模块打出
全局引入(main.js 挂载到 Vue)上,或者在组件中局部引入
在合适的场景下合理调用即可。
JS-Cookie操作相关推荐
- js cookie操作
//cookie操作3个方法 //设置cookie function setCookie(name, value) { var argv = setCookie.arguments; var argc ...
- js请求返回一个页面html页面跳转页面,JS cookie操作 解决页面跳转返回
在HTML中,页面跳转后,js和HTML都会刷新,这样数据就会初始化,如果要解决页面跳转互传数据,可以考虑cookie. 对于页面跳转,然后页面返回等一系列操作,cookie中数据模拟堆栈出栈可以实现 ...
- php header setcookie,php中header头设置Cookie与内置setCookie的区别,和js对cookie操作
首先声明,浏览的Cookie操作都是通过HTTP Header(俗称"Http头") 来实现.所有的服务器与客户端之间Cookie数据传输都是通过Http请求头来操作. PHP中* ...
- Selenium 利用 JS/JQ 操作元素、鼠标键盘事件、Cookie 操作
今天是持续写作的第 26 / 100 天. 如果你有想要交流的想法.技术,欢迎在评论区留言. 本篇博客主要学习 Selenium 中如何利用 JavaScript 与 JQuery 操作页面元素,以及 ...
- 使用jquery.cookie操作Cookie实例
我们在WebForm上增加 "增加,删除,修改"三个按钮,并使用一个文本框来显示当前写入的Cookie的内容,我们将为每个按钮写一个处理函数. 对Cookie操作实例 <%@ ...
- android 字符串数组去重,GitHub - deng-ming-hao/ec-do: 实例为日常开发常用的小实例,包括数组去重,打乱数组,字母大小写转换,cookie操作的封装等。...
ec-do 自己封装的常用操作实例 实例为日常开发常用的小实例,包括数组去重,打乱数组,字母大小写转换,cookie操作的封装等. 使用方法 引入ec-do.js //去除空格 ecDo.trim(' ...
- js如何操作表格(常用属性方法汇总)
js如何操作表格(常用属性方法汇总) 一.总结 一句话总结: 二.表格相关的属性和方法 1.1 Table 对象集合 cells[] 返回包含表格中所有单元格的一个数组. 语法:tableObject ...
- html中js添加或删除activex,JS:操作样式表2 :用JS实现添加和删除一个类名的功能(addClass()和removeClass())...
var box = document.getElementById("box"); box.id = "pox"; 将id = "box", ...
- 原生js cookie本地存储
JS cookie 1.概述 cookie也叫HTTP Cookie,最初是客户端与服务器端进行会话(Session)使用的. 如果没写expires,那么下次打开网页,cookie就会消失,这个就是 ...
- js 字符串操作函数有哪些
js 字符串操作函数有哪些 一.总结 一句话总结:js字符串函数都是字符串对象的方法,是通过调用字符串方法的方式调用,和java,php里面不一样. 1.字符串替换函数怎么用? 这里的正则表示是加双引 ...
最新文章
- 厉害了!单点登录系统用 8 张漫画就解释了。。。
- 2021年春季学期-信号与系统-第十二次作业参考答案-第六小题
- python3读取excel数据-python3读取Excel表格数据的代码分享
- java 上传远程图片,java上传图片到另一台服务器上,怎么解决
- Spring Boot中通过Accept-Language头信息设置国际化内容
- 声明式事务、Spring 中常用注解、Ajax
- linux中fopen和open的区别,Linux下open与fopen的区别
- 删除Chrome自动完成功能的输入背景色?
- SQL基础语句汇总-学习
- 华硕B85M-G主板安装心得
- 高校全场景智慧教室建设方案
- 漫画 | 前端发展史的江湖恩怨情仇~
- Linux 普通用户su root 权限的开启和禁止
- 软件测试周刊(第32期):沙漠中藏着一口井
- selenium设置浏览器的大小和位置
- 【智能制造】工信部:《国家智能制造标准体系建设指南(2018年版)》(征求意见稿)
- 克鲁斯卡尔算法(Kruskal)求最小生成树(MST)过程详解
- Amazon S3 Glacier 上线十周年,云端冷存储的十年
- Error:(343, 83) java: 从lambda 表达式引用的本地变量必须是最终变量或实际上的最终变量
- 软件开发常用名词中英文对照