WebAPI-Bom对象延时器 BOM操作本地存储

最新推荐文章于 2024-07-06 16:47:02 发布

学习吖

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量1.1k

点赞数

分类专栏： webapi学习文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_68531033/article/details/124369164

版权

webapi学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

BOM

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

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

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

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

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

定时器-延时函数

JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout

清除延时器

let ti = setInterval(调用函数,相隔时间(毫秒))
clearTimeout(ti)

<script>
setTimeout(function(){

console.log('时间到了');
},5000)

// 清除延时函数
  let timer=setTimeout(回调函数,等待的毫秒数)
  clearTimeout(timer)

</script>

两种定时器对比：执行的次数

延时函数: 执行一次

间歇函数:每隔一段时间就执行一次,除非手动清除

案例五秒消失广告

<style>
  img{
position: fixed;
bottom: 0;
left: 0;
  }
</style>
<body>
  
  <img src="./ad.png" alt="">
  <script>
    // 获取元素
    const img=document.querySelector('img')
    setTimeout(function(){
      img.style.display='none'
    },5000)

同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。

异步

在做这件事的同时可以去做另一件事

他们的本质区别：这条流水线上各个流程的执行顺序不同。

location对象

href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转

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

hash 属性获取地址中的啥希值，符号 # 后面部分

reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新

<!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>
  <a href="#/my">我的</a>
  <a href="#/friend">关注</a>
  <a href="#/download">下载</a>
  <script>
    document.addEventListener('click',function(){
      // console.log(window.Location);

// location.href='http://www.baidu.com' //修改地址栏
console.log(location.search);
// 1.href 经常用href 利用js进行跳转
// console.log(location.href);
// location.hash 获取#后面的东西
console.log(location.hash);
//location.search 

// 方法
//重新加载当前的url
//  location.reload  刷新页面 ctrl+f5强制刷新 (true) 强制刷新
//加载指定的url
// location.assign('http://jd.com')  //会产生历史记录
//替换url
// location.replace('http://taobao.com') //不会产生历史记录
    })
    
  </script>
</body>
</html>

href 属性获取完整的 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>
  页面会在<span>${i}</span>秒后跳转到百度,或者点击<a href="http://www.baidu.com">立即跳转</a>
  <script>
    const a=document.querySelector('a')
    // 设置倒计时
    let i=5;
   const timer= setInterval(function(){
      i--
      document.querySelector('span').innerHTML=i
      if(i===0){
        clearInterval(timer)
            location.href="http://www.baidu.com"
      }  

    },1000)
  </script>
</body>
</html>

navigator对象

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

// 浏览器对象

// navigator

console.log(window.navigator.userAgent);

  <script>
    // navigator
    // 检测 userAgent（浏览器信息）
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const 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'
}
})()
// (function(){})()
// !function(){}()
  </script>

history对象

//历史记录

console.log(history.length);//访问过几个地址

// history.back()//返回前一个页面

//history.forward()//历史记录的下一个前进历史记录

history.gp(num) //负数表示回退上几个个历史记录

本地存储

作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在

特性：可以多窗口（页面）共享（同一浏览器可以共享）以键值对的形式存储使用

<script>
    //永久存储在本地 除非手动删除
    //本地存储只能存储字符串
    // 要存储一个名字 
  localStorage.setItem('键','值')
  localStorage.setItem('uname','张三')

  //获取方式 都加引号
  console.log(localStorage.getItem('uname'));
  // 3.删除本地存储 只删除名字
  localStorage.removeItem('uname')
  //4.修改
  localStorage.setItem('uname','red')
  
  </script>

查看方式

本地存储分类- sessionStorage

生命周期为关闭浏览器窗口

在同一个窗口(页面)下数据可以共享

以键值对的形式存储使用

用法跟localStorage 基本相同

存储复杂数据类型

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

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

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

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

  <script>
    const obj = {
      uname: 'pink',
      age: 18,
      gender: 'nv'
    }
    // 存
    // JSON.stringify(复杂数据类型)
    //1.JSON对象 属性和值有引号,而是引号统一是双引号
    // localStorage.setItem('userMessage',JSON.stringify(obj))//类型为JSON字符串
    // 取
    //   const re= localStorage.getItem('userMessage')
    //  const o=JSON.parse(re)
    //  console.log(o.uname);
    // //2. 吧json字符串转换为 对象
    // console.log(JSON.parse(localStorage.getItem('obj')));

    let arr = [{ uname: '张飞' }, { uname: '刘备' }, { uname: '吕布' }, { uname: '关羽' }]
    // 转换为字符串
    
    localStorage.setItem('userMessage',JSON.stringify(arr))
  const  re=JSON.parse(localStorage.getItem('mes'))
console.log(re);
     

    /*  // 复杂数据类型
      let arr = [{ name: '娃哈哈' }]
    // 转化为字符串
    const qq = JSON.stringify(arr)
    localStorage.setItem("wahaha", qq)

    // 再转化为复杂数据类型
    const aa = JSON.parse(qq)
    console.log(aa);    */
 
  </script>
</body>

</html>

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

取出

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

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

学习吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebAPI-Bom对象延时器 BOM操作本地存储

BOMBOM(Browser Object Model ) 是浏览器对象模型window对象是一个全局对象，也可以说是JavaScript中的顶级对象像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法window对象下的属性和方法调用的时候可以省略window定时器-延时函数JavaScri...
复制链接

扫一扫