当前位置: 首页 > news >正文

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

cookie和深度拷贝的使用

    • 1、js-cookie使用
    • 2、js深度克隆

1、js-cookie使用

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

直接操作 cookie 可以, document.cookie = xxx, 赋值就可以了, 但是我在这给大家介绍一个很小的操作 cookie 的工具  js-cookie
js-cookie 现在主流的框架  vue、react 都可以使用
  1. 安装js-cookie
// yarn
yarn add js-cookie 
// npm
npm i js-cookie
  1. 组件中引入,vue2 用到的地方比较多,也可以挂载在vue实例上 vue.prototype.$xxx = xxx
// 在使用的组件中
import Cookie from "js-cookie"
  1. js-cookie 存取值
// js-cookie 存值
Cookie.set('key', "存进cookie的值")// js-cookie 取值
Cookie.get('key')// js-cookie 删值
Cookie.remove("key")

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

  1. js-cookie 设置过期时间
// 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做一些引用类型的数据的时候需要用到深拷贝


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;  // 返回原始值
}
http://www.lryc.cn/news/173796.html

相关文章:

  • [Pytorch]语义分割任务分类的实现
  • 测试网页调用本地可执行程序(续:带参数调用)
  • Carla自动驾驶模拟器安装和使用
  • 【每日一题】1539. 第 k 个缺失的正整数
  • AI-Chat,一款集全网ai功能的应用(附下载链接)
  • 3、靶场——Pinkys-Place v3(3)
  • 什么是 AirServer?Mac专用投屏工具AirServer 7 .27 for Mac中文破解版百度网盘下载
  • MapStruct介绍以及VO、DTO、PO、DO的区别
  • 记一次hyperf框架封装swoole自定义进程
  • 多输入多输出 | MATLAB实现GA-BP遗传算法优化BP神经网络多输入多输出
  • 李宏毅机器学习笔记-transformer
  • 基于Java的酒店管理系统
  • Go语言的单元测试与基准测试详解
  • 【多态】为什么析构函数的名称统一处理为destructor?
  • 6.4 Case Studies - A Simple Logging Archive Class
  • 【深度学习实验】前馈神经网络(九):整合训练、评估、预测过程(Runner)
  • 002-第一代硬件系统架构确立及产品选型
  • Go基础语法:指针和make和new
  • 039_小驰私房菜_Camera perfermance debug
  • Caché for Windows安装及配置
  • 代码随想录算法训练营20期|第四十六天|动态规划part08|● 139.单词拆分 ● 关于多重背包,你该了解这些! ● 背包问题总结篇!
  • 系统安装(一)CentOS 7 本地安装
  • obsidian使用指南
  • 【ardunio】青少年机器人四级实操代码(2023年9月)
  • MYSQL的存储过程
  • [kubernetes/docker] failed to resolve reference ...:latest: not found
  • 彻底解决win11系统0x80070032
  • 解决因为修改SELINUX配置文件出错导致Faild to load SELinux poilcy无法进入CentOS7系统的问题
  • flask中的跨域处理-方法二不使用第三方库
  • 矿山定位系统-矿井人员定位系统在矿山自动化安全监控过程中的应用