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

JavaScript BOM核心对象、本地存储

article 2026/2/6 5:27:55

BOM 核心对象详解

一、location 对象

1. 常用属性

2. 常用方法

3. 应用场景

二、navigator 对象

1. 核心属性

2. 常用方法

3. 应用场景

三、history 对象

1. 核心属性和方法

2. 应用场景

四、兼容性与注意事项

五、总结

本地存储与复杂数据类型处理

一、本地存储简介

二、基础操作

1. 存储简单数据类型

2. 存储限制与检测

三、处理复杂数据类型

1. 存储对象或数组

2. 处理特殊数据类型

四、高级技巧与最佳实践

1. 数据版本控制

2. 存储事件监听

3. 加密敏感数据

4. LRU 缓存策略

五、替代方案对比

六、总结

BOM 核心对象详解

一、`location` 对象

location 用于 获取或操作当前页面的 URL，支持导航到新页面。

1. 常用属性

属性	说明	示例值
`href`	完整 URL	`"https://example.com/path?q=1"`
`protocol`	协议（`http:`、`https:`）	`"https:"`
`host`	主机名和端口	`"example.com:8080"`
`hostname`	主机名（不含端口）	`"example.com"`
`port`	端口	`"8080"`
`pathname`	URL 路径	`"/path"`
`search`	查询参数（`?` 后的内容）	`"?q=1"`
`hash`	哈希值（`#` 后的内容）	`"#section"`

2. 常用方法

方法	说明	示例
`assign(url)`	跳转到新页面（保留历史记录）	`location.assign('new-page.html')`
`replace(url)`	替换当前页面（无历史记录）	`location.replace('login.html')`
`reload(force)`	重新加载页面	`location.reload(true)`（强制刷新）

3. 应用场景

<body><form><input type="text" name="search"> <button>搜索</button></form><a href="#/music">音乐</a><a href="#/download">下载</a><button class="reload">刷新页面</button><script>// location 对象  // 1. href属性 （重点） 得到完整地址，赋值则是跳转到新地址console.log(location.href)// location.href = 'http://www.itcast.cn'// 2. search属性  得到 ? 后面的地址 console.log(location.search)  // ?search=笔记本// 3. hash属性  得到 # 后面的地址console.log(location.hash)// 4. reload 方法  刷新页面const btn = document.querySelector('.reload')btn.addEventListener('click', function () {// location.reload() // 页面刷新location.reload(true) // 强制页面刷新 ctrl+f5})</script>
</body>

二、`navigator` 对象

navigator 提供 浏览器和操作系统信息，支持设备能力检测。

1. 核心属性

属性	说明	示例值
`userAgent`	浏览器用户代理字符串	`"Mozilla/5.0 (Windows NT 10.0; Win64; x64) ..."`
`platform`	操作系统平台	`"Win32"`、`"MacIntel"`
`language`	浏览器首选语言	`"zh-CN"`
`onLine`	是否联网	`true`
`geolocation`	地理位置 API	`navigator.geolocation.getCurrentPosition(...)`

2. 常用方法

方法	说明	示例
`geolocation.getCurrentPosition()`	获取当前位置（需用户授权）	`navigator.geolocation.getCurrentPosition(showPosition)`
`clipboard.writeText()`	写入剪贴板（需 HTTPS 和用户授权）	`navigator.clipboard.writeText('Hello')`
`vibrate()`	触发设备震动（移动端）	`navigator.vibrate(200)`

3. 应用场景

