js-WebApi笔记之BOM

目录

window对象

定时器-延迟函数

location对象

histroy对象

本地存储

localStorage

sessionStorage

localStorage 存储复杂数据类型


window对象

BOM (Browser Object Model ) 是浏览器对象模型

  • window对象是一个全局对象,也可以说是JavaScript中的顶级对象

  • 像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的

  • 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法

  • window对象下的属性和方法调用的时候可以省略window

定时器-延迟函数

语法

setTimeout(回调函数, 延迟时间) 

setTimeout 仅仅只执行一次,所以可以理解为就是把一段代码延迟执行, 平时省略window

间歇函数 setInterval : 每隔一段时间就执行一次, , 平时省略window

清除延时函数:

clearTimeout(timerId) 

注意点

  1. 延时函数需要等待,所以后面的代码先执行

  2. 返回值是一个正整数,表示定时器的编号

<body><script>// 定时器之延迟函数// 1. 开启延迟函数let timerId = setTimeout(function () {console.log('我只执行一次')}, 3000)// 1.1 延迟函数返回的还是一个正整数数字,表示延迟函数的编号console.log(timerId)// 1.2 延迟函数需要等待时间,所以下面的代码优先执行// 2. 关闭延迟函数clearTimeout(timerId)</script>
</body>

location对象

location (地址) 它拆分并保存了 URL 地址的各个组成部分, 它是一个对象

属性/方法说明
href属性,获取完整的 URL 地址,赋值时用于地址的跳转
search属性,获取地址中携带的参数,符号 ?后面部分
hash属性,获取地址中的啥希值,符号 # 后面部分
reload()方法,用来刷新当前页面,传入参数 true 时表示强制刷新location (地址) 它拆分并保存了 URL 地址的各个组成部分, 它是一个对象
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><p>5秒后跳转到淘宝</p><button>刷新</button><script>console.log(window.location)//  location对象与地址相关的信息console.log(location.href) // 完整地址console.log(location.search) // 查询参数 地址?后面的参数  ?k=v&k=vconst str = location.search.substring(1)const arr = str.split('&') // ['a=1','b=2']for (let i = 0; i < arr.length; i++) {const key = arr[i].split('=')[0]const val = arr[i].split('=')[1]console.log(key, val)}console.log(location.hash) // '#....'document.querySelector('button').addEventListener('click', function () {location.reload(true) // true 强制刷新})//  5秒后跳转到淘宝let num = 5// setTimeout(function () {//   location.href = 'http://www.taobao.com'// }, 5000)setInterval(function () {num--if (num === 0) {location.href = 'http://www.taobao.com'} else {document.querySelector('p').innerHTML = `${num}秒后跳转到淘宝`}}, 1000)</script></body>
</html>

navigator是对象,该对象下记录了浏览器自身的相关信息

常用属性和方法:

  • 通过 userAgent 检测浏览器的版本及平台

// 检测 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'}})();

histroy对象

history (历史)是对象,主要管理历史记录, 该对象与浏览器地址栏的操作相对应,如前进、后退等

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

本地存储

本地存储:将数据存储在本地浏览器中

好处:

1、页面刷新或者关闭不丢失数据,实现数据持久化

2、容量较大,sessionStorage和 localStorage 约 5M 左右

localStorage

作用: 数据可以长期保留在本地浏览器中,刷新页面和关闭页面,数据也不会丢失

特性:以键值对的形式存储,并且存储的是字符串, 省略了window

 存储数据

localStorage.setltem(key, value)

读取数据

localStorage.getltem(key)

删除数据

localStorage.removeltem(key)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>本地存储-localstorage</title>
</head><body><script>// 本地存储 - localstorage 存储的是字符串 // 1. 存储localStorage.setItem('age', 18)// 2. 获取console.log(typeof localStorage.getItem('age'))// 3. 删除localStorage.removeItem('age')</script>
</body></html>

sessionStorage

特性:

  • 用法跟localStorage基本相同

  • 区别是:当页面浏览器被关闭时,存储在 sessionStorage 的数据会被清除

存储:sessionStorage.setItem(key,value)

获取:sessionStorage.getItem(key)

删除:sessionStorage.removeItem(key)

localStorage 存储复杂数据类型

问题:本地只能存储字符串,无法存储复杂数据类型.

解决:需要将复杂数据类型转换成 JSON字符串,在存储到本地

