当前位置: 首页 > 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;  // 返回原始值
}

相关文章:

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

cookie和深度拷贝的使用 1、js-cookie使用2、js深度克隆 1、js-cookie使用 前端的本地存储分为 localstorage、sesstionstorage、cookie 但是咱们有时候需要做7天免登录的需求时&#xff0c;选择 cookie 作为前端的本地存储是在合适不过的了 直接操作 cookie 可以&#xff0c; …...

[Pytorch]语义分割任务分类的实现

文章目录 [Pytorch]语义分割任务分类的实现 [Pytorch]语义分割任务分类的实现 假如我们定义了一个网络用于语义分割任务&#xff0c;这个网络简称为model() 语义分割任务要做的是&#xff1a; 对于一个图片输入input&#xff0c;大小为&#xff08;B&#xff0c;C&#xff0c…...

测试网页调用本地可执行程序(续:带参数调用)

前篇文章介绍了网页调用本地可执行程序的方式&#xff0c;通过在注册表中注册命令&#xff0c;然后在网页中调用命令启动本地程序。如果需要传递参数&#xff0c;则需要在注册表命令中的command项中设置如下形式的值。 "XXXXXX\XXXXXXX.exe" "%1"&emsp…...

Carla自动驾驶模拟器安装和使用

Carla自动驾驶模拟器安装和使用 1 安装 ubuntu20.04安装carla0.9.11版本 步骤1&#xff1a;打开下面链接&#xff0c;点击第一个[Ubuntu] CARLA_0.9.11.tar.gz carla-0.9.11源码下载 步骤2&#xff1a;下载完解压到/opt目录下 我的话是先在下载目录上提取解压&#xff0c;然…...

【每日一题】1539. 第 k 个缺失的正整数

1539. 第 k 个缺失的正整数 - 力扣&#xff08;LeetCode&#xff09; 给你一个 严格升序排列 的正整数数组 arr 和一个整数 k 。 请你找到这个数组里第 k 个缺失的正整数。 示例 1&#xff1a; 输入&#xff1a;arr [2,3,4,7,11], k 5 输出&#xff1a;9 解释&#xff1a;缺失…...

AI-Chat,一款集全网ai功能的应用(附下载链接)

AI-Chat是一款综合性的聊天机器人&#xff0c;集成了多种先进的模型和功能。它采用了GPT4.0、联网版GPT和清华模型等多种模型&#xff0c;使得其具备更强大的语言处理能力。同时&#xff0c;AI-Chat还融合了AI绘画模型&#xff0c;例如Stable Diffusion绘画、文生图、图生图、艺…...

3、靶场——Pinkys-Place v3(3)

文章目录 一、获取flag41.1 关于SUID提权1.2 通过端口转发获取setuid文件1.3 运行pinksecd文件1.4 利用nm对文件进行分析1.5 构建payload1.6 Fire 二、获取flag52.1 生成ssh公钥2.2 免密登录ssh2.3 以pinksecmanagement的身份进行信息收集2.4 测试程序/usr/local/bin/PSMCCLI2.…...

什么是 AirServer?Mac专用投屏工具AirServer 7 .27 for Mac中文破解版百度网盘下载

AirServer 7 .27 for Mac中文免费激活版是一款Mac专用投屏工具&#xff0c;能够通过本地网络将音频、照片、视频以及支持AirPlay功能的第三方App&#xff0c;从 iOS 设备无线传送到 Mac 电脑的屏幕上&#xff0c;把Mac变成一个AirPlay终端的实用工具。 目前最新的AirServer 7.2…...

MapStruct介绍以及VO、DTO、PO、DO的区别

文章目录 一.基本概念1.1VO**&#xff08;Value Object&#xff09;值对象**1.2DTO**&#xff08;Data Transfer Object&#xff09;数据传输对象**1.3 PO**&#xff08;Persistant Object&#xff09;持久对象**等同于Entity&#xff0c;这俩概念是一致的 或DO1.4 **BO&#x…...

记一次hyperf框架封装swoole自定义进程

