bom五大对象以及localstorage与sessionstorage

白昼苏打
416 阅读9分钟

1.window对象

是js中的顶级对象, 所有的全局方法和属性都是window对象的成员
  1. window对象有一个特殊的属性叫做top,是无法修改的 指向window本身 （变量名不能用top）
  2. 只要是window对象的成员，使用时一律可以省略window
  3. 声明变量最好不要跟dom里面的属性一致.例如 top ,left  一般使用驼峰命名
                    boxTop , oneTop    
    console.log(window)
    console.log(window.document === document) //true

2.window对象两个方法

        1. 打开窗口  window.open()
        2. 关闭窗口  window.close()
        
  打开窗口  window.open()
  document.querySelector('.btn1').onclick = function () {
        //第一个参数是url: 网址
        //第二个参数是target :新窗口 _blank(默认) _self :当前页面打开
        //第三个参数 新窗口尺寸:可以实现窗中窗功能
        //第四个参数 可选参数replace : 是否替换历史记录  true:替换   false:不替换
        window.open('http://www.baidu.com', '_blank', 'left=300,top=300,width=300,height=300')
    }
    
    
  关闭窗口  window.close()
  <input type="button" value="点我打开一个新窗口" id="open">
  <input type="button" value="点我有惊喜" id="close">
       document.getElementById('close').onclick = function (  ) {
    //参数就是你想要关闭的窗口对象，如果不写，默认就是关闭自己
    //1.这样写如果关闭的是顶级窗口谷歌和火狐会失效，如果失效可以使用下面这种写法
    //window.close( );
    /*2.谷歌火狐为了安全起见会拦截我们的代码，js代码只能关闭用js代码打开的界面，
    所以我们用js先假装在当前窗口打开自己，然后再关闭自己*/
    //这里的url不是空字符串""，而是一个空格字符串  " "
    window.open(" ","_self").close();
}

3.window对象事件

事件
        1. window.onload = function(){}
            * 加载事件 ： 页面DOM树 + 外部资源  加载完毕后执行
        2. window.onbeforeunload = function(){}
            * 关闭事件： 页面关闭之前执行（存储数据）
            
     window.onload:页面加载事件
     onload:页面DOM树 + 外部资源
    window.onload = function () {
        console.log('页面加载完毕');
        let box = document.querySelector('.box')
        console.log(box)
        console.log(box.scrollWidth, box.scrollHeight);
    }
    //window.onbeforeunload 页面关闭之前
    window.onbeforeunload = function () {
        console.log('页面关闭之前');
        //一般用于存储重要数据
    }

4. location对象

  location对象 ： 浏览器地址栏 url
        1.重点掌握： location.href = 'url'
        2.三个方法
            location.assign('url')  : 
            location.replace('url')  : 
            location.reload('url')  : 
            
 重点:修改location对象的href,可以实现网页跳转
    a标签的href用于无条件渲染.没有逻辑性,点我100%跳转
    location.href:用于js具有逻辑性跳转.例如:登录.(只有成功才会跳转)
    window.location.href = 'http://www.baidu.com'
案例
<button class="assign">assign跳转</button>
<button class="replace">replace替换</button>
<button class="reload">reload刷新</button>
 console.log(location);
  
        assign跳转
    document.querySelector('.assign').onclick = function () {
        //跳转网页:location.assign('url')与修改的location.href = 'url'作用完全一致,只是写法不同
        location.assign('http://www.baidu.com')
    }
    
        replace替换
    document.querySelector('.replace').onclick = function () {
        //替换网页:不能回退
        location.replace('http://www.baidu.com')
    }
    
        reload刷新
    document.querySelector('.reload').onclick = function () {
        //刷新网页:相当于f5
        location.reload()
    }

5.history对象

 history对象 ： 历史记录
        history.back() : 返回上一页
        history.forward() : 前进下一页
        history.go(数字) :跳转历史记录
    
        history.go(0)跳转自已,相当刷新
        history.go(-1)负数:回退: -1回退1页,-2回退2页
        history.go(1) 正数:前进   1前进1页,2前进2页
  
    console.log(window.history)

image.png

image.png

image.png

6.navigator对象

