5.BOM-操作浏览器(BOM、插件、本地存储)

news2024/12/23 19:50:20

BOM

        // BOM操作:操作浏览器(通过js的方式实现浏览器中的某些功能)
        // a)通过js的方式实现页面刷新效果
        // b)通过js的方式,实现浏览器的上一页、下一页
        // c)通过js的方式,实现页面的跳转

Window对象

window是浏览器对象,又称为顶级对象
特点:
凡是window对象中的属性或方法,window顶级对象都可以忽略不写

location对象

本质是window对象的一个属性(location 或window.location)
作用:用来操作网页的URL地址(实现网页跳转)

在这里插入图片描述
常用属性和方法:
href属性获取完整的URL地址,对其赋值时用于地址的跳转


    <div style="background-color: red; height: 100px;width: 100px;">

    </div>
    <script>
        // location对象用法
        // a)设置页面跳转:window.location.href='跳转地址'
        // b)获取当前页面url地址:window.location.herf

        let div = document.querySelector('div');
        div.onclick = function () {
            window.location.href = 'http://www.baidu.com'
        }


        // 
    </script>

search属性获取地址中携带的参数,符号?后面部分


    <form action="">
        <input type="text" name="uname">
        <input type="submit">
    </form>

    </div>
    <script>
        console.log(location.search)
    </script>

在这里插入图片描述

hash属性获取地中的哈希值,符号#后面部分
reload方法用来刷新当前页面,传入参数true时表示强制刷新

刷新页面设置不同的布尔值区别:
1、location.reload(true)  代表刷新页面的时候,重新向服务器发送请求
2、.location.reload(false)  代表刷新页面的时候,只会在本地缓存中获取数据

navigator对象

//作用:
//1.保存了浏览器自身相关的信息
//2.记录了当前网络状态

history对象

作用:用来记录当前浏览器中访问过的页面

history.back()    //对应的功能就是浏览器中的后退按钮
history.forward()   //对应的功能就是浏览器中的前进按钮
history.go(整数或负数)  //整数表示前进。负数表示后退

延时函数

    <script>

// 延时函数:
// 语法:
// setTimeout(function(),延迟时间)
// 特点:延迟函数中的代码延迟执行
// 停止延迟函数 clearTimeout(延迟函数id)
// 应用场景:网页中自动隐藏广告效果,自动消失的提示信息


// 间歇函数
// 语法:
// setInterval(function(){},时间间隔)
// 特点:每隔一段时间执行一次
// clearInterval(间歇函数id)
// 应用场景:网页中的倒计时、轮播图


    </script>

本地存储

将数据永久化保存(和数据库同原理)
在这里插入图片描述
本地存储的分类:localStorage(重点)+sessionStorage

localStorage(sessionStorage方法一模一样)

    <script>
        // a)通过本地存储保存数据(添加数据):localStorage.setItem('自定义键',值)
        // 代码演示:
        localStorage.setItem('uname', '老段')
        localStorage.setItem('uname1', '老段1')
        // b)获取本地存储中的数据 localStorage.getItem('键')
        console.log(localStorage.getItem('uname'))
        // c)删除本地存储中的数据:localStorage.removeItem('键')

        // d)清空本地存储:本地存储中的所有数据全部删除:localStorage.clear()

    </script>

在这里插入图片描述

本地存储保存其他类型的数据
 <script>
        let obj = {
            uname: 'zs',
            age: 23,
            height: 30
        }

        // 本地存储还可以保存对象
        localStorage.setItem('student', obj)
        // 直接保存对象,看不到数据,不推荐直接保存
        // 如果要保存对象格式的数据,则推荐将对象格式的数据进行转换
        // JSON.stringify(对象),数据类型为字符串,长者像对象的字符串
        localStorage.setItem('student2', JSON.stringify(obj))
        //如果得到的结果是一个字符串,那我们推荐将我们的字符串转化为对象
        //JSON.parse(结果)
        

    </script>

在这里插入图片描述

字符串与对象的转化
<script>
        let obj = {
            uname: 'zs',
            age: 23,
            height: 30
        }

        let res1 = JSON.stringify(obj)
        console.log(res1)
        console.log(JSON.parse(res1))

    </script>

在这里插入图片描述