背景 公司准备引入swoole和rabbitmq来处理公司业务。因此&#xff0c;我引入hyperf框架&#xff0c;想用swoole的多进程来实现。 自定义启动服务封装 <?php /*** 进程启动服务【manager】*/ declare(strict_types1);namespace App\Command;use Swoole; use Swoole\Proce…...

多输入多输出 | MATLAB实现GA-BP遗传算法优化BP神经网络多输入多输出

多输入多输出 | MATLAB实现GA-BP遗传算法优化BP神经网络多输入多输出 目录 多输入多输出 | MATLAB实现GA-BP遗传算法优化BP神经网络多输入多输出预测效果基本介绍程序设计往期精彩参考资料 预测效果 基本介绍 多输入多输出 | MATLAB实现GA-BP遗传算法优化BP神经网络多输入多输出…...

李宏毅机器学习笔记-transformer

transformer是什么呢&#xff1f;是一个seq2seq的model。具体应用如上图所示&#xff0c;输入和输出的序列长度不固定&#xff0c;由model自己决定。 语音翻译指的是&#xff0c;直接输入一段语音信号&#xff0c;例如英文&#xff0c;输出的直接是翻译之后的中文。 seq2seq如…...

基于Java的酒店管理系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…...

Go语言的单元测试与基准测试详解

文章目录 单元测试基准测试 单元测试 以一个加法函数为例&#xff0c;对其进行单元测试。 首先编写add.go文件&#xff1a; //add.go package mainfunc add(a, b int) int {return a b }其次编写add_test.go文件&#xff0c;在go语言中&#xff0c;测试文件均已_test结尾&a…...

【多态】为什么析构函数的名称统一处理为destructor?

析构函数的名称统一处理为destructor的目的是为了解决析构函数的重写。 而这又引出了一个问题&#xff1a;为什么要进行析构函数的重写&#xff1f; 是为了下面这种情况&#xff1a; class Person { public:~Person() { cout << "~Person" << endl; } }…...

6.4 Case Studies - A Simple Logging Archive Class

下面这段内容介绍了一个示例&#xff0c;目的是帮助澄清"归档概念&#xff08;Archive Concept&#xff09;"的用法&#xff0c;以便用户可以实现自己的归档类。simple_log_archive.hpp 实现了一个简单但实用的归档类&#xff0c;用于将任何可序列化类型以可读的格式…...

【深度学习实验】前馈神经网络(九):整合训练、评估、预测过程(Runner)

目录 一、实验介绍 二、实验环境 1. 配置虚拟环境 2. 库版本介绍 三、实验内容 0. 导入必要的工具包 1. __init__(初始化) 2. train(训练) 3. evaluate(评估) 4. predict(预测) 5. save_model 6. load_model 7. 代码整合 一、实验介绍 二、实验环境 本系列实验使用…...

002-第一代硬件系统架构确立及产品选型

第一代硬件系统架构确立及产品选型 文章目录 第一代硬件系统架构确立及产品选型项目介绍摘要硬件架构硬件结构选型及设计单片机选型上位机选型扯点别的 关键字&#xff1a; Qt、 Qml、 信号采集机、 数据处理、 上位机 项目介绍 欢迎来到我们的 QML & C 项目&#xff…...

Go基础语法:指针和make和new

8 指针、make、new 8.1 指针&#xff08;pointer&#xff09; Go 语言中没有指针操作&#xff0c;只需要记住两个符号即可&#xff1a; & 取内存地址* 根据地址取值 package mainimport "fmt"func main() {a : 18// 获取 a 的地址值并复制给 pp : &a// …...

039_小驰私房菜_Camera perfermance debug

全网最具价值的Android Camera开发学习系列资料~ 作者:8年Android Camera开发,从Camera app一直做到Hal和驱动~ 欢迎订阅,相信能扩展你的知识面,提升个人能力~ 一、抓取trace 1. adb shell "echo vendor.debug.trace.perf=1 >> /system/build.prop" 2. …...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...