前端JS必用工具【js-tool-big-box】,获取浏览器参数、cookie、localStorage的存取

这一小节,我们针对js-tool-big-box工具做一些使用讲解,主要获取浏览器参数、cookie、localStorage的存取方面的。

这些方法差不多每次项目中要么用不到,要么就自己写一份,轮子造的很重复啊,而且localStorage有时候要求设定过期时间,工具中也做了对应的开发。

工具中对外暴露了storeBox对象,可以供大家使用。

目录

1 安装,引入

2 获取浏览器url中,问号后面的参数值

3 cookie的操作 

3.1 设置cookie

3.2 获取cookie值 

3.3 删除cookie 

4 localStorage 的操作

4.1 设置localStorage

4.2 获取 localStorage的某个值


1 安装,引入

执行以下命令进行安装

npm i js-tool-big-box

业务代码中引入对应的使用对象

import { storeBox } from 'js-tool-big-box';

2 获取浏览器url中,问号后面的参数值

例如我们项目中的url链接,带有问号,问号后面拼了很多参数,如

http://localhost:8080/#/404?type=text&go2=232323&q=my2521

这种,使用示例如下:

const param = storeBox.getUrlParam('q');console.log('获取到q的参数为:::', param);

使用方法: 

方法名返回值入参
getUrlParam对应的参数值,如果未找到返回undefined入参为参数的key值,必填

3 cookie的操作 

3.1 设置cookie

设置cookie包括,设置key值,设置value值,设置过期时间,设置domain值,和设置path值

使用示例如下:

storeBox.setCookie('school', '我的中学', 1000*10);storeBox.setCookie('name', 'zhangsan');

 

 使用方法: 

方法名返回值入参

setCookie

第一个参数必填,表示需要设置的key值;

第二个参数必填,表示需要设置的value值;

第三个参数非必填,表示需要设置cookie的过期时间,设置的毫秒数,如1000*60,表示1分钟;

第四个参数非必填,表示需要设置的domain;

第五个参数非必填,表示需要设置的path;

3.2 获取cookie值 

已经存过cookie了,如果需要获取,可以执行这个方法,示例代码如下:

const myCookie1 = storeBox.getCookie('school');console.log('我设置过的school是::', myCookie1);

  使用方法: 

方法名返回值入参

getCookie

对应的value值,获取不到则返回undefined或空

第一个参数必填,表示需要匹配获取的key值;

3.3 删除cookie 

比如退出登录的时候,就需要删除用户名或者其他登录信息的cookie信息,这个时候就会用到这个方法了,示例代码如下:

storeBox.deleteCookie('name');const myNmaeCookie = storeBox.getCookie('name');console.log('我已把name这个cookie删了::', myNmaeCookie);

 

 使用方法:  

方法名返回值入参

deleteCookie

第一个参数必填,表示需要删除匹配获取的key值;

4 localStorage 的操作

4.1 设置localStorage

因为localStorage存储的信息是永久有效的,所以很多时候需要设置过期时间,示例代码如下:

storeBox.setLocalstorage('today', '星期一', 1000*6);

 

使用方法:  

方法名返回值入参

setLocalstorage

第一个参数必填,表示需要设置的key值;

第二个参数必填,表示需要设置的value值;

第三个参数非必填,表示如果需要设置过期时间的话,设置的过期时间,传入的是毫秒值,比如1000*60表示过期时间是1分钟

4.2 获取 localStorage的某个值

获取localStorage的时候,上一步的截图中发现,localStorage中存入了 isExpires 这个属性,如果为true,表示之前存入的时候添加了过期时间,那么在获取的时候,会根据当前时间匹配是否已过期,如果过期则删除对应localStorage的设置。如果isExpires 是为false,表示之前并未设置过期时间,这是永久有效的。

示例代码如下:

const today = storeBox.getLocalstorage('today');console.log('6秒后获取的值===', today);

6秒后:

使用方法:  

方法名返回值入参

getLocalstorage

对应存入的值 或 null

第一个参数必填,表示需要获取的key值;

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/2979365.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Docker Compose 的安装和使用详解

Docker Compose 是 Docker 官方开源的容器编排(Orchestration)项目之一,用于快速部署分布式应用。本文将介绍 Docker Compose 的基本概念、安装流程及使用方法。 简介 Compose 项目是 Docker 官方的开源项目,负责实现对 Docker 容器集群的快速编排。从功能上看,Docker C…

利用观测云打造企业级的统一日志中心

前言 在数字化转型时代,现代的大规模应用程序每天可以生成数以亿计的日志数据。它是企业运营和管理中的宝贵资产,记录了系统、应用和设备的各种活动和事件。通过分析日志数据,企业可以深入了解业务运行情况、识别潜在问题和优化机会&#xf…

indexDB 大图缓存

背景 最近在项目中遇到了一个问题:由于大屏背景图加载速度过慢,导致页面黑屏时间过长,影响了用户的体验。从下图可以看出加载耗时将近一分钟 IndexDB 主要的想法就是利用indexDB去做缓存,优化加载速度;在这之前&am…

云架构(五)BBF模式

BFF模式(Backends for Frontends pattern)- https://learn.microsoft.com/en-us/azure/architecture/patterns/backends-for-frontends。 创建单独的后台服务用以提供给特定的前端或者接口。当你希望避免为多个接口定制单独的后台时,此模…

