2.本地存储
2.1本地存储分类- localStorage
1.作用:
可以将数据永久存储在本地(用户的电脑),除非手动删除,否则关闭页面也会存在
2.特性:
●可以多窗口(页面)共享(同一浏览器可以共享)
●以键值对的形式存储使用,键值除了数字型都要加引号
3.语法
存储数据:
localStorage.setltem('key', 'value')
获取数据:
localStorage.getltem('key')
删除数据:
localStorage.removeltem('key')
注意:本地存储只能存储字符串数据类型

2.2本地存储分类- sessionStorage
特性:
●生命周期为关闭浏览器窗口
●在同一个窗口(页面)下数据可以共享
●以键值对的形式存储使用
●用法跟 localStorage基本相同
2.3存储复杂数据类型
本地只能存储字符串,无法存储复杂数据类型.
例如:

显示为object

●解决: 需要将复杂数据类型转换成JSON字符串,再存储到本地
●语法:
JSON.stringify(复杂数据类型)
➢将复杂数据转换成JSON字符串 存储 在本地存储中

●问题:因为本地存储里面取出来的是字符串,不是对象,无法直接使用

●解决:把取出来的字符串转换为对象
●语法:JSON.parse(JSON字符串)
const obj = JSON.parse( localStorage.getItem( 'goods' ))
console.log(obj)
➢将JSON字符串转换成对象 取出 时候使用
【示例】
<body><script>const obj = {uname: 'Kai',age: 18,gender: '女'}// 1. 复杂数据类型存储必须转换为 JSON字符串存储localStorage.setItem('obj', JSON.stringify(obj))// console.log(localStorage.getItem('obj')) //得到的是字符串// 2. 把JSON字符串转换为 对象const str = localStorage.getItem('obj')console.log(JSON.parse(str))</script>
</body>
复杂数据类型转换为JSON得到的是字符串,所以取出时要将JSON字符串转换为对象

2.4数组中map方法迭代数组
●使用场景:
map可以遍历数组处理数据,并且返回新的数组

map也称为映射。映射是个术语,指两个元素的集之间元素相互“对应”的关系。
map重点在于有返回值,forEach没有返回值
2.5数组中join方法
●作用:
join()方法用于把数组中的所有元素转换为一个字符串
●语法:

●参数:
数组元素是通过参数里面指定的分隔符进行分隔的,空字符串(") ,则所有元素之间都没有任何字符。
相关文章:
2.本地存储
2.1本地存储分类- localStorage 1.作用: 可以将数据永久存储在本地(用户的电脑),除非手动删除,否则关闭页面也会存在 2.特性: ●可以多窗口(页面)共享(同一浏览器可以共享) ●以键值对的形式存储使用,键值除了数字型都要加引号 3.语法 存…...
win10远程桌面控制Ubuntu服务器 - 内网穿透实现公网远程
文章目录 前言视频教程1. ubuntu安装XRDP2.局域网测试连接3. Ubuntu安装cpolar内网穿透4.cpolar公网地址测试访问5.固定域名公网地址 转载自cpolar极点云文章:树莓派使用Nginx 搭建轻量级网站远程访问 前言 XRDP是一种开源工具,它允许用户通过Windows R…...
【Git】—— 标签管理
目录 (一)理解标签 1、作用 (二)创建标签 (三)操作标签 1、删除标签 2、推送标签 3、删除远程标签 (一)理解标签 标签 tag ,可以简单的理解为是对某次 commit 的…...
JS_判断打开的是什么手机品牌,判断是否是手机,平板,pc
判断业务是否是 iphone、华为、小米、oppo、view、三星 打开 手机品牌userAgent库 http://www.fynas.com/ua function judgeBrand(sUserAgent) {var isIphone sUserAgent.match(/iphone/i) iphone;var isHuawei sUserAgent.match(/huawei/i) huawei;var isHonor sUserAge…...
HCIA 动态路由协议之RIP协议
一、动态路由协议分类 动态路由协议:RIP OSPF ISIS BGP EBGP EIGRP IGPRP...... 基于AS进行分类: AS-自治系统 0-65535 其中1-64511公有 64512-65535私有 IGP:内部网关路由协议 EGP:外部网关路由 二、IGP协议的分类&#x…...
提供高品质正规话费充值接口,H5链接,稳定高效!
话费充值接口文档 接口版本:1.0 ―、引言 文档概述 本文档提供话费充值接口规范说明,提供一整套的完整的接入示例(http 接口)供商户参 考,可以帮助商户开发人员快速完成接口开发与联调,实现与话费充值系统的交易互联。 公司官网…...
苍穹外卖day12笔记
一、工作台 联系昨天 要实现的功能和昨天差不多,都是查询数据。 所以我们就写出查询语句,然后直接导入已经写好的代码。 实现效果 查询语句 今日数据 营业额 select count(amount) from orders where status5 and order_time > #{begin} and …...
Prometheus技术文档-基本使用-配置文件全解!!!!!
简介: Prometheus是一个开源的系统监控和告警系统,由Google的BorgMon监控系统发展而来。它主要用于监控和度量各种时间序列数据,比如系统性能、网络延迟、应用程序错误等。Prometheus通过采集监控数据并存储在时间序列数据库中,…...
宋浩高等数学笔记(十一)曲线积分与曲面积分
个人认为同济高数乃至数学一中最烧脑的一章。。。重点在于计算方式的掌握,如果理解不了可以暂时不强求,背熟积分公式即可。此外本贴暂时忽略两类曲面积分之间的联系,以及高斯公式的相关内容,日后会尽快更新,争取高效率…...
安卓如何快速定位native内存泄露。
步骤1)cat /proc/pid/status,观察下面俩个指标 RssAnon: 5300 kB //一直增大说明匿名映射的内存增大,malloc本质就是调用匿名映射分 配内存 RssFile: 26884 kB //文件句柄泄露&#…...
redis学习笔记(二)
文章目录 redis数据类型string(字符串)1. 设置键值2. 设置键值的过期时间3. 关于设置保存数据的有效期4. 设置多个键值5. 字符串拼接值6. 根据键获取值7. 自增自减8. 获取字符串的长度9. 比特流操作 redis数据类型 redis可以理解成一个全局的大字典&…...
不侵入代码的rem适配,支持桌面缩放,vue2的适配方案,包含echarts适配
此方式不侵入代码,自动把px单位转换成rem单位 首先安装postcss-pxtorem5.1.1 yarn add postcss-pxtorem5.1.1 npm install postcss-pxtorem5.1.1 --save 项目根目录新建 postcss.config.js module.exports {plugins: {postcss-pxtorem: {rootValue: 14,propList…...
智能合约 -- 常规漏洞分析 + 实例
1.重入攻击 漏洞分析 攻击者利用合约漏洞,通过fallback()或者receive()函数进行函数递归进行无限取钱。 刚才试了一下可以递归10次,貌似就结束了。 直接看代码: 银行合约:有存钱、取钱、查看账户余额等函数。攻击合约: 攻击、以及合约接…...
JavaScript 操作历史记录api怎样使用 JavaScript
JavaScript 操作历史记录api怎样使用 JavaScript History 是 window 对象中的一个 JavaScript 对象,它包含了关于浏览器会话历史的详细信息。你所访问过的 URL 列表将被像堆栈一样存储起来。浏览器上的返回和前进按钮使用的就是 history 的信息。 History 对象包含…...
Spring 容器
提示:英语很重要,单词是读的,是拼出来的,和拼音一样 文章目录 前言前期准备1️⃣ DI 依赖注入1、xml 配置方式2、注解方式 annotation❗相关注解Spring中Bean的作用域❗Scope() 注解Qualifier("XXXServiceImpl") 指定哪…...
【腾讯云Cloud Studio实战训练营】使用React快速构建点餐H5
文章目录 前言一、Cloud Studio是什么二、Cloud Studio特点三、Cloud Studio使用1.访问官网2.账号注册3.模板选择4.模板初始化5.H5开发安装 antd-mobile安装 Less安装 normalize上传项目需要的素材替换App.js主文件项目启动、展示 6.发布仓库 总结 前言 随着云计算产业的发展&…...
Java培训课程哪个品牌好?快拿小本本记好
Java是一门广泛应用于企业级应用程序开发的高级编程语言,具有较高的学习和职业发展价值。但是,在选择Java培训课程时,很多人会遇到一个问题:Java培训课程哪个品牌好?小编经过多方分析和比较,从专业培训的角度…...
leetcode19. 删除链表的倒数第 N 个结点
题目:leetcode19. 删除链表的倒数第 N 个结点 描述: 给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点。 思路: 让前面的节点比后面的节点先走n1步,因为从链表的尾节点的下一个节点开始&…...
c51单片机串行通信示例代码(单片机--单片机通信)(附带proteus线路图)
//这个发送端代码 #include "reg51.h" #include "myheader.h" #define uchar unsigned char long int sleep_i0; long int main_i0; void main() {uchar sendx[6]{2,0,2,3,8,1};sleep(2000);TMOD0x20;TH10XF4;//根据波特率计算公式这里需要设置为这么多才能…...
UML之四种事物
目录 结构事物 行为事物 分组事物: 注释事物 结构事物 1.类(Class) -类是对一组具有相同属性、方法、关系和语义的对象的描述。一个类实现一个或多个接口 2.接口(interface) -接口描述 了一个类或构件的一个服务的操作集。接口仅仅是定义了一组操作的规范&…...
零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?
一、核心优势:专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发,是一款收费低廉但功能全面的Windows NAS工具,主打“无学习成本部署” 。与其他NAS软件相比,其优势在于: 无需硬件改造:将任意W…...
synchronized 学习
学习源: https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖,也要考虑性能问题(场景) 2.常见面试问题: sync出…...
【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06(十亿美元)。漏洞扫描服务市场行业预计将从 2024 年的 3.48(十亿美元)增长到 2032 年的 9.54(十亿美元)。预测期内漏洞扫描服务市场 CAGR(增长率&…...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣(LeetCode) 思路 使用两个栈:一个存储重复次数,一个存储字符串 遍历输入字符串: 数字处理:遇到数字时,累积计算重复次数左括号处理:保存当前状态&a…...
spring:实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例,也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下: 定义实例工厂类(Java代码),定义实例工厂(xml),定义调用实例工厂ÿ…...
【AI学习】三、AI算法中的向量
在人工智能(AI)算法中,向量(Vector)是一种将现实世界中的数据(如图像、文本、音频等)转化为计算机可处理的数值型特征表示的工具。它是连接人类认知(如语义、视觉特征)与…...
多种风格导航菜单 HTML 实现(附源码)
下面我将为您展示 6 种不同风格的导航菜单实现,每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板,就像一个模具,里面可以将不同类型的材料做成一个形状,其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式:templa…...
Python 实现 Web 静态服务器(HTTP 协议)
目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1)下载安装包2)配置环境变量3)安装镜像4)node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1)使用 http-server2)详解 …...
PHP 8.5 即将发布:管道操作符、强力调试
前不久,PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5!作为 PHP 语言的又一次重要迭代,PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是,借助强大的本地开发环境 ServBay&am…...
