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

2.本地存储

news 2026/2/10 10:29:07

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.语法 存…...

编程日记 2023/8/12 4:11:19

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

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

编程日记 2023/8/12 4:10:17

【Git】—— 标签管理

目录 &#xff08;一&#xff09;理解标签 1、作用 &#xff08;二&#xff09;创建标签 &#xff08;三&#xff09;操作标签 1、删除标签 2、推送标签 3、删除远程标签 &#xff08;一&#xff09;理解标签 标签 tag &#xff0c;可以简单的理解为是对某次 commit 的…...

编程日记 2023/8/12 4:09:15

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…...

编程日记 2023/8/12 4:08:14

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…...

编程日记 2023/8/12 4:07:11

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

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

编程日记 2023/8/12 4:06:10

苍穹外卖day12笔记

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

编程日记 2023/8/12 4:05:09

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

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

编程日记 2023/8/12 4:04:08

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

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

编程日记 2023/8/12 4:03:07

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

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

编程日记 2023/8/12 4:02:06

redis学习笔记（二）

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

编程日记 2023/8/12 4:01:05

不侵入代码的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…...

编程日记 2023/8/12 4:00:04

智能合约 -- 常规漏洞分析 + 实例

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

编程日记 2023/8/12 3:59:03

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

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

编程日记 2023/8/12 3:58:02

Spring 容器

提示&#xff1a;英语很重要&#xff0c;单词是读的&#xff0c;是拼出来的&#xff0c;和拼音一样 文章目录 前言前期准备1️⃣ DI 依赖注入1、xml 配置方式2、注解方式 annotation❗相关注解Spring中Bean的作用域❗Scope() 注解Qualifier("XXXServiceImpl") 指定哪…...

编程日记 2023/8/12 3:57:00

【腾讯云Cloud Studio实战训练营】使用React快速构建点餐H5

文章目录 前言一、Cloud Studio是什么二、Cloud Studio特点三、Cloud Studio使用1.访问官网2.账号注册3.模板选择4.模板初始化5.H5开发安装 antd-mobile安装 Less安装 normalize上传项目需要的素材替换App.js主文件项目启动、展示 6.发布仓库 总结 前言 随着云计算产业的发展&…...

编程日记 2023/8/12 3:55:58

Java培训课程哪个品牌好？快拿小本本记好

Java是一门广泛应用于企业级应用程序开发的高级编程语言&#xff0c;具有较高的学习和职业发展价值。但是&#xff0c;在选择Java培训课程时&#xff0c;很多人会遇到一个问题&#xff1a;Java培训课程哪个品牌好?小编经过多方分析和比较&#xff0c;从专业培训的角度&#xf…...

编程日记 2023/8/12 3:54:55

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

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

编程日记 2023/8/12 3:53:53

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;//根据波特率计算公式这里需要设置为这么多才能…...

编程日记 2023/8/12 3:52:52

UML之四种事物

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

编程日记 2023/8/12 3:51:52

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2026/2/8 20:42:41

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2026/2/7 17:31:44

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/11/21 22:02:37

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/10/13 4:15:41

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2026/1/25 8:10:56

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/9/24 7:39:50

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2026/2/9 2:43:24

GitFlow 工作模式（详解）

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

编程新知 2026/1/26 12:37:40

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

编程新知 2026/2/7 21:37:35

实战三：开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

编程新知 2026/2/5 5:03:25