navigator对象 ： 用户信息
         用途：收集用户信息 
    console.log(navigator)//对象
    console.log(navigator.userAgent)//用户代理： 用户设备信息+浏览器信息
    console.log ( navigator.appVersion );//当前浏览器版本信息
    onsole.log ( navigator.platform );//当前浏览器的硬件平台
    
      使用场景1：判断当前用户的操作系统是32位还是64位
      谷歌和IE  64位显示WOW64    火狐显示Win64
if(navigator.userAgent.indexOf('WOW64') != -1 || navigator.userAgent.indexOf('Win64') != -1){
    console.log ( "64位" );
}else{
    console.log ( "32位" );
}

7.localstorage

     1.localStorage : 本地存储
        经典应用:免登录
    2.语法 ：   
        存数据 ：  localStorage.setItem('属性名','属性值')
        取数据 ：  localStorage.getItem('属性名')
        删数据 :   localStorage.removeItem('属性名')
        清空数据 : localStorage.clear()
    3.注意点 ：
       3.1   localStorage是永久存储的,数据存入硬盘中,除非手动删除,否则一直存在
       3.2 只能存储字符串,如果是其它类型,则编译器会自动帮你转成字符串后存储  
     localStorage 如何存储对象类型:使用JSON
存数据 ： localStorage.setItem('属性名','属性值')
    document.querySelector('.setItem').onclick = function () {
        localStorage.setItem('username', 'admin')
        localStorage.setItem('password', '123456')
        localStorage.setItem('nickname', '789')
        localStorage.setItem('age', 30)
    }

image.png

取数据 ： localStorage.getItem('属性名')
    document.querySelector('.getItem').onclick = function () {
        let username = localStorage.getItem('username')
        console.log(username);
    }

image.png

删数据 : localStorage.removeItem('属性名')
    document.querySelector('.removeItem').onclick = function () {
        localStorage.removeItem('age')
    }

image.png

清空数据 :localStorage.clear() 一次性删除所有数据
    document.querySelector('.clear').onclick = function () {
        localStorage.clear()
    }

image.png

8.sessionStorage

    1.sessionStorage : 会话存储
        * 经典场景： 页面间传值
       
    2.语法 ：   
        存数据 ：  sessionStorage.setItem('属性名','属性值')
        取数据 ：  sessionStorage.getItem('属性名')
        删数据 :   sessionStorage.removeItem('属性名')
        清空数据 : sessionStorage.clear()
    3.注意点 ：
       3.1   sessionStorage是临时存储的,只要页面一关闭,数据就会自动清空
       3.2 只能存储字符串,如果是其它类型,则编译器会自动帮你转成字符串后存储
localStorage与sessionStorage区别（异同点）
     相同点：作用一致,都是存储数据
     不同点： 存储方式不同
        localStorage:存储硬盘
        sessionStorage:存储内存
案例
<button class="setItem">存数据</button>
<button class="getItem">取数据</button>
<button class="removeItem">删除数据</button>
<button class="clear">清空数据</button>
存数据 ： sessionStorage.setItem('属性名','属性值')
    document.querySelector('.setItem').onclick = function () {
        sessionStorage.setItem('username', 'admin')
        sessionStorage.setItem('password', '123456')
        sessionStorage.setItem('nickname', '789')
        sessionStorage.setItem('age', 30)
    }
取数据 ： sessionStorage.getItem('属性名')
    document.querySelector('.getItem').onclick = function () {
        let username = sessionStorage.getItem('username')
        console.log(username);
    }
删数据 : sessionStorage.removeItem('属性名')
    document.querySelector('.removeItem').onclick = function () {
        sessionStorage.removeItem('age')
    }
清空数据 : sessionStorage.clear() 一次性删除所有数据
    document.querySelector('.clear').onclick = function () {
        sessionStorage.clear()
    }

9. 页面间传值 两个页面之间传值

页面A
 <body>
  <input type="text" placeholder="请输入用户名" class="username">
  <input type="text" placeholder="请输入密码" class="password">
  <button class="btn">下一页</button>

<script>
    /* A页面  ->  B页面
        A : 存储数据
        B : 读取数据
    */
    //点击下一页
    document.querySelector('.btn').onclick = function () {
        //获取用户数据
        let username = document.querySelector('.username')
        let password = document.querySelector('.password')
        //存入到sessionStorage
        sessionStorage.setItem('username', username.value)
        sessionStorage.setItem('password', password.value)
        //跳转到下一页
        location.href = './04-页面传值B.html'// (B页面的路径)
    }
