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

2.本地存储

news 2026/4/27 4:27:46

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

2.2本地存储分类- sessionStorage

2.3存储复杂数据类型

2.4数组中map方法迭代数组

2.5数组中join方法

相关文章：

2.本地存储

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

【Git】—— 标签管理

JS_判断打开的是什么手机品牌，判断是否是手机，平板，pc

HCIA 动态路由协议之RIP协议

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

苍穹外卖day12笔记

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

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

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

redis学习笔记（二）

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

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

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

Spring 容器

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

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

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

c51单片机串行通信示例代码（单片机--单片机通信）（附带proteus线路图）

UML之四种事物

FastAPI在机器学习模型部署中的关键实践

Arm与RISC-V双架构OSM模块在工业控制中的应用

Save Image as Type终极指南：如何在Chrome中一键转换图片格式

HarmonyOS APP开发之玩透 postCardAction 的三大通信心法

C++程序的五大内存分区实例详解

如何高效配置RTL8852BE Wi-Fi 6驱动：5步实现Linux系统最佳无线性能

HotGo插件化架构深度剖析：从微核设计到团队高效协作的工程实践

【独家首发】MCP 2026适配Checklist V2.3（工信部智能网联汽车准入预审备案专用版）

《Windows Internals》10.2.13 学习笔记：服务控制管理器（SCM）——为什么真正管理 Windows 服务体系的核心，不是某个服务，而是 services.exe 这个总调度中心

距离答辩还有1周，有什么降AI工具能一键去除aigc痕迹？