实际上,cookie本身并不是用来做服务器存储的,关于jscookie存储的理解,可以参考我记录的js的数据存储专栏。
Cookie 是一些数据, 存储于客户端电脑上的文本文件中,其中记录了用户的用户名、密码、浏览的网页、停留的时间等等信息。当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。
简单的说就是:
- (1) cookie是以小的文本文件形式(即纯文本),完全存在于客户端;cookie保存了登录的凭证,有了它,只需要在下次请求时带着cookie发送,就不必再重新输入用户名、密码等重新登录了。
- (2) 是设计用来在服务端和客户端进行信息传递的;
- 当用户访问 web 页面时,他的名字可以记录在 cookie 中。
- 在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。
js-cookie的引用
1.直接饮用cdn: <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script> 2.本地下载下来后: <script src="/src/libs/utils/js.cookie.js"></script> 3.模块化开发时: npm i js-cookie import Cookies from 'js-cookie'
cookie的使用
cookie的使用方法
cookie的set方法支持的属性有 :
- expires->过期时间
- path->设置为指定页面创建cookie
import Cookies from 'js-cookie' // 写入cookie Cookies.set('name', 'value') // 读取 Cookies.get('name') // => 'value' // 读取所有可见的cookie Cookies.get() // 删除某项cookie值 Cookies.remove('name') Cookies.remove('name', { path: '' }); // path配置删除存了指定页面path的cookie 注意:如果存的是对象 如: userInfo = {age:111,score:90}; Cookie.set('userInfo',userInfo) 取出来的userInfo需要进行JSON的解析,解析为对象: let res = JSON.parse( Cookie.get('userInfo') ); 当然你也可以使用:Cookie.getJSON('userInfo');
真实业务中封装一个js文件,单独封装一个cookie存储删除的方法js,在其它页面可以直接引用,这样代码维护行会比较高
export const TOKEN_KEY = 'pk_h5_token'
export const APPTOKEN_KEY = 'pk_h5_apptoken'
export const REFERURL_KEY = "pk_h5_url"
export const setToken = (token) => {
Cookies.set(TOKEN_KEY, token, {
expires: cookieExpires || 1
})
}
export const getToken = () => {
const token = Cookies.get(TOKEN_KEY)
if (token) return token
else return false
}
export const removeToken = () => {
Cookies.remove(TOKEN_KEY)
}
cookie的过期时间
js-cookie 的示例中只有以天为单位的有效期,按天数设置过期时间的话,直接在expires后设置天数日期即可,实际上我们还可以设置时间戳来应对更小的过期时间,如果过期时间小于一天的话,expires还可以设置毫秒数,比如设置10分钟,就先把10分钟换算成毫秒,在new Date()一下就可以可以获取到一个时间对象
new Date(new Date().getTime() + 10 * 1000) // 10秒后过期
new Date(new Date().*1 + 10 * 60 * 1000) // 10分钟后过期
new Date(new Date().getTime() + 720 * 60 * 1000) // 12个小时之后过期,这里获取到的就是距离当前时间的12个小时之后的时间
//创建有效期为27天的cookie
Cookies.set('key', 'value', { expires: 27 });
//可以通过配置path,为当前页创建有效期7天的cookie
Cookies.set('key', 'value', { expires: 7, path: '' });
业余知识普及记录一下,以下方法皆可以获取最新时间戳,Date()对象 *1或者运用+符号可以直接转换为(时间戳),并且在将数学运算符应用于该对象时,JavaScript会为我们转换该数字,获取时间戳的更快方法+new Date();
new Date().valueOf()
new Date().getTime()
Date.parse(new Date())
new Date() * 1
+new Date()