// 检测 userAgent（浏览器信息）
(function () {const userAgent = navigator.userAgent// 验证是否为Android或iPhoneconst android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)// 如果是Android或iPhone，则跳转至移动站点if (android || iphone) {location.href = 'http://m.itcast.cn'}})();

设备检测：

// 检测移动端
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);

剪贴板操作：

// 读取剪贴板内容
navigator.clipboard.readText().then(text => console.log(text));

地理位置获取：

navigator.geolocation.getCurrentPosition(position => console.log(position.coords.latitude, position.coords.longitude),error => console.error(error)
);

三、`history` 对象

history 用于 管理浏览器会话历史记录，支持无刷新页面导航（单页应用核心）。

1. 核心属性和方法

属性/方法	说明	示例
`length`	历史记录条目数	`console.log(history.length)`
`back()`	返回上一页	`history.back()`
`forward()`	前进到下一页	`history.forward()`
`go(n)`	跳转到历史记录中的第 n 页	`history.go(-2)`（后退两页）
`pushState(state, title, url)`	添加历史记录（不刷新页面）	`history.pushState({id: 1}, '', '/page1')`
`replaceState(state, title, url)`	替换当前历史记录（不刷新页面）	`history.replaceState({}, '', '/login')`

2. 应用场景

<body><button class="back">←后退</button><button class="forward">前进→</button><script>// histroy对象// 1.前进const forward = document.querySelector('.forward')forward.addEventListener('click', function () {// history.forward() history.go(1)})// 2.后退const back = document.querySelector('.back')back.addEventListener('click', function () {// history.back()history.go(-1)})</script>
</body>

单页应用（SPA）路由：

// 添加新历史记录
history.pushState({ page: 1 }, 'Page 1', '/page1');// 监听 popstate 事件（用户点击前进/后退）
window.addEventListener('popstate', event => {console.log('当前状态:', event.state);
});

动态修改 URL：

// 修改 URL 但不触发刷新
history.replaceState({}, '', '/profile');

四、兼容性与注意事项

location 安全限制：
- 跨域脚本无法读取其他域的 location 属性（同源策略）。
- location.replace() 可防止用户通过后退返回原页面。
navigator 用户授权：
- geolocation 和 clipboard API 需用户明确授权。
- 部分属性（如 userAgent）可被浏览器伪装。
history 状态管理：
- pushState 和 replaceState 不会触发 popstate 事件。
- 单页应用需自行处理路由变化后的内容更新。

五、总结

对象	核心功能	典型应用场景
`location`	URL 解析与导航控制	页面跳转、URL 参数解析
`navigator`	浏览器/设备信息获取与交互	设备检测、剪贴板操作、地理位置
`history`	会话历史记录管理	单页应用路由、无刷新 URL 更新

本地存储与复杂数据类型处理

一、本地存储简介

JavaScript 提供了两种浏览器端存储方案，统称为 Web Storage API：

类型	生命周期	作用域
`localStorage`	永久存储（除非手动清除）	同源的所有标签页共享
`sessionStorage`	会话级存储（标签页关闭后清除）	仅当前标签页有效

共同特点：

存储键值对（Key-Value），键和值均为字符串。
存储容量通常为 5MB（不同浏览器可能略有差异）。
仅限同源页面访问（同协议、域名、端口）。

二、基础操作

1. 存储简单数据类型

// 存储
localStorage.setItem('username', 'Alice');  // 字符串
localStorage.setItem('age', '25');          // 数值需转为字符串// 读取
const username = localStorage.getItem('username'); // 'Alice'
const age = parseInt(localStorage.getItem('age')); // 25（转回数值）// 删除
localStorage.removeItem('age');
localStorage.clear(); // 清空所有数据

2. 存储限制与检测

// 检测浏览器是否支持
if (typeof localStorage !== 'undefined') {// 支持 localStorage
}// 错误处理（如超出存储容量）
try {localStorage.setItem('key', 'value');
} catch (e) {if (e.name === 'QuotaExceededError') {console.error('存储空间不足！');}
}

三、处理复杂数据类型

由于 Web Storage 只能存储字符串，处理对象、数组等复杂数据需进行 序列化（JSON 转换）。

存储对象/数组	`localStorage.setItem(key, JSON.stringify(data))`
读取对象/数组	`JSON.parse(localStorage.getItem(key))`

1. 存储对象或数组

const user = {id: 1,name: 'Alice',preferences: { theme: 'dark', notifications: true }
};// 序列化存储
localStorage.setItem('user', JSON.stringify(user));// 读取并反序列化
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.preferences.theme); // 'dark'

2. 处理特殊数据类型

Date 对象：

// 存储
const now = new Date();
localStorage.setItem('lastLogin', now.toISOString());// 读取
const lastLogin = new Date(localStorage.getItem('lastLogin'));

Map/Set：

