js- bom

 

bom浏览器模型，window是js最顶级对象 其设置了几个功能对象如上图

在全局环境下声明的变量、函数都是window的属性或方法；

window的属性和方法无需window.调用

1.定时器

// setTimeout：延时函数可以在设定的时间后工作
      console.log('时间到了')
    }, 2000)

// let id = setInterval，定时器可在设定时间后工作且无限循环
setInterval(function () {
      console.log('时间到了')
    }, 2000)

// setInterval和setTimeout都产生一个id用来清理定时器
    clearInterval(id)

2.location对象

用来获取URL 地址的各个组成部分

navigator对象

3.histroy对象

用来控制浏览器的历史记录

4. 本地存储

以前我们页面写的数据一刷新页面就没有了,本地存储解决此问题

类型	是否自动清除	是否可跨窗口共享数据
localStorag	是，必须手动清除	是
sessionStorag	否，页面关闭自动清理	否

读写方法

<script>
    // 1. 要存储一个名字  'uname'， 'pink老师'
    // localStorage.setItem('键'，'值')
    localStorage.setItem('uname', 'pink老师')
    // 2. 获取方式  都加引号
    console.log(localStorage.getItem('uname'))
    // 3. 删除本地存储  只删除名字
    // localStorage.removeItem('uname')
    // 4. 改  如果原来有这个key，则是改，如果么有这个key是增
    localStorage.setItem('uname', 'red老师')

    // 我要存一个年龄
    // 2. 本地存储只能存储字符串数据类型
    localStorage.setItem('age', 18)
    console.log(localStorage.getItem('age')) //'18'
  </script>

存储复杂类型数据

<script>
    const obj = {
      uname: 'pink老师',
      age: 18,
      gender: '女'
    }
    // // 存储 复杂数据类型  无法直接使用
    // localStorage.setItem('obj', obj)  [object object]    
    // // 取
    // console.log(localStorage.getItem('obj'))

    // 1.复杂数据类型存储必须转换为 JSON字符串存储
    localStorage.setItem('obj', JSON.stringify(obj))
    // JSON 对象  属性和值有引号，而是引号统一是双引号
    // {"uname":"pink老师","age":18,"gender":"女"}
    // 取
    // console.log(typeof localStorage.getItem('obj'))
    // 2. 把JSON字符串转换为 对象
    const str = localStorage.getItem('obj') // {"uname":"pink老师","age":18,"gender":"女"}
    console.log(JSON.parse(str))
  </script>