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

2.本地存储

news 2026/2/10 12:07:41

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

超短脉冲激光自聚焦效应

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

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

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/10/27 21:25:04

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2026/2/7 8:45:41

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2026/2/7 0:28:16

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2026/1/7 1:29:19

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

编程新知 2026/1/27 13:20:11

sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

编程新知 2026/1/29 8:51:33

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

编程新知 2026/1/26 13:35:42

python爬虫——气象数据爬取

一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用&#xff1a; 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests&#xff1a;发送 …...

编程新知 2025/12/16 7:53:39

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...

编程新知 2026/2/5 14:35:21