页面B
<body>
  <input type="text" placeholder="请输入手机号" class="phone">
  <input type="text" placeholder="请输入收获地址" class="address">
  <button class="btn">注册</button>

<script>
      //点击下一页
    document.querySelector('.btn').onclick = function () {
        //从sessionStorage获取帐号和密码
        let username = sessionStorage.getItem('username')
        let password = sessionStorage.getItem('password')
        //从表单上获取
        let phone = document.querySelector('.phone')
        let address = document.querySelector('.address')
        //从控制打印
        console.log(username, password, phone.value, address, value);
    }
</script>

image.png

10.JSON格式

    1.JSON是什么: 是一种数据格式，本质字符串
        JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
    2.JSON作用 :  解决数据        跨平台数据传输
     在实际开发中,我们前端要经常与服务器(后端)进行数据交互。而前端与后端编程语言不同。
   前端： js , 后端： java、c++ 、 php 、 python 、 .net 、 c# 、 go 等等
   不同的编程语言数据类型不一致。无法互通的 。
    为了可以让不同的编程语言之间可以进行数据交互，
    后来人们发明了一种所有编程语言都通用的格式 ： 叫做 JSON 。
    3.JSON语法 : 
        3.1  js→json(前端发给后台)   let json = JSON.stringify(js对象)
        3.2  json→js(后台发给前端)   let js = JSON.parse(json字符串)
js对象
    let jsObj = {
        name: '张三',
        age: 20,
        hobby: ['上课', '学习', '睡觉']
    }
json字符串
    let jsonStr = '{"name":"张三","age":"20","hobby":["上课", "学习", "睡觉"]}'
js→json(前端发给后台) let json = JSON.stringify(js对象)
    let json = JSON.stringify(jsObj)
    console.log(json);
json→js(后台发给前端) let js = JSON.parse(json字符串)
    let js = JSON.parse(jsonStr)
    console.log(js);

image.png

11.JSON与js互转

 4.1 json转js : JSON.parse(json对象)
 4.2 js转json :  JSON.stringify(js对象)
案例
<button class="btn1">点我存储</button>
<button class="btn2">点我读取</button>
<script>
   let json = '{"name":"admin","password":"123456"}'
    console.log(JSON.parse(json))

   let js = {
     name: 'admin',
     password: 123456
   }
    console.log(JSON.stringify(js))

    document.querySelector('.btn1').onclick = function () {
     //存储： 将js对象转成json格式字符串
     localStorage.setItem('user', JSON.stringify(js))
   }

document.querySelector('.btn2').onclick = function () {
  //读取： 将读取到的json格式字符串转成对象
  //1.先读取json格式
  let json = localStorage.getItem('user')
  //2.然后转成js对象
  let js = JSON.parse(json)
  console.log(js)
}

image.png

<body>
    <button class="btn1">存对象</button>
    <button class="btn2">取对象</button>
<script>
    /* 
    json -> js :   let jsObj = JSON.parse( json格式 )
    js -> json :   let jsonStr = JSON.stringify( js对象 )
    */  

    let obj = {
        name:'ikun',
        age:30,
        sex:'男'
    }

    //1.存对象
    document.querySelector('.btn1').onclick = function(){
        // //(1)先js->json
        // let json =  JSON.stringify(obj)
        // //(2)存json
        // localStorage.setItem('user',json)

        //简写一行 : 先转后存
        localStorage.setItem('user', JSON.stringify(obj) )
    }

    //2.取对象
    document.querySelector('.btn2').onclick = function(){
        // //(1)取json
        // let json = localStorage.getItem('user')
        // //(2)后json->js
        // let js = JSON.parse(json)
        // console.log(js)

        //简写一行 ： 先取后转
        let js = JSON.parse( localStorage.getItem('user') )
        console.log( js )
    }

image.png

image.png

12.offset,scroll,client获取尺寸与位置

<style>
* {
  margin: 0;
  padding: 0;
}

div {
  width: 150px;
  height: 150px;
  background-color: pink;
  overflow: auto;
  padding: 10px;
  border: 10px solid red;
  margin: 100px;
  
}
</style>
</head>

<body>
 <div class="box">
我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
我有很多很多的内容哦 我有很多很多的内容哦 我有很多很多的内容哦
</div>

 <script>