const map = new Map([[1, 'a'], [2, 'b']]);
localStorage.setItem('map', JSON.stringify(Array.from(map.entries()));const storedMap = new Map(JSON.parse(localStorage.getItem('map')));

循环引用问题：

const obj = { a: 1 };
obj.self = obj; // 循环引用
// JSON.stringify(obj); // 报错，需自行处理循环结构

四、高级技巧与最佳实践

1. 数据版本控制

避免数据结构变更导致解析失败：

const data = {version: 2, // 版本号user: { /* ... */ }
};
localStorage.setItem('data', JSON.stringify(data));

2. 存储事件监听

监听同源页面的存储变化：

window.addEventListener('storage', (e) => {console.log(`键 ${e.key} 已更新，新值：${e.newValue}`);
});

3. 加密敏感数据

防止数据泄露：

// 使用加密库（如 CryptoJS）
const encrypted = CryptoJS.AES.encrypt('secret', 'key').toString();
localStorage.setItem('secret', encrypted);

4. LRU 缓存策略

管理存储空间，淘汰最近最少使用数据：

function setWithLRU(key, value, maxItems = 50) {const keys = JSON.parse(localStorage.getItem('lruKeys') || '[]');if (keys.length >= maxItems) {const oldKey = keys.shift();localStorage.removeItem(oldKey);}keys.push(key);localStorage.setItem('lruKeys', JSON.stringify(keys));localStorage.setItem(key, JSON.stringify(value));
}

五、替代方案对比

方案	特点	适用场景
localStorage	简单键值存储，容量小（5MB）	小量简单数据（用户偏好设置）
IndexedDB	非关系型数据库，支持索引、事务、大容量	大量结构化数据（离线应用）
Cookies	每次请求自动携带，容量极小（4KB）	服务器端需要的少量数据（会话ID）

六、总结

序列化必要：使用 JSON.stringify 和 JSON.parse 处理复杂数据。
容量管理：避免存储过大对象，必要时实现缓存淘汰策略。
安全防护：加密敏感数据，避免 XSS 攻击导致数据泄露。
版本控制：数据结构变更时通过版本号兼容旧数据。
合理选型：根据数据量和复杂度选择 localStorage 或 IndexedDB。

JavaScript BOM核心对象、本地存储

目录 BOM 核心对象详解一、location 对象 1. 常用属性 2. 常用方法 3. 应用场景二、navigator 对象 1. 核心属性 2. 常用方法 3. 应用场景三、history 对象 1. 核心属性和方法 2. 应用场景四、兼容性与注意事项五、总结本地存储与复杂数据类型处理一、本…...

编程日记 2025/12/22 14:03:44

VBA中类的解读及应用第二十二讲：利用类判断任意单元格的类型-5

《VBA中类的解读及应用》教程【10165646】是我推出的第五套教程，目前已经是第一版修订了。这套教程定位于最高级，是学完初级，中级后的教程。类，是非常抽象的，更具研究的价值。随着我们学习、应用VBA的深入&#xff0…...

编程日记 2026/1/31 4:04:13

ffmpeg常见命令3

文章目录 1. **文字水印（Text Watermark）**示例命令：更多选项：2. **图片水印（Image Watermark）**示例命令：更多选项：3. **画中画（Picture-in-Picture, PIP）**示例命令：更多选项：4. **多宫格效果（Grid Effect）**示例命令（2x2 网格）：更多选项：综合示例：文字水…...

编程日记 2025/6/5 0:55:13

Spring Boot 可扩展脱敏框架设计全解析 | 注解+策略模式+模板方法模式实战

一、需求场景：为什么需要脱敏框架？ 在数据安全合规要求下，敏感信息处理成为系统必备能力。典型场景： 用户隐私保护（手机号、身份证、邮箱等）日志敏感信息过滤接口返回数据自动脱敏传统方案痛点&#xf…...

编程日记 2026/1/18 10:08:40

STM32F103_LL库+寄存器学习笔记13 - 梳理外设CAN与如何发送CAN报文（串行发送）

导言 CAN总线因其高速稳定的数据传输与卓越抗干扰性能，在汽车、机器人及工业自动化中被广泛应用。它采用分布式网络结构，实现多节点间实时通信，确保各控制模块精准协同。在汽车领域，CAN总线连接发动机、制动、车身系统&#xff0c…...

编程日记 2026/1/31 11:51:46

JavaScript学习19-事件类型之鼠标事件

1. 2. 3....

编程日记 2026/2/1 13:51:25

Linux系统调用编程

文章目录一、进程和线程二、Linux的虚拟内存管理和stm32的真实物理内存**Linux虚拟内存管理**STM32物理内存映射2. 主要区别三、Linux系统调用函数 fork()、wait()、exec()1. fork()：创建子进程2. wait()：等待子进程状态改变3. exec()：替换…...

编程日记 2026/2/4 23:57:07

游戏引擎学习第203天

回顾当前情况在这里我将直播完成整个游戏的制作。我们现在面临一些技术上的困难，确实如此。我的笔记本电脑的电源接口坏了，所以我不得不准备了这台备用笔记本，希望它能够正常工作。我所以希望一切都还好，尽管我不完全确定是否一…...

编程日记 2026/2/5 15:00:49

408 计算机网络知识点记忆（4）

前言本文基于王道考研课程与湖科大计算机网络课程教学内容，系统梳理核心知识记忆点和框架，既为个人复习沉淀思考，亦希望能与同行者互助共进。（PS：后续将持续迭代优化细节） 往期内容 408 计算机网络知识…...

编程日记 2025/4/11 22:48:53

线性代数：分块矩阵，秩，齐次线性，非齐次线性的解相关经典例题

所以C错误，选D 排除A，B选项...

编程日记 2026/2/1 15:21:56

Nginx功能及应用全解：从负载均衡到反向代理的全面剖析

Nginx作为一款开源的高性能HTTP服务器和反向代理服务器，凭借其高效的资源利用率和灵活的配置方式，已成为互联网领域中最受欢迎的Web服务器之一。无论是作为HTTP服务器、负载均衡器，还是作为反向代理和缓存服务器，Nginx的多种功能广…...

编程日记 2026/2/6 2:11:25

深度学习数据集划分比例多少合适

在机器学习和深度学习中，测试集的划分比例需要根据数据量、任务类型和领域需求灵活调整。 1. 常规划分比例通用场景训练集 : 验证集 : 测试集 60% : 20% : 20% 适用于大多数中等规模数据集（如数万到数十万样本），平衡了训练数…...

编程日记 2026/2/5 9:48:21

CExercise_1_5 水仙花数

题目： 经典循环案例：请求出所有的水仙花数，并统计总共有几个。所谓的水仙花数是指一个三位数，其各位数字的立方和等于该数本身。举例：153就是一个水仙花数，153 1 * 1 * 1 5 * 5 * 5 3 * 3 * 3 1 125…...

编程日记 2026/2/5 19:13:16

用C实现一个最简单的正则表达式引擎

用C实现一个简单的正则表达式引擎下面我将实现一个极简的正则表达式引擎，仅支持以下基本功能： . 匹配任意单个字符* 匹配零个或多个前导字符^ 匹配字符串开头$ 匹配字符串结尾完整代码实现 #include <stdio.h> #include <stdbool.h>bo…...

编程日记 2026/1/8 22:34:24

哈密尔顿路径（Hamiltonian Path）及相关算法题目

哈密尔顿路径要求访问图中每个顶点恰好一次，通常用于解决旅行商问题（TSP）或状态压缩DP问题。哈密尔顿路径（Hamiltonian Path）是指在一个图中经过每个顶点恰好一次的路径。如果这条路径的起点和终点相同（即…...

编程日记 2026/2/2 22:41:24

MINIQMT学习课程Day10

开始获取股票数据课程的学习： 获取qmt账号的持仓情况后，我们进入下一步，如何获得当前账号的委托状况还是之前的步骤，打开qmt，选择独立交易， 之后使用pycharm，编写py文件导入包&#xff1a…...

编程日记 2026/2/2 22:15:06

JAVA实战开源项目：智慧图书管理系统(Vue+SpringBoot) 附源码

本文项目编号 T 152 ，文末自助获取源码 \color{red}{T152，文末自助获取源码} T152，文末自助获取源码目录一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程四、功能截图五、文案资料5.1 选题背景5.2 国内…...

编程日记 2026/2/5 5:27:10

Linux 系统管理综合实训 —— 基于 NAT 模式的多 IP 配置、Nginx 服务部署及存储管理

1. 虚拟机网络配置：NAT模式与多IP地址设置将你的虚拟机的网卡模式设置为nat模式，给虚拟机网卡配置三个主机位分别为100、200、168的ip地址设置静态IP [rootlocalhost ~]# nmcli c modify ens160 ipv4.method manual ipv4.addresses 192.168.2.100/2…...

编程日记 2026/2/1 13:51:28

如何在windows 环境、且没有显卡的情况下用python跑通从ModelScope下载的大模型的调用

文章目录背景介绍源代码：安装调试过程1.设置第三方镜像源2.预先安装：3.在python中创建代码：4.最终修改程序,将device_map从“cuda”改成“auto”，大模型调用1.5B（1___5B)的5.最终跑出结果解释：示例&#x…...

