js-cookie使用 js深度克隆(判断引用类型是数组还是对象的方法)

cookie和深度拷贝的使用

1、js-cookie使用

前端的本地存储分为 localstorage、sesstionstorage、cookie

但是咱们有时候需要做7天免登录的需求时,选择 cookie 作为前端的本地存储是在合适不过的了

复制代码
直接操作 cookie 可以, document.cookie = xxx, 赋值就可以了, 但是我在这给大家介绍一个很小的操作 cookie 的工具  js-cookie

js-cookie 现在主流的框架  vue、react 都可以使用
  1. 安装js-cookie
javascript 复制代码
// yarn
yarn add js-cookie 
// npm
npm i js-cookie
  1. 组件中引入,vue2 用到的地方比较多,也可以挂载在vue实例上 vue.prototype.$xxx = xxx
javascript 复制代码
// 在使用的组件中
import Cookie from "js-cookie"
  1. js-cookie 存取值
javascript 复制代码
// js-cookie 存值
Cookie.set('key', "存进cookie的值")

// js-cookie 取值
Cookie.get('key')

// js-cookie 删值
Cookie.remove("key")

注意:cookie 和 local、sesion 一样,存字符串

  1. 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 })

时间转换关系

  1. 查看 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;  // 返回原始值
}
相关推荐
whoarethenext5 分钟前
使用 C++/Faiss 加速海量 MFCC 特征的相似性搜索
开发语言·c++·faiss
项目題供诗10 分钟前
黑马python(二十五)
开发语言·python
Mintopia21 分钟前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖25 分钟前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia31 分钟前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
MrSkye39 分钟前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
爱学习的茄子1 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
醇醛酸醚酮酯1 小时前
Qt项目锻炼——TODO清单(二)
开发语言·数据库·qt
jioulongzi1 小时前
记录一次莫名奇妙的跨域502(badgateway)错误
开发语言·python
zhanshuo1 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html