win对象、本地存储

64 阅读3分钟

一、window对象

1.BOM

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

1649945221522.png

  • window是浏览器内置的全局对象,我们所学的所有Web APIs的知识内容都是基于window对象实现的
  • window对象包含了navigator、location、document、history、screen五个属性,即所谓的BOM(浏览器对象模型)
  • document是实现DOM的基础,它其实是依附于window的属性
  • 备注:依附于window对象的所有属性和方法,使用时可以省略window

2.延时器

  • JavaScript内置的一个用来让代码延迟执行的函数,叫setTimeout
  • 语法:
setTimeout(回调函数,等待的毫秒数)
复制代码
  • setTimeout仅仅只执行一次,所以可以理解为就是把一段代码延迟执行,平时省略window
  • 清除延时函数:
let timer = setTimeout(回调函数,等待的毫秒数)
clearTimeout(timer)
复制代码

结合递归函数可以使用setTimeout(延时器)实现setInterval(定时器)一样的功能

    <script>
        let index = 0
        function func(){
            console.log(++index)
            setTimeout(func,1000)
        }
        func()
    </script>
复制代码

两种定时器对比:

  • setInterval 的特征是重复执行,首次执行会延时

  • setTimeout 的特征是延时执行,只执行 1 次

  • setTimeout 结合递归函数,能模拟 setInterval 重复执

  • clearTimeout 清除由 setTimeout 创建的定时任务

    • 创建的定时器应该由clearInterval来清除
    • 创建的延迟器应该由clrearTimeout来清除

3.location对象

①:location的数据类型是对象,它拆分并保存了URL地址的各个组成部分

②:常用属性和方法

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

       <button>点击点击</button>
    
        <script>
            const btn = document.querySelector('button')
            btn.addEventListener('click',function(){
                location.href = "http://www.baidu.com"
                // location.href = location.href //刷新功能
            })
        </script>
    复制代码
    
  • search属性获取地址中携带的参数,符号?后面部分

    console.log(location.search)
    复制代码
    
  • hash属性获取地址中的哈希值,符号#后面的部分

    console.log(location.hash)
    复制代码
    
  • reload方法用来刷新当前页面,传入参数true时表示强制刷新

        <button>点击点击</button>
    
        <script>
            const btn = document.querySelector('button')
            btn.addEventListener('click',function(){
                location.reload = true  //强制刷新
            })
        </script>
    复制代码
    

4.navigator对象

navigator的数据类型是对象该对象记录了浏览器自身的相关信息

常用的属性和方法

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

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

复制代码

5.history对象

history的数据类型是对象,该对象与浏览器地址栏的操作相对应,如前进、后退、历史记录等

常用属性和方法

history对象方法作用
back()后退功能
forward()前进功能
go(参数前进或后退,若参数为1,前进一个页面,-1后退一个页面
    <a href="http://www.baidu.com">百度</a>
    <button class="forward">前进</button>
    <button class="back">后退</button>

    <script>
        const forward = document.querySelector('.forward')
        const back = document.querySelector('.back')

        forward.addEventListener('click',function(){
            // history.forward()
            history.go(1) //前进一个记录
        })

        back.addEventListener('click',function(){
            // history.back()
            history.go(-1) //后退一个记录
        })
    </script>
复制代码

二、本地存储

  • 数据存储在用户浏览器中
  • 设置、读取方便、甚至页面刷新不丢失数据
  • 容量较大,sessionStorage和localStorage约 5M 左右

1.localStorage

  • 生命周期永久生效,除非手动删除,否则关闭页面也会存在
  • 可以多窗口(页面)共享(同一浏览器可以共享)
  • 以键值对的形式存储使用
      本地存储 四个api 
      1localStorage.setItem(key,value)
      2localStorage.getItem(key)
      3 删除一个 localStorage.removeItem(key)
      4 清空 localStorage.clear();
复制代码

2.复杂数据类型存储

本地存储只能存储字符串,无法存储复杂数据类型,需要将复杂数据类型转换成JSON字符串,再存储到本地

JSON.stringify(复杂数据类型)

将复杂数据类型转换成JSON字符串,存储到本地存储中

        //数组转为字符串
        const strArr = JSON.stringify(arr)
        //本地存储
        localStorage.setItem('arr',strArr)
复制代码

JSON.parse(JSON字符串)

将JSON字符串转换成对象 取出 时候使用

//获取本地存储
const strArr = localStorage.getItem('arr')
let arr = []
//转换为数组
arr = JSON.parse(strArr)
复制代码

3.sessionStorage(了解)

  • 生命周期为关闭浏览器窗口
  • 在同一个窗口(页面)下数据可以共享
  • 以键值对的形式存储使用
  • 用法跟localStorage 基本相同

\