前端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://www.mfbz.cn/a/567398.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

牛客网:环形链表的约瑟夫问题

🎁个人主页:我们的五年 🔍系列专栏:每日一练 🌷追光的人,终会万丈光芒 目录 🏝1.问题描述: 🏝2.实现代码: 🏝1.问题描述: 前言&am…

windows系统CUDA的详细安装教程

CUDA系列 文章目录 CUDA系列前言一、CUDA简介二、安装配置视频教程三、CUDA的下载及安装3.1 环境检查3.2 CUDA 安装包下载3.3 安装CUDA(略)3.4 验证CUDA是否安装成功 四、cuDNN的下载及安装4.1 cuDNN下载4.2 cuDNN配置 五、配置环境变量六、下载并配置zl…

springboot 集成 i18n实现国际化信息返回 实现中英文切换 实现网站支持多语言切换

还是直接上代码 目前实现了 中英文 返回 别的语言 都差不多 主要用spring boot 自带的 类实现的 不用引入任何 依赖 使用的就是下面的类 org.springframework.context.MessageSource 是 Spring Framework 中用于支持国际化(Internationalization,简称 i…

把 WordPress 变成 BaaS 服务:API 调用指南

有了前面两篇内容的铺垫,我们来聊聊 WordPress 作为 CMS / BaaS 服务使用时绕不开的问题,API 调用。 这篇内容同样的,会尽量少贴代码,简单的讲清楚一件事,降低阅读负担。 写在前面 首先,我们需要进行清晰…

使用autocannon和0x对网站进行性能分析(node)

npm i autocannon -g autocannon -c 100 -d 5 -p 10 http://localhost:3000/ 0x -o app.js 火焰图是根据程序的栈的状态对出现函数的采样数据统计而得,宽度代表函数运行一次所需的时长、高度代表栈的层数、颜色深度代表函数在采样中出现的频率,因此宽度…

手摸手教你把Ingress Nginx集成进Skywalking

背景 在微服务大行其道的今天,如何观测众多微服务、快速理清服务间的依赖、如何对服务之间的调用性能进行衡量,成了摆在大家面前的难题。对此,Skywalking应运而生,它是托管在 Apache 基金会下的开源项目,旨在帮助开发…

vue element-ui 表格横向滚动条在合计项下方

目前效果 需求效果 1.隐藏bodyWrapper滚动条,显示footerWrapper滚动条 css代码如下: div ::v-deep .el-table--scrollable-x .el-table__body-wrapper{overflow-x: hidden!important;z-index: 2!important;} div ::v-deep .el-table__footer-wrapper …

git的安装与配置教程--超详细版

一、git的安装 1. 官网下载git git官网地址:https://git-scm.com/download/win/ 选择需要的版本进行下载 2、下载完成之后,双击下载好的exe文件进行安装。 3、默认是C盘,推荐修改一下路径,然后点击下一步 4、Git配置&#xff…

电子邮箱是什么?电子邮箱怎么申请注册?

虽然通过电子邮箱收发邮件办公已经成为常态,但是很多人不清楚电子邮箱是什么?电子邮箱是指通过网络传递的“邮局”,可以用来收发电子邮件。每个人的电子邮箱地址都是唯一的,确保他人的邮件能准确送到我们的电子邮箱之中。电子邮箱…

CRMEB pro版/多门店商城系统客服配置教程

客服功能配置介绍 功能提示: Pro v2.0系统采用swoole框架,客服不需要单独配置,按照正常安装流程配置好程序即可使用! 如出现客服无法使用,请检查: 1.消息队列是否正常 2.重启swoole 一、功能介绍 CRMEB商城…

刷课必备!用Python实现网上自动做题

前言 开学少不了老师会布置一些 软件上面的作业,今天教大家用python制作自动答题脚本,100%准确率哦喜欢的同学记得关注、收藏哦 环境使用 Python3.8Pycharm 模块使用 import requests —> 数据请求模块 pip install requestsimport parsel —>…

GPU 之争:训练大模型的显卡规格大比拼

训练大模型有多烧钱?(含常用GPU规格比较) 训练大模型有多烧钱? 解锁大型语言模型的运行秘诀大型语言模型 (LLM) 对硬件要求很高,其中显卡内存至关重要。Meta 的 LLaMA 2 模型提供了规模不等的选项:* 70B 模…

C++/Qt 小知识记录5

工作中遇到的一些小问题,总结的小知识记录:C/Qt 小知识5 Windows下查看端口占用情况C调用Python三方库测试库有没有被加上的测试方法初始化使用Python的env环境,用Py_SetPythonHome设置GDAL相关的,需要把osgeo、rasterio的路径加入…

js some对比forEach

some&#xff1a;return true可以停止循环 forEach&#xff1a;return true无法停止循环 <!DOCTYPE html> <html ng-app"my_app"><head><script type"text/javascript">const array [10, 20, 30];const targetValue 10;// 检测…

分析 MyBatis/MyBatis-Plus 慢 SQL 的分析组件 --SQL 慢镜️‍♀️

大家好&#xff01;我是聪ζ&#x1f331;我做了一个分析 MyBatis/MyBatis-Plus 慢 SQL 的分析组件 --SQL 慢镜&#x1f575;️‍♀️ GitHub仓库地址&#x1f680;: https://github.com/lhccong/sql-slow-mirror 点点 star 我的朋友们✨ 背景&#x1f9ca;&#xff1a; 大家…

yolov8 区域声光报警+计数

yolov8 区域报警计数 1. 基础2. 报警功能2. 1声音报警代码2. 2画面显示报警代码 3. 完整代码4. 源码 1. 基础 本项目是在 yolov8 区域多类别计数 的基础上实现的&#xff0c;具体区域计数原理可见上边文章 2. 报警功能 设置一个区域region_points&#xff0c;当行人这一类别…

SpringBoot整合Swagger2

SpringBoot整合Swagger2 1.什么是Swagger2&#xff1f;&#xff08;应用场景&#xff09;2.项目中如何使用2.1 导入依赖2.2 编写配置类2.3 注解使用2.3.1 controller注解&#xff1a;2.3.2 方法注解2.3.3 实体类注解2.3.4 方法返回值注解2.3.5 忽略的方法 3.UI界面 1.什么是Swa…

FPGA组合逻辑电路设计之译码器

在数字电路中可以根据电路功能的不同分为&#xff0c;组合逻辑电路与时序逻辑电路。组合逻辑 电路在逻辑功能上的特点是任意时刻的输出仅仅取决于该时刻的输入&#xff0c;与电路原来的状态无 关。而时序逻辑从电路特征上看来&#xff0c;其特点为任意时刻的输出不仅取决于该…

全网人气排行第一的免费开源ERP:Odoo电商功能应用亮点介绍

Odoo E-Commerce是一款创新型电子商务管理系统&#xff0c;旨在帮助企业建立以客户为中心的B2B与B2C电子商务平台&#xff0c;提高电商业务敏捷性&#xff0c;保障利润&#xff0c;并确保客户体验战略与时俱进。 —— 开源智造Odoo老杨 什么是Odoo免费开源电商管理系统&#xf…

Vue3引入高德地图js API 2.0

文章目录 前言一、地图加载1.本文准备环境2.引入库3.加载地图4.加载地图控件 二、POI搜索1.什么是poi搜索2.如何使用 三、绘制点标记与信息窗体1.场景描述2.案例3.信息窗体-链接路由跳转4.进阶-通过Marker自动触发标记点&#xff08;非鼠标手动点击&#xff09; 四、jsApi地图事…