​「Python绘图」绘制皮卡丘

python 绘制皮卡丘 一、预期结果 二、核心代码 import turtle print("开始绘制皮卡丘") def getPosition(x, y):turtle.setx(x)turtle.sety(y)print(x, y)class Pikachu:def __init__(self):self.t turtle.Turtle()t self.tt.pensize(3)t.speed(190)t.ondrag(getP…

Matlab分段微分方程组拟合【案例源码+视频教程】

专栏导读 作者简介:工学博士,高级工程师,专注于工业软件算法研究本文已收录于专栏:《复杂函数拟合案例分享》本专栏旨在提供 1.以案例的形式讲解各类复杂函数拟合的程序实现方法,并提供所有案例完整源码;2.…

复习python函数

复习python函数 1.对函数的理解函数的传递方式返回值 return可通过help()函数查看函数说明作用域 2.不定长参数3.递归4.高阶函数将函数作为参数传递将函数作为返回值返回 5.匿名函数6.装饰器 1.对函数的理解 函数可以用来保存一些可执行的代码,并且可以在需要时&am…

电子邮件格式怎么写?企业邮件格式正确的写法

电子邮件的写法,跟我们写书信差不多,也有标准格式和写法。电子邮件格式怎么写?电子邮件的完整内容包含:收件人、抄送(可选)、密送(可选)、主题、正文、附件(可选&#xf…

通过使用XShell工具、Nginx环境实现服务器项目构建与发布

前言: 在信息化和数字化的今天,网站和应用的构建与发布已成为企业发展的重要一环。为了确保项目的顺利上线和稳定运行,选择合适的工具和环境至关重要。本文将详细介绍如何通过XShell工具以及Nginx环境来实现服务器项目的构建与发布&#xff0…

likede 表记录

order微服务 tb_order 表负责记录当前的订单信息 tb_order_collect 表记录当前点位的营收情况 由XXL-JOB通过es进行统计 tb_order_month_collect 表记录一个月供应商的收支情况 通过tb_order_collect 进行统计 production微服务 tb_job 补货警戒值的设置 (目前来…

使用CSS3 + Vue3 + js-tool-big-box工具,实现炫酷五一倒计时动效

时间过得真是飞速,很快又要到一年一度的五一劳动节啦,今年五天假,做好准备了吗?今天我们用CSS3 Vue3 一个前端工具库 js-tool-big-box来实现一个炫酷的五一倒计时动效吧。 目录 1 先制作一个CSS3样式 2 Vue3功能提前准备 3…

数值分析复习:Richardson外推和Romberg算法

文章目录 Richardson外推Romberg(龙贝格)算法 本篇文章适合个人复习翻阅,不建议新手入门使用 本专栏:数值分析复习 的前置知识主要有:数学分析、高等代数、泛函分析 本节继续考虑数值积分问题 Richardson外推 命题&a…

使用Gitee进行社交登录的流程

使用Gitee进行社交登录 创建Gitee第三方应用流程: 鼠标移动到个人头像上,点击账号设置 点击账号设置,选择左边目录下数据管理的第三方应用 然后选择创建应用 根据要求填写 填写好了上面的要求之后,点击创建应用,这样&…

多项式和Bezier曲线拟合

目录 1. 多项式拟合2. Bezier曲线拟合3. 源码地址 1. 多项式拟合 在曲线拟合中,多项式拟合方法的性能受到三个主要因素的影响:采样点个数、多项式阶数和正则项。 采样点个数 N N N:从Figure 1中可以看出较少的采样点个数可能导致过拟合&…

【Linux】解决ubuntu20.04版本插入无线网卡没有wifi显示【无线网卡Realtek 8811cu】

ubuntu为Realtek 8811cu安装驱动,解决wifi连接问题 1、确认无线网卡的型号-Realtek 8810cu2、下载并配置驱动 一句话总结:先确定网卡的型号,然后根据网卡的型号区寻找对应的驱动下载,下载完成之后在ubuntu系统中进行编译&#xff…

RBA认证是什么?RBA认证的流程是怎么样的

RBA认证,即“责任商业联盟”认证,英文全称是Responsible Business Alliance。这是一个为电子行业或以电子为主要组成部分的行业及其供应链制定的社会责任审核标准。该标准旨在确保工作环境的安全、工人受到尊重并富有尊严、商业营运合乎环保性质并遵守道…

python 对图片进行操作

Pillow是一个强大的图像处理库,它提供了许多用于打开、操作和保存图像的功能。 Image模块: Image模块提供了用于打开、创建、编辑和保存图像的基本功能。可以使用Image.open()函数来打开图像文件,或者使用Image.new()函数来创建新的图像,还可…

用Python将原始边列表转换为邻接矩阵

👽发现宝藏 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 在图论和网络分析中,图是一种非常重要的数据结构,它由节点&#xff…

MATLAB中normxcorr2函数的用法(模板匹配和对象识别)

normxcorr2 是 MATLAB 中的一个函数,用于计算两个矩阵的归一化互相关。这个函数在图像处理和计算机视觉中特别有用,尤其是在模板匹配和对象识别方面。 函数签名 在 MATLAB 中,normxcorr2 函数的基本调用形式如下: C normxcorr…