编程日记 2026/2/3 2:37:47

黑马点评redis改 part 1

本篇将主要阐述短信登录的相关知识，感谢黑马程序员开源，感谢提供初始源文件（给到的是实战第7集开始的代码）【Redis实战篇】黑马点评学习笔记（16万字超详细、Redis实战项目学习必看、欢迎点赞⭐收藏）-CSDN博…...

编程日记 2026/2/2 21:20:06

Apache Struts2 漏洞（CVE-2017-5638）技术分析

一、漏洞简介 CVE-2017-5638 是 Apache Struts2 中的一个远程命令执行漏洞，攻击者可以通过构造特定的 HTTP 请求头，利用Struts的 OGNL 表达式解析机制，在服务器端执行任意代码。二、漏洞触发场景漏洞存在于 Struts2 的 Jakarta Multipar…...

编程日记 2025/6/12 16:19:08

A2DP（Advanced Audio Distribution Profile）是蓝牙协议栈中用于音频传输的一个标准化协议

A2DP（Advanced Audio Distribution Profile）是蓝牙协议栈中用于音频传输的一个标准化协议，主要用于高质量音频流的无线传输。以下是A2DP协议的详细信息： 定义 A2DP协议允许音源设备（Source，简称SRC&#…...

编程日记 2025/5/21 16:33:41

