BOM相关内容

window主要内容,常用方法

        load resize scroll        setTimeout       setInterval

        document history navigator 定时器 本地存储 alert  prompt ...

        var定义的变量会挂载到 window对象

          function f() {}        函数也会挂载到 window对象

定时器 setTimeout        当时间一到，代码执行一次结束

        setTimeout(function(){},1000)

location

        location对象与地址相关的信息

        location.href        完整地址

        location.search        查询参数 地址？后面的参数  ?k=v&k=v

        location.hash        '#....'

        location.reload(true) // true 强制刷新

navigator

        navigator 与 浏览器相关的信息

        navigator.userAgent        记录了浏览器的版本与平台

识别移动端和pc端

        

 PC端  移动设备 Android / ios
      if(navigator.userAgent.indexOf('Android') !== -1)  {
        console.log('Android 设备');
      } else if(navigator.userAgent.indexOf('iPhone')  !== -1) {
        console.log('苹果手机 设备');
      } else {
        console.log('PC');
      }

const isIphone = navigator.userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
      const isAndriod = navigator.userAgent.match(/(Andriod)\s[\d.]+/)
      if (isAndriod || isIphone) {
        location.href = 'http://m.jd.com'
      } else {
        location.href = 'http://www.jd.com'
      }

history

        history.forward()        前进

        history.back()                后退

        history.go(1)        ()里可以填正负整数,正数前进,负数后退,数值表示前进后退的步数

<button>前进</button>
    <button>后退</button>
    <script>
      // history
      // A->B->C
      const btns = document.querySelectorAll('button')
      btns[0].onclick = function () {
        // history.forward()
        history.go(1)
      }

      btns[1].onclick = function () {
        history.back()
        // history.go(-1)
      }

      console.log(localStorage.getItem('username'))
    </script>

本地存储       

        本地存储->数据持久化 特点 存储一些5M以内的 简单高频使用的数据(字符串)

         localStorage 永久存储

        localStorage.setItem(' ',' ')        存

        localStorage.getItem(' ')        取

        localStorage.removeItem(' ')        删

        sessionStorage 会话级别存储 关闭浏览器删除

        sessionStorage.setItem(' ',' ')        存

        sessionStorage.getItem(' ')        取

        sessionStorage.removeItem(' ')        删

console.log(window)
      // 本地存储->数据持久化 特点 存储一些5M以内的 简单高频使用的数据(字符串)
      // 存 localStorage 永久存储
      localStorage.setItem('username', 'zhangsan')
      // //  取
      // console.log(localStorage.getItem('username'))
      // // 删
      // localStorage.removeItem('username')

      // sessionStorage 会话级别存储 关闭浏览器删除
      // 存
      sessionStorage.setItem('username', 'zhangsan')
      //  取
      console.log(sessionStorage.getItem('username'))
      // 删
      sessionStorage.removeItem('username')

        复杂类型的存储

        用JSON.stringify()        转字符串存

        用JSON. parse()        取    

  

const obj = {
        id: 10001,
        name: '赵曼',
        score: 80,
      }

      //localStorage.setItem('zhaoman', obj) // 不能直接存储引用类型 '[object Object]'
      // console.log(typeof localStorage.getItem('zhaoman'))

      //
      console.log(JSON.stringify(obj)) // 字符串形式的对象
      // 对象->字符串
      localStorage.setItem('zhaoman', JSON.stringify(obj))
      // JSON.parse() 字符串->对象
      console.log(JSON.parse(localStorage.getItem('zhaoman')))