/*三大家族 : 获取尺寸与位置

1.offset家族 :  获取元素 ‘自身’ 宽高和位置
  offsetWidth/offsetHeight :  自身宽高 = width + padding + border
  offsetLeft/offsetTop : 自身左/上 外边框  到定位父元素 

2.scroll家族: 获取元素 ‘内容’ 宽高和位置
  scrollWidth/scrollHeight : 内容宽高
  scrollLeft/scrollTop : 滚动条滚动距离

3.client家族: 获取元素 ‘可视区域’ 宽高和位置
  clientWidth/clientHeight :  '可视区域'宽高
  clientLeft/clientTop : '可视区域'位置（左边框和上边框宽度）
*/

let box = document.querySelector('.box')
//1.offset家族 :  获取元素 ‘自身’ 宽高和位置
console.log(box.offsetWidth, box.offsetHeight)
console.log( box.offsetLeft,box.offsetTop )

//2.scroll家族 :  获取元素 ‘内容’ 宽高和位置
console.log(box.scrollWidth, box.scrollHeight)
console.log( box.scrollLeft,box.scrollTop )

//3.client家族 :  获取元素 ‘内容’ 宽高和位置
 console.log(box.clientWidth, box.clientHeight)
console.log( box.clientLeft,box.clientTop )

image.png

13.如何获取页面html的滚动距离

   1.页面滚动事件:  window.onscroll
        2.页面滚动距离:html→  document.documentElement.scrollTop
    */

    //1.给整个页面注册滚动条事件
    window.onscroll = function () {
     console.log('滚动条移动')
     console.log(document.documentElement.scrollLeft, document.documentElement.scrollTop)

    }

image.png

14.固定顶部导航

<style>
    * {
        margin: 0;
        padding: 0
    }

    img {
        vertical-align: top;
    }

    .main {
        margin: 0 auto;
        width: 1000px;
        margin-top: 10px;
    }

    .fixed {
        position: fixed;
        top: 0;
        left: 0;
    }
</style>

 </head>

<body>

<div class="top" id="topPart">
<img id="pic" src="    ">
</div>

<div class="nav" id="navBar">
<img src="    ">
</div>

<div class="main" id="mainPart">
<img src="    ">
</div>

<script>
/* 思路
1. 注册页面滚动事件 : 判断 页面滚动距离 与  top盒子高度 关系
    (1)页面滚动高度 >  top高度 : 设置nav为固定定位
    (2)页面滚动高度 < top高度 : 设置nav为静态定位(标准流) 
*/

let topPart = document.querySelector('.top')
let nav = document.querySelector('.nav')
let main = document.querySelector('.main')

//1.页面滚动条事件
window.onscroll = function(){
    //2.获取页面滚动高度
    let h = document.documentElement.scrollTop

    //判断 页面滚动高度 >  top高度
    if( h >= topPart.offsetHeight ){
        nav.style.position = 'fixed'
        nav.style.top = '0px'
        //固定定位会脱标，后面元素就会瞬间顶上去。 解决方案：给后面盒子margin撑开脱标的高度
        main.style.marginTop = 10 + nav.offsetHeight + 'px'
    }else{
        nav.style.position = 'static'
        //margin恢复原来的
        main.style.marginTop = '10px'
    }
}

image.png

15.client响应式布局

    <script>
    /* client家族应用 ： 响应式布局
    
    1.响应式布局 ： 一个页面适配多个不同设备 
    2.响应式布局设备 ：
        大PC        ：  >= 1200px
        小pc,大平板  ：  992px - 1200px
        平板        ： 768px - 992px
        手机        :  < 768px
    3.响应式布局原理
        3.1 监听设备视口大小 ： 媒体查询、clientWidth
        3.2 根据视口大小加载不同的样式
    */


    //1.注册页面尺寸变化事件 :  window.onresize
    window.onresize = function(){
        //2.获取页面可视区域（页面视口）
        let w = document.documentElement.clientWidth
        let h = document.documentElement.clientHeight
        console.log(w,h)

        if( w >= 1200 ){
            document.body.style.backgroundColor = 'red'
        }else if( w >= 992 ){
            document.body.style.backgroundColor = 'orange'
        }else if( w >= 768 ){
            document.body.style.backgroundColor = 'yellow'
        }else{
            document.body.style.backgroundColor = 'green'
        }


        //横竖屏
        if( w>h ){
            //横屏
            document.body.style.backgroundColor = 'cyan'
        }else{
            document.body.style.backgroundColor = 'purple'
        }
        
    }

image.png

avatar
文章
阅读
粉丝