Web APIs 5:Window对象(BOM)+本地存储

Web APIs 5(BOM:Window对象+本地存储)

1.BOM(浏览器对象模型)(后面几个对象都为BOM对象)
  • BOM对象包含:navigator、location、document(DOM对象)、history、screen
  • BOM是一个全局对象,即JS中的顶级对象,alert、console.log都是window的属性
  • 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
  • window对象下的属性和方法调用时可以省略window
2.定时器------延时函数
  • setTimeout(回调函数,等待的毫秒数):只执行一次,平时省略window,等待时间先执行后续代码
  • 清除延时函数:
    • let 定时器编号 = setTimeout(回调函数,等待时间)
    • clearTimeout(定时器编号)
  • 延时函数与间歇函数的区别:执行次数的不同
3.JS执行机制
  • JS本身是单线程,同一时间只能做一件事,任务需要排队,前一个任务结束,后一个任务才能继续

  • 单线程遇到类似定时器这种耗时任务,会出现阻塞 ------利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程。于是JS中出现同步,异步

  • 同步异步

    • 同步:一件事做完再做另一件事
    • 异步:在做一件事的同时,由于花费时间较长,可以去处理其他事情
    • 同步任务:在主线程上执行,形成执行栈
    • 异步任务:通过回调函数实现,常见的异步任务有普通事件(click、resize),资源加载(load、error),定时器(setInterval、setTimeout)。异步任务添加到**任务队列(消息队列)**中。
  • 执行过程(事件循环)

    • JS主线程先执行执行栈中的同步任务
    • 异步API将准备好的异步任务推入任务队列
    • 一旦执行栈中的所有同步任务执行完毕 ,系统会依次读取任务队列中的异步任务 ,再进入执行栈开始执行
  • eg:

    js 复制代码
      //执行结果是 111 333 222
        console.log(111);
        setTimeout(function () {
          console.log(222);
        }, 0)
        console.log(333);
  • 事件循环event loop简要概括:主线程不断的从任务队列获取任务,执行任务,再获取再执行,这种机制就成为事件循环

4.location对象
  • 常用属性:

    • href:获取完整的URL地址,对其赋值时用于地址的跳转
    js 复制代码
    //运行后页面跳转到百度
        console.log(location.href);
        location.href = 'http://www.baidu.com'
    • search:获取地址中携带的参数(符号?后面部分)
    js 复制代码
     console.log(location.search)
    • hash:获取地址中的哈希值(符号#后面部分):页面不跳转而是更换组件时使用
    js 复制代码
    console.log(location.hash)
  • 常用方法:reload():刷新当前页面,传入参数true时强制刷新

    js 复制代码
    <button class="reload">点击刷新</button>
      <script>
        let btn = document.querySelector('.reload')
        btn.addEventListener('click', function () {
          location.reload(true)
        })
5.navigator对象
  • 作用:记录浏览器自身的相关信息
  • 常用属性与方法:
    • userAgent:检测浏览器的版本和平台
6.history对象
  • 作用:管理历史记录,该对象与浏览器地址栏的操作相对应
  • 常用属性与方法:
    • back():后退功能
    • forward():前进功能
    • go(参数):前进后退,若参数为1 ,则前进1个页面,若是-1,则后退1个页面
js 复制代码
 <button>后退</button>
  <button>前进</button>
  <script>
    const back = document.querySelector('button:first-child')
    const forward = back.nextElementSibling
    back.addEventListener('click', function () {
      history.back()
    })
    forward.addEventListener('click', function () {
      history.forward()
    })
  </script>
7.本地存储
  • 介绍:存储在用户浏览器中,读取、设置、甚至页面刷新不丢失数据,容量较大,sessionStorge和localStorage约5M左右

  • localStorage:将数据永久存储在本地,除非手动删除

    • 特点:可以多窗口共享,以键值对的形式存储使用
    • 语法:()
      • 存储数据:localStorage.setItem(key,value)
      • 读取数据:localStorage.getItem(key)
      • 删除数据:localStorage.removeItem(key)
    js 复制代码
      //存
      localStorage.setItem('uname', '小小怪')
      //取
      let uname = localStorage.getItem('uname')
      console.log(uname);
      //改  key值在表中有的话就改变值,没有就新增
      localStorage.setItem('uname', '小小倩')
      //删除
      localStorage.removeItem('uname')
  • sessionStorage

    • 特点:生命周期为关闭浏览器窗口 ,在同一个窗口下共享,其他同locaStorage
    • 语法也同localStorage
  • 本地存储存储复杂数据

    • 方法:将复杂数据类型转换为JSON字符串,再存储到本地
    • 语法:
      • 对象转字符串:JSON.stringify(复杂数据类型)
      • 字符串转对象:JSON.parse(键)
    js 复制代码
     <script>
        const obj = {
          uname: '小小怪',
          age: 12,
          gender: '女'
        }
        //存 对象转字符串
        localStorage.setItem('obj', JSON.stringify(obj))
        //取 字符串转对象
        let n = JSON.parse(localStorage.getItem('obj'))
        console.log(n);
      </script>
相关推荐
IT_陈寒10 分钟前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start27 分钟前
前端基础一、HTML5
前端·html·html5
鬼谷中妖36 分钟前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A41 分钟前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER43 分钟前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父1 小时前
前端速通—CSS篇
前端·css
pixle01 小时前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏
ssf19871 小时前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端
@PHARAOH1 小时前
WHAT - 前端性能指标(加载性能指标)
前端
尘世中一位迷途小书童1 小时前
🎨 SCSS 高级用法完全指南:从入门到精通
前端·css·开源