js-cookie的使用

实际上，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()