Cookie 相关

i小杨

已于 2022-07-13 15:17:26 修改

阅读量202

点赞数 1

分类专栏： npm常用js库文章标签： javascript vue.js 前端

于 2022-07-12 15:21:12 首次发布

本文链接：https://blog.youkuaiyun.com/i_Satan/article/details/125743783

版权

js-cookie Cookie管理前端开发 JavaScript 存储机制

关键词由优快云通过智能技术生成

npm常用js库专栏收录该内容

15 篇文章

订阅专栏

js-cookie 使用

参考文章@我是南柯呀

下载

npm install js-cookie

使用

import Cookies from “js-cookie”;

Cookie 丢失的原因

1、Cookie的Domain设置不正确
2、Cookie超时
3、Cookie中含有一些非法字符，致使浏览器丢弃Cookie
4、程序源码可能有多处重复设置或取消Cookie
5、参考文章@weixin_30892037

优雅使用

封装 js 工具

import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

优雅使用二:

封装 js 工具 ,然后全局挂载

const CookieUtils = {
  getToken() {
    return Cookies.get(TokenKey);
  },
  setToken(token) {
    return Cookies.set(TokenKey, token);
  },
  removeToken() {
    return Cookies.remove(TokenKey);
  },
};

export default CookieUtils

main.js文件中全局挂载:

import CookieUtils from "./js/utils/CookieUtils";
Vue.prototype.CookieUtils = CookieUtils;

原生 js 设置并读取 cookie。

参考文章@Spider_man_

Cookie 以名/值对形式存储
js中可以通过document.cookie属性来创建，读取以及删除cookie

创建cookie

document.cookie="username=John Doe";

可以为cookie添加过期时间（UTC或GMT时间）默认情况下，cookie在浏览器关闭时删除

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

可以使用path参数设置cookie路径，默认情况下cookie属于当前页面

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

读取cookie

var x=document.cookie;

修改cookie

修改cookie类似与创建cookie

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

删除cookie

只需要设置expires参数为以前时间即可，如Thu ，01 jan 1970 00：00:00GMT

document.cookie='username=;expires=Thu,01 Jan 1970 00:00:00 GMT'

如果设置了新的 cookie(名字不一样)，旧的 cookie 不会被覆盖。新 cookie 将添加到 document.cookie 中，所以如果重新读取document.cookie，将获得所有cookie

<script>
function setCookie(cname,cvalue,exdays){
	var d = new Date();
	d.setTime(d.getTime()+(exdays*24*60*60*1000));
	var expires = "expires="+d.toGMTString();
	document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
	var name = cname + "=";
	var ca = document.cookie.split(';');
	for(var i=0; i<ca.length; i++) {
		var c = ca[i].trim();
		if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
	}
	return "";
}
function checkCookie(){
	var user=getCookie("username");
	if (user!=""){
		alert("欢迎 " + user + " 再次访问");
	}
	else {
		user = prompt("请输入你的名字:","");
  		if (user!="" && user!=null){
    		setCookie("username",user,30);
    	}
	}
}
</script>