存储数组对象
    <script>
        let ary = [{ uanme: 'zs', age: 23, height: 180 }, { uanme: 'ls', age: 24, height: 160 }]
        localStorage.setItem('test', ary)
        localStorage.setItem('test2', JSON.stringify(ary))

    </script>

在这里插入图片描述

二者区别

localStorage保存数据属于持久化保存(除非手动删除,否则数据一致存在)
sessionStorage保持的数据属于临时保存,保存的数据会随着页面的关闭而消失

localStorage保存的数据可以跨页面访问
sessionStorage保存的数据只能在当前页面使用

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

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

相关文章

Google如何快速抓接口导入到postman调试

Google如何快速抓接口导入到postman调试 1、F12选择对应接口&#xff0c;右键后复制接口连接信息 2、打开postman&#xff0c;点击import 3、在raw text都粘贴 4、点击continue后&#xff0c;导入就可以了

音视频开发_视频基础知识

RGB彩色原理 RGB 是表示红色 (Red)、绿色 (Green) 和蓝色 (Blue) 三种颜色的色彩模式&#xff0c;这是一种加色法。在 RGB 色彩模式中&#xff0c;通过不同比例的红、绿、蓝三原色的混合可以得到各种不同颜色。这是因为人眼对红、绿、蓝三种颜色特别敏感&#xff0c;通过它们的…

前端页面访问后台hiveserver2,阶段性报错

1、运行环境 Windows11下安装VMware&#xff0c;VMware下安装CentOS7 Linux系统&#xff0c;三台虚拟机集群部署hadoop&#xff0c;安装hive&#xff1b; 在Linux下安装Eclipse&#xff0c;创建maven工程&#xff0c;使用hive-jdbc-2.3.2访问hiveserver2 2、在windows11下&…

成都爱尔林江院长解析巩膜镜是什么?它适合哪些人群

巩膜镜&#xff0c;全称为硬性透氧性巩膜接触镜&#xff0c;它有着特殊设计&#xff0c;大直径镜片像桥梁一样呈拱形覆盖角膜及角巩膜缘&#xff0c;从角膜上方横跨而过完全无接触、无任何机械性摩擦&#xff0c;最终贴合于巩膜。 巩膜镜的作用原理 光学成像&#xff1a; 配戴…

【嵌入式】嵌入式系统稳定性建设:最后的防线

&#x1f9d1; 作者简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟。提供嵌入式方向的学习指导、简历面…

OxyPlot图表曲线图学习笔记(winform)

一、学习OxyPlot 开源地址&#xff1a;https://github.com/oxyplot/oxyplot 最新版&#xff1a;v2.1.2 新建winform&#xff0c;nuget中添加依赖包 二、写代码 2.1 BarSeries 2.2 ScatterSeries 2.3 LineSeries (带指向箭头&#xff09; int pointCount 50; double[] xs …

C# Channel的入门与应用

C# Channel的入门与应用 1. 入门 Channel 是微软在 .NET Core 3.0 以后推出的新的集合类型&#xff0c;该类型位于 System.Threading.Channels 命名空间下&#xff0c;具有异步 API 、高性能、线程安全等等的特点。目前&#xff0c;Channel 最主要的应用场景是生产者-消费者模…

​FastIce-Tech 企业官网开源模版:专为中小企业设计的轻量级网址

标题&#xff1a;FastIce-Tech 企业官网开源模版&#xff1a;专为中小企业设计的轻量级网址 中小企业在建立企业官网时常常面临着时间、资源和技术的限制。为了解决这些问题&#xff0c;FastIce-Tech 企业官网开源模版应运而生。它是一个基于 Vue.js、ElementUI 和 Vue-Router …

帮管客CRM(jiliyu)接口SQL注入漏洞

文章目录 前言声明一、漏洞描述二、影响版本三、漏洞复现四、修复建议 前言 帮管客CRM客户管理系统专注于为企业提供crm客户关系管理、crm管理系统、crm软件产品及企业销售管理流程解决方案服务,助力企业业绩增长。 声明 请勿利用文章内的相关技术从事非法测试&#xff0c;由…

7-2 然后是几点

题目链接&#xff1a;7-2 然后是几点 一. 题目 1. 题目 2. 输入输出格式 3. 输入输出样例 4. 限制 二、代码 1. 代码实现 #include <stdio.h>int time_calc(int start_time, int used_time){int start_hour start_time / 100;int start_minute start_time % 100;…

利用ffmpeg对两个音频文件进行混音处理

前言 最近&#xff0c;拿到了一个语音识别程序&#xff0c;想测试一下它识别的准确性。原本程序有一段自己的测试音频&#xff0c;准确性还可以&#xff0c;但是&#xff0c;自己想增加一下测试素材的复杂性。想到了在原本的测试音频中引入干扰数据&#xff08;噪点&#xff…

灵魂指针,教给(三)

欢迎来到白刘的领域 Miracle_86.-CSDN博客 系列专栏 C语言知识 先赞后看&#xff0c;已成习惯 创作不易&#xff0c;多多支持&#xff01; 目录 一、 字符指针变量 二、数组指针变量 2.1 数组指针变量是什么 2.2 数组指针变量如何初始化 三、二维数组传参本质 四、函数…

C语言 —— 图形打印

题目1&#xff1a; 思路&#xff1a; 如果我们要打印一个实心正方形&#xff0c;其实就是一个二维数组&#xff0c;i控制行&#xff0c;j控制列&#xff0c;行列不需要控制&#xff0c;arr[i][j]直接打印星号即可。 对于空心正方形&#xff0c;我们只需要控制行和列的条件&…

【C语言程序设计】C语言求圆周率π(三种方法)

题目一&#xff1a; 利用公式①计求π的近似值&#xff0c;要求累加到最后一项小于10^(-6)为止。 程序代码&#xff1a; #include <stdio.h> #include <stdlib.h> #include <math.h> int main(){float s1;float pi0;float i1.0;float n1.0;while(fabs(i)&…

PaddleOCR表格识别运行实例

目录 PaddleOCR 开源项目地址 一、数据集 1. 训练数据下载 2.数据集介绍 &#xff08;1&#xff09;PubTabNet数据集 &#xff08;2&#xff09; 好未来表格识别竞赛数据集 &#xff08;3&#xff09;WTW中文场景表格数据集 二、训练步骤 1.数据放置 2.环境配置 &…

【递归搜索回溯专栏】专题二:二叉树中的深搜----二叉树剪枝

本专栏内容为&#xff1a;递归&#xff0c;搜索与回溯算法专栏。 通过本专栏的深入学习&#xff0c;你可以了解并掌握算法。 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;递归搜索回溯专栏 &#x1f69a;代码仓库&#xff1a;小小unicorn的代…

Vue3全家桶 - Vue3 - 【4】侦听器

侦听器 一、 组合式API&#xff1a; 1.1 watch()函数 创建侦听器: 语法:// 先导入 watch 函数 import { watch } from vue watch(source, callback, options)source&#xff1a; 需要侦听的数据源&#xff0c;可以是 ref&#xff08;包括计算属性&#xff09;、一个响应式对…

mangoDB:2024安装

mangoDB:2024安装 mangoDB: 下载链接 取消勾选 配置环境变量 启动服务 同级目录下创建一个db文件夹 然后执行命令&#xff0c;启动服务 mongod --dbpath D:\environment\mango\db访问http://localhost:27017/ 出现下面的就是安装成功 2然后在管理员权限下给mango服务重…

【日常记录】【工具】随机生成图片的网站 Lorem Picsum

文章目录 1、介绍2、获取固定宽高的图片3、处理图片缓存4、 Emmet 缩写语法 1、介绍 Lorem Picsum 是一个免费的图片占位符服务&#xff0c;可以用于网站、应用程序或任何需要占位符图片的地方。它提供了一个简单的 API&#xff0c;可以通过 HTTP 请求获取随机图片&#xff0c;…

嵌入式驱动学习第三周——设备号与字符设备的注册、分配、释放

前言 这一篇博客来谈谈字符设备的注册、分配与释放。 嵌入式驱动学习专栏将详细记录博主学习驱动的详细过程&#xff0c;未来预计四个月将高强度更新本专栏&#xff0c;喜欢的可以关注本博主并订阅本专栏&#xff0c;一起讨论一起学习。现在关注就是老粉啦&#xff01; 目录 前…