语法:JSON.stringify(复杂数据类型)

JSON字符串:

  • 首先是1个字符串

  • 属性名使用双引号引起来,不能单引号

  • 属性值如果是字符串型也必须双引号

<body><script>// 本地存储复杂数据类型const goods = {name: '小米',price: 1999}// localStorage.setItem('goods', goods)// console.log(localStorage.getItem('goods'))// 1. 把对象转换为JSON字符串  JSON.stringifylocalStorage.setItem('goods', JSON.stringify(goods))// console.log(typeof localStorage.getItem('goods'))</script>
</body>

问题:因为本地存储里面取出来的是字符串,不是对象,无法直接使用

解决: 把取出来的字符串转换为对象

语法:JSON.parse(JSON字符串)

<body><script>// 本地存储复杂数据类型const goods = {name: '小米',price: 1999}// localStorage.setItem('goods', goods)// console.log(localStorage.getItem('goods'))// 1. 把对象转换为JSON字符串  JSON.stringifylocalStorage.setItem('goods', JSON.stringify(goods))// console.log(typeof localStorage.getItem('goods'))// 2. 把JSON字符串转换为对象  JSON.parseconsole.log(JSON.parse(localStorage.getItem('goods')))</script>
</body

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/152041.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#入门(12):反射介绍

C# 反射&#xff08;Reflection&#xff09;是一个强大的机制&#xff0c;允许在运行时检查程序集、模块和类型的元数据&#xff0c;以及动态创建和操作类型的实例。通过反射&#xff0c;你可以在运行时获取和设置对象的属性、调用方法、创建新对象&#xff0c;甚至可以加载新的…

基于ResNet框架的CNN

数据准备 DATA_URL http://download.tensorflow.org/example_images/flower_photos.tgz 一、训练集和验证集的划分 #spile_data.pyimport os from shutil import copy import randomdef mkfile(file):if not os.path.exists(file):os.makedirs(file)file flower_data/flower…

PHP笔记-->读取JSON数据以及获取读取到的JSON里边的数据

由于我以前是写C#的&#xff0c;现在学一下PHP&#xff0c; 在读取json数据的时候被以前的思维卡住了。 以前用C#读取的时候&#xff0c;是先定义一个数组&#xff0c;将反序列化的json存到数组里面&#xff0c;在从数组里面获取jaon中的“data”数据。 其实PHP的思路也是一样…

ASP.NET 开发几个知识点

1、 皮肤设定&#xff1a; 项目右键&#xff0c;建立皮肤 app_themes 文件夹&#xff0c;右键 建立 web from 皮肤文件&#xff0c; 设定皮肤样式。全局使用皮肤 web.config 增加 <pages styleSheetTheme"Skin1" /> &#xff0c;或在 具体页面 头 增加 sty…

算法leetcode|89. 格雷编码(rust重拳出击)

文章目录 89. 格雷编码&#xff1a;样例 1&#xff1a;样例 2&#xff1a;提示&#xff1a; 分析&#xff1a;题解&#xff1a;rust&#xff1a;go&#xff1a;c&#xff1a;python&#xff1a;java&#xff1a; 89. 格雷编码&#xff1a; n 位格雷码序列 是一个由 2n 个整数组…

11.20 知识总结(choices参数、MVC和MTV的模式、Django与Ajax技术)

一、 choices参数的使用 1.1 作用 针对某个可以列举完全的可能性字段&#xff0c;我们应该如何存储 .只要某个字段的可能性是可以列举完全的&#xff0c;那么一般情况下都会采用choices参数 1.2 应用场景 应用场景&#xff1a; 学历&#xff1a; 小学 初中 高中 本科 硕士…

第八部分:JSP

目录 JSP概述 8.1&#xff1a;什么是JSP&#xff0c;它有什么作用&#xff1f; 8.2&#xff1a;JSP的本质是什么&#xff1f; 8.3&#xff1a;JSP的三种语法 8.3.1&#xff1a;jsp头部的page指令 8.3.2&#xff1a;jsp中的常用脚本 ①声明脚本&#xff08;极少使用&#xf…

打不开github网页解决方法

问题&#xff1a; 1、composer更新包总是失败 2、github打不开&#xff0c;访问不了 解决方法&#xff1a;下载一个Watt Toolkit工具&#xff0c;勾选上&#xff0c;一键加速就可以打开了。 下载步骤&#xff1a; 1、打开网址&#xff1a; Watt Toolkit 2、点击【下载wind…

