cookie和深度拷贝的使用
1、js-cookie使用
前端的本地存储分为 localstorage、sesstionstorage、cookie
但是咱们有时候需要做7天免登录的需求时,选择 cookie 作为前端的本地存储是在合适不过的了
直接操作 cookie 可以, document.cookie = xxx, 赋值就可以了, 但是我在这给大家介绍一个很小的操作 cookie 的工具 js-cookie
js-cookie 现在主流的框架 vue、react 都可以使用
- 安装js-cookie
javascript
// yarn
yarn add js-cookie
// npm
npm i js-cookie
- 组件中引入,vue2 用到的地方比较多,也可以挂载在vue实例上 vue.prototype.$xxx = xxx
javascript
// 在使用的组件中
import Cookie from "js-cookie"
- js-cookie 存取值
javascript
// js-cookie 存值
Cookie.set('key', "存进cookie的值")
// js-cookie 取值
Cookie.get('key')
// js-cookie 删值
Cookie.remove("key")
注意:cookie 和 local、sesion 一样,存字符串
- js-cookie 设置过期时间
javascript
// js-cookie 默认 expires 的值 为 天
Cookie.set('key', 'value', { expires: 7 }) // 表示 7 天过期
// 想要 3个小时过期,可以使用时间戳
const time = new Date( new Date() + 1000 * 60 * 60 * 3 ) // 表示 3 个小时过期(时间戳表示)
Cookie.set('key', 'value', { expires: time })
时间转换关系
- 查看 cookie 值 和过期时间
东八区:往前推了 8 个小时,上图显示的时间加上 8 个小时和当前的时间做对比就可以得到 cookie 的过期时间多长
2、js深度克隆
js做一些引用类型的数据的时候需要用到深拷贝
javascript
export function deepClone(value) {
// 非原始值有两种
// 1、数组的克隆
if(Object.prototype.toString.call(value) === '[object Array]') {
let clone = [];
for(let i=0;i<value.length;i++) {
clone[i] = deepClone(value[i]);
}
return clone
}
// 2、对象的克隆
if(Object.prototype.toString.call(value) === '[object Object]') {
let clone = {}
for(let key in value) {
clone[key] = deepClone(value[key])
}
return clone
}
return value; // 返回原始值
}