【Ragflow】11. 文件解析流程分析/批量解析实现

概述本文继续对ragflow文档解析部分进行分析，并通过脚本的方式实现对文件的批量上传解析。文件解析流程文件解析的请求处理流程大致如下： 1.前端上传文件，通过v1/document/run接口，发起文件解析请求 2.后端api\apps\docum…...

编程日记 2026/2/1 18:36:55

第三期：深入理解 Spring Web MVC [特殊字符]（数据传参+ 特殊字符处理 + 编码问题解析）

✨前言：传参和状态管理，看似简单其实门道不少在 Web 开发中，前端和后端最核心的交流方式就是“传参”，而“传参”除了涉及如何写代码获取参数，还藏着很多开发者容易忽略的细节： 为什么 URL 带了中文&…...

编程日记 2026/2/1 6:24:39

嵌入式学习笔记——ARM-中断与异常

文章目录中断与异常的区别中断与 DMA 的区别中断能否睡眠？下半部能否睡眠？1. 中断处理程序不能睡眠2. 下半部（SoftIRQ、Tasklet、Workqueue） 中断处理注意点1. 快进快出2. 避免阻塞3. 正确返回值4. 如何处理大量任务5. 避免竞态问…...

编程日记 2025/5/31 1:12:58

Everything 安装教程与使用教程（附安装包）

文章目录前言一、Everything 介绍二、Everything 安装教程1.Everything 安装包下载2.选择安装文件3.选择安装语言4.接受许可协议5.选择安装位置6.配置安装选项7.完成安装三、Everything 使用教程1.启动软件2.简单关键词搜索3.按类型搜索前言在日常使用电脑时，随…...

编程日记 2026/2/1 7:44:28

嵌入式开发中栈溢出的处理方法

嵌入式开发中栈溢出的处理方法目录引言栈溢出的原理栈溢出的危害栈溢出检测方法哨兵变量法栈着色法硬件监测机制编译器栈保护裸机系统中的栈溢出处理操作系统中的栈溢出处理预防栈溢出的最佳实践结论引言在嵌入式系统开发中，栈溢出是一个常见且危险的问题…...

编程日记 2026/1/10 8:13:36

SQL语句（三）—— DQL

目录基本语法一、基础查询 1、查询多个字段 2、字段设置别名 3、去除重复记录 4、示例代码二、条件查询 1、语法 2、条件列表常用的运算符 3、示例代码三、分组查询 （一）聚合函数 1、介绍 2、常见的聚合函数 3、语法 4、示例代码 &…...

编程日记 2026/2/2 22:02:03

#python项目生成exe相关了解

在 Windows 上将 Python 项目生成 EXE 可执行文件，主要使用 pyinstaller。以下是完整步骤： 📌 1. 安装 PyInstaller pip install pyinstaller如果已安装，可执行以下命令检查版本： pyinstaller --version&#x1f4c…...

编程日记 2025/6/14 18:06:41

Opencv计算机视觉编程攻略-第九节描述和匹配兴趣点

一般而言，如果一个物体在一幅图像中被检测到关键点，那么同一个物体在其他图像中也会检测到同一个关键点。图像匹配是关键点的常用功能之一，它的作用包括关联同一场景的两幅图像、检测图像中事物的发生地点等等。 1.局部模板匹配凭单个像素就…...

编程日记 2026/2/1 13:51:31

BOM 核心对象详解

一、location 对象

1. 常用属性

2. 常用方法

3. 应用场景

二、navigator 对象

1. 核心属性

2. 常用方法

3. 应用场景

三、history 对象

1. 核心属性和方法

2. 应用场景

四、兼容性与注意事项

五、总结

本地存储与复杂数据类型处理

一、本地存储简介

二、基础操作

1. 存储简单数据类型

2. 存储限制与检测

三、处理复杂数据类型

1. 存储对象或数组

2. 处理特殊数据类型

四、高级技巧与最佳实践

1. 数据版本控制

2. 存储事件监听

3. 加密敏感数据

4. LRU 缓存策略

五、替代方案对比

六、总结

相关文章：

一、`location` 对象

二、`navigator` 对象

三、`history` 对象