k8s的高可用集群搭建,详细过程实战版

kubernetes高可用集群的搭建 前面介绍过了k8s单master节点的安装部署 今天介绍一下k8s高可用集群搭建 环境准备&#xff1a; vip &#xff1a;192.168.121.99 keeplive master01&#xff1a;192.168.121.153 centos7 master02&#xff1a;192.168.121.154 centos7 master03&a…

jupyter修改默认打开目录

当我们打开jupyter notebook&#xff08;不管用什么样的方式打开&#xff0c;使用菜单打开或者是命令行打开是一样的&#xff09;会在默认的浏览器中看到这样的界面、 但是每一台不同的电脑打开之后的界面是不同的&#xff0c;仔细观察就会发现&#xff0c;这里面现实的一些文件…

基于Vue+SpringBoot的超市账单管理系统 开源项目

项目编号&#xff1a; S 032 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S032&#xff0c;文末获取源码。} 项目编号&#xff1a;S032&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统设计3.1 总体设计3.2 前端设计3…

【自动化测试】基于Selenium + Python的web自动化框架!

一、什么是Selenium&#xff1f; Selenium是一个基于浏览器的自动化工具&#xff0c;她提供了一种跨平台、跨浏览器的端到端的web自动化解决方案。Selenium主要包括三部分&#xff1a;Selenium IDE、Selenium WebDriver 和Selenium Grid&#xff1a;  1、Selenium IDE&…

11.17 知识总结(事务、常见的字段类型等)

一、 事务 1.1 如何开启事务 前言 事务是MySQL数据库中得一个重要概念 事务的目的&#xff1a;为了保证多个SQL语句执行成功&#xff0c;执行失败&#xff0c;前后保持一致&#xff0c;保证数据安全 ACID属性&#xff1a; A&#xff1a; C&#xff1a; I&#xff1a; D&#x…

10_6 input输入子系统,流程解析

简单分层 应用层 内核层 --------------------------- input handler 数据处理层 driver/input/evdev.c1.和用户空间交互,实现fops2.不知道数据怎么得到的,但是可以把数据上传给用户--------------------------- input core层1.维护上面和下面的两个链表2.为上下两层提供接口--…

window拖拽操作的实现

调用DragAcceptFiles&#xff0c;让控件或者窗体支持文件拖动操作 void DragAcceptFiles(HWND hWnd, //指明目标窗体的句柄BOOL fAccept //为True时 则hWnd所指向的窗体可以接受拖放的文件. );窗口消息过程处理WM_DROPFILES消息。 在WM_DROPFILES消息处理过程中&…

【面试经典150 | 数学】回文数

文章目录 写在前面Tag题目来源题目解读解题思路方法一&#xff1a;反转一半数字 其他语言python3 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于本…

StoneDB顺利通过中科院软件所 2023 开源之夏 结项审核

近日&#xff0c;中科院软件所-开源软件供应链点亮计划-开源之夏2023的结项名单正式出炉&#xff0c;经过三个月的项目开发和一个多月的严格审核&#xff0c;共产生 418个成功结项项目&#xff01;其中&#xff0c;StoneDB 作为本次参与开源社区&#xff0c;社区入选的两个项目…

EXPLAIN命令使用及功能介绍

当你不确定某个select语句执行会不会影响数据库cpu怎么办&#xff1f;&#xff0c;使用EXPLAIN命令&#xff0c;给你分析该不该执行&#xff01;&#xff01; EXPLAIN命令介绍 MySQL的EXPLAIN命令是一个查询优化工具&#xff0c;用于分析和评估SELECT语句的执行计划。它提供了…

制作含有音频、视频的网页

参考代码如下 <!DOCTYPE html> <html> <head><title>视频音乐网页</title> </head> <body><!-- 视频 --><video width"320" height"240" controls><source src"movie.mp4" type"…

python——第十一天

今日目标&#xff1a; 模块和包的基本概念 python中模块的导入问题 main函数的作用和使用 常见内置模块的使用 IO流相关 模块和包的基本概念&#xff1a; 模块&#xff08;module&#xff09;&#xff1a;一个.py文件就是一个模块 包&#xff08;package&#xff09;&#xff1…