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

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保存的数据只能在当前页面使用

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

redis题库详解

1 什么是Redis Redis(Remote Dictionary Server) 是一个使用 C 语言编写的&#xff0c;开源的&#xff08;BSD许可&#xff09;高性能非关系型&#xff08;NoSQL&#xff09;的键值对数据库。 Redis 可以存储键和五种不同类型的值之间的映射。键的类型只能为字符串&#xff0c;…

C++函数 加括号与不加括号

很多时候&#xff0c;我们会看到一些在创建对象时有的加括号有的不加括号 那么&#xff0c;这是什么情况呢&#xff1f; 总结&#xff1a;函数需要加上括号&#xff0c;加上括号会对函数初始化&#xff0c;不加括号可能导致未知错误 我们来验证一下。 1.基本数据类型不带括…

二级指针作为函数参数——可以改变调用函数中传入指针的值(不是指向地址的值哦!)

主要是看这篇文章&#xff1a; 二级指针作为函数参数_二级指针做函数参数-CSDN博客 对里面的程序进行一些修改和补充&#xff0c;调试加更多说明。 1、一级指针情况&#xff1a; #include"stdio.h"int my_strlen1(const char* str) {int count 0;int i 0;if (N…

【功能大全】手机短信验证码一键注册登录流程

目录 发送验证码 注册登录 用户表设计 ​编辑申请腾讯云短信与密钥 找到云短信服务 开通腾讯云短信服务 ​编辑​​​​​创建短信签名 ​编辑​编辑创建短信正文模版​编辑​编辑 等待审核 测试短信​编辑 SDK密钥创建 SpringBoot集成腾讯云短信 pom中导入腾讯云短…

Uni-app跟学笔记(一):新建项目、运行、tabbar、全局配置

文章目录 1&#xff09;新建项目2&#xff09;项目运行3&#xff09;项目结构4&#xff09;开发规范5&#xff09;globalStyle全局外观配置6&#xff09;pages页面配置7&#xff09;tabbar8&#xff09;Condition 本博客为 uni-app 此门课的跟学笔记&#xff0c;目的是便于个人…

HTML5:七天学会基础动画网页12

“书接上回”继续对transition补充&#xff0c;在检查中找到ease后&#xff0c;鼠标放到ease前的紫色小方块就可以对运动曲线进行调整&#xff0c;这个曲线叫贝塞尔曲线&#xff0c;这里不做别的补充&#xff0c;不用了解&#xff0c;我们只要知道这个运动方式不只是有简单的匀…

定时执行专家 —— 让工作更高效,生活更便捷

在现代社会&#xff0c;高效的时间管理已经成为我们工作和生活中不可或缺的一部分。为了实现这一目标&#xff0c;我们经常会借助各种工具和软件来辅助我们完成定时任务。今天&#xff0c;我要为大家介绍一款功能强大、操作简便的定时任务执行软件——《定时执行专家》。这款软…

ChromeDriver 122 版本为例 国内下载地址及安装教程

ChromeDriver 国内下载地址 https://chromedriver.com/download 靠谱 千千万万别下载错了 先确认 Chrome 浏览器版本 以 win64 版本为例 那我们下载这一个啊&#xff0c;不要下载错了 下载地址贴在这哈 https://storage.googleapis.com/chrome-for-testing-public/122.0.…

差分----外部执行

概念&#xff1a; 统计学中的差分是指离散函数后的后一项减去前一项的差&#xff1b; 一维数据 输入一个长度为n的整数序列。 接下来输入m个操作&#xff0c;每个操作包含三个整数l, r, c&#xff0c;表示将序列中[l, r]之间的每个数加上c。 分析&#xff1a; 对l位置上的…

用miniconda建立PyTorch、Keras、TensorFlow三个环境

一、配置清华镜像conda源 由于网络问题&#xff0c;直接使用conda默认的源下载包可能会非常慢。为了解决这个问题&#xff0c;可以配置国内镜像源来加速包的下载。清华大学TUNA协会提供了一个常用的conda镜像源。下面是如何配置清华镜像源的步骤&#xff1a; 1. 配置清华conda…

