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

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.作用: 可以将数据永久存储在本地(用户的电脑)&#xff0c;除非手动删除&#xff0c;否则关闭页面也会存在 2.特性: ●可以多窗口(页面)共享(同一浏览器可以共享) ●以键值对的形式存储使用&#xff0c;键值除了数字型都要加引号 3.语法 存…...

win10远程桌面控制Ubuntu服务器 - 内网穿透实现公网远程

文章目录 前言视频教程1. ubuntu安装XRDP2.局域网测试连接3. Ubuntu安装cpolar内网穿透4.cpolar公网地址测试访问5.固定域名公网地址 转载自cpolar极点云文章&#xff1a;树莓派使用Nginx 搭建轻量级网站远程访问 前言 XRDP是一种开源工具&#xff0c;它允许用户通过Windows R…...

【Git】—— 标签管理

目录 &#xff08;一&#xff09;理解标签 1、作用 &#xff08;二&#xff09;创建标签 &#xff08;三&#xff09;操作标签 1、删除标签 2、推送标签 3、删除远程标签 &#xff08;一&#xff09;理解标签 标签 tag &#xff0c;可以简单的理解为是对某次 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协议

一、动态路由协议分类 动态路由协议&#xff1a;RIP OSPF ISIS BGP EBGP EIGRP IGPRP...... 基于AS进行分类&#xff1a; AS-自治系统 0-65535 其中1-64511公有 64512-65535私有 IGP&#xff1a;内部网关路由协议 EGP&#xff1a;外部网关路由 二、IGP协议的分类&#x…...

提供高品质正规话费充值接口,H5链接,稳定高效!

话费充值接口文档 接口版本&#xff1a;1.0 ―、引言 文档概述 本文档提供话费充值接口规范说明&#xff0c;提供一整套的完整的接入示例(http 接口)供商户参 考&#xff0c;可以帮助商户开发人员快速完成接口开发与联调&#xff0c;实现与话费充值系统的交易互联。 公司官网…...

苍穹外卖day12笔记

一、工作台 联系昨天 要实现的功能和昨天差不多&#xff0c;都是查询数据。 所以我们就写出查询语句&#xff0c;然后直接导入已经写好的代码。 实现效果 查询语句 今日数据 营业额 select count(amount) from orders where status5 and order_time > #{begin} and …...

Prometheus技术文档-基本使用-配置文件全解!!!!!

简介&#xff1a; Prometheus是一个开源的系统监控和告警系统&#xff0c;由Google的BorgMon监控系统发展而来。它主要用于监控和度量各种时间序列数据&#xff0c;比如系统性能、网络延迟、应用程序错误等。Prometheus通过采集监控数据并存储在时间序列数据库中&#xff0c;…...

宋浩高等数学笔记(十一)曲线积分与曲面积分

个人认为同济高数乃至数学一中最烧脑的一章。。。重点在于计算方式的掌握&#xff0c;如果理解不了可以暂时不强求&#xff0c;背熟积分公式即可。此外本贴暂时忽略两类曲面积分之间的联系&#xff0c;以及高斯公式的相关内容&#xff0c;日后会尽快更新&#xff0c;争取高效率…...

安卓如何快速定位native内存泄露。

步骤1&#xff09;cat /proc/pid/status,观察下面俩个指标 RssAnon: 5300 kB //一直增大说明匿名映射的内存增大&#xff0c;malloc本质就是调用匿名映射分 配内存 RssFile: 26884 kB //文件句柄泄露&#…...

redis学习笔记(二)

文章目录 redis数据类型string&#xff08;字符串&#xff09;1. 设置键值2. 设置键值的过期时间3. 关于设置保存数据的有效期4. 设置多个键值5. 字符串拼接值6. 根据键获取值7. 自增自减8. 获取字符串的长度9. 比特流操作 redis数据类型 redis可以理解成一个全局的大字典&…...

不侵入代码的rem适配,支持桌面缩放,vue2的适配方案,包含echarts适配

此方式不侵入代码&#xff0c;自动把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.重入攻击 漏洞分析 攻击者利用合约漏洞&#xff0c;通过fallback()或者receive()函数进行函数递归进行无限取钱。 刚才试了一下可以递归10次&#xff0c;貌似就结束了。 直接看代码: 银行合约&#xff1a;有存钱、取钱、查看账户余额等函数。攻击合约: 攻击、以及合约接…...

JavaScript 操作历史记录api怎样使用 JavaScript

JavaScript 操作历史记录api怎样使用 JavaScript History 是 window 对象中的一个 JavaScript 对象&#xff0c;它包含了关于浏览器会话历史的详细信息。你所访问过的 URL 列表将被像堆栈一样存储起来。浏览器上的返回和前进按钮使用的就是 history 的信息。 History 对象包含…...

Spring 容器

提示&#xff1a;英语很重要&#xff0c;单词是读的&#xff0c;是拼出来的&#xff0c;和拼音一样 文章目录 前言前期准备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是一门广泛应用于企业级应用程序开发的高级编程语言&#xff0c;具有较高的学习和职业发展价值。但是&#xff0c;在选择Java培训课程时&#xff0c;很多人会遇到一个问题&#xff1a;Java培训课程哪个品牌好?小编经过多方分析和比较&#xff0c;从专业培训的角度&#xf…...

leetcode19. 删除链表的倒数第 N 个结点

题目&#xff1a;leetcode19. 删除链表的倒数第 N 个结点 描述&#xff1a; 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 思路&#xff1a; 让前面的节点比后面的节点先走n1步&#xff0c;因为从链表的尾节点的下一个节点开始&…...

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之四种事物

目录 结构事物 行为事物 分组事物&#xff1a; 注释事物 结构事物 1.类(Class) -类是对一组具有相同属性、方法、关系和语义的对象的描述。一个类实现一个或多个接口 2.接口(interface) -接口描述 了一个类或构件的一个服务的操作集。接口仅仅是定义了一组操作的规范&…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...