Day37:安全开发-JavaEE应用JNDI注入RMI服务LDAP服务JDK绕过调用链类

目录 JNDI注入-RMI&LDAP服务 JNDI远程调用-JNDI-Injection JNDI远程调用-marshalsec JNDI-Injection & marshalsec 实现原理 JNDI注入-FastJson漏洞结合 JNDI注入-JDK高版本注入绕过 思维导图 Java知识点&#xff1a; 功能&#xff1a;数据库操作&#xff0c;文…

如何理解Redis中的缓存雪崩,缓存穿透,缓存击穿?

目录 一、缓存雪崩 1.1 解决缓存雪崩问题 二、缓存穿透 2.1 解决缓存穿透 三、缓存击穿 3.1 解决缓存击穿 3.2 如何保证数据一致性问题&#xff1f; 一、缓存雪崩 缓存雪崩是指短时间内&#xff0c;有大量缓存同时过期&#xff0c;导致大量的请求直接查询数据库&#xf…

idea:忽略不要搜索unpackage文件夹

开发vue时搜索关键字&#xff0c;会搜索到编译后的文件&#xff0c;如unpackage。&#xff08;注意这个是idea工具&#xff0c;和Git忽略是有区别的&#xff09; File->Settings->Editor->File Types

Ubuntu 安装腾讯会议

1.官网下载 进入腾讯会议下载官网下载腾讯会议Linux客户端 选择x86_64格式安装包下载 若不知道自己的系统架构,输入 uname -a 在命令行结果中查看系统架构信息 2.终端命令安装 cd {你的下载路径} sudo dpkg -i TencentMeeting_0300000000_3.19.0.401_x86_64_default.publi…

2024-03-11,12(HTML,CSS)

1.HTML的作用就是在浏览器摆放内容。 2.HTML基本骨架 head&#xff1a;网页头部&#xff0c;是给浏览器看的代码&#xff0c;例如CSS body&#xff1a;网页主体&#xff0c;是给用户看的代码&#xff0c;例如图片&#xff0c;文字。 title&#xff1a;网页标题 3.标签的两种…

Midjourney绘图欣赏系列(十一)

Midjourney介绍 Midjourney 是生成式人工智能的一个很好的例子&#xff0c;它根据文本提示创建图像。它与 Dall-E 和 Stable Diffusion 一起成为最流行的 AI 艺术创作工具之一。与竞争对手不同&#xff0c;Midjourney 是自筹资金且闭源的&#xff0c;因此确切了解其幕后内容尚不…

超简单的html+css魔幻霓虹灯文字特效

超简单的htmlcss魔幻霓虹灯文字特效&#xff0c; 效果如下 动态效果&#xff0c;自行查看&#xff0c;创建一个空白的html文件&#xff0c;将下面代码拷贝进去&#xff0c;双击html文件运行即可 <!DOCTYPE html> <html lang"zh-CN"> <head><…

基于Redis实现分布式锁、限流操作(基于SpringBoot)的实现

基于Redis实现分布式锁、限流操作——基于SpringBoot实现 本文总结了一种利用Redis实现分布式锁、限流的较优雅的实现方式本文原理介绍较为通俗&#xff0c;希望能帮到有需要的人本文的demo地址&#xff1a;https://gitee.com/rederxu/lock_distributed.git 一、本文基本实现…

测试用例的设计(2)

目录 1.前言 2.正交排列(正交表) 2.1什么是正交表 2.2正交表的例子 2.3正交表的两个重要性质 3.如何构造一个正交表 3.1下载工具 3.1构造前提 4.场景设计法 5.错误猜测法 1.前言 我们在前面的文章里讲了测试用例的几种设计方法,分别是等价类发,把测试例子划分成不同的类…

第九节:揭开交互的秘密:如何制作原型图

交互设计与用户体验(上) 一、交互、原型的概念及关系 1、什么是交互? 交互(interaction)是指用户与产品之间的互动,即用户输入(input),产品对应给出反馈(Feedback)或输出(Output)的过程。简单可以理解为【交流和互动】。我们把任何两个系统之间的交互都可以看做【对…