WebAPIs-06 (window中的常见对象方法/localstorage与sessionstorage)

最新推荐文章于 2023-07-05 09:11:08 发布

A-sleep

最新推荐文章于 2023-07-05 09:11:08 发布

阅读量381

点赞数 3

分类专栏： JavaScript 基础篇 WebApis 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/FellAsleep/article/details/122020463

版权

JavaScript 基础篇同时被 2 个专栏收录

14 篇文章 2 订阅

订阅专栏

WebApis

8 篇文章 0 订阅

订阅专栏

1.window对象介绍：( 当前浏览器窗口)

1.window是js中的顶级对象：所有的全局函数、全局对象都是window对象的方法
例如 document 、 alert() 、 setInterval() 、setTimeout() 等等
2.window对象的成员(属性+方法),使用时都可以省略window
3.window对象有一个特殊的属性叫做top, 指向window对象本身。
细节： top这个变量名是无法被覆盖的，就算你自己声明top，它还是指向window.
* 所以我们声明变量的时候，最好不要叫top. 平时声明变量最好添加前缀，使用驼峰命名
在这里插入图片描述

2.window对象两个方法

window.open() : 打开新窗口 _blank 窗中窗
window.close() : 关闭窗口

 document.querySelector('.open').onclick = function () {
       /*
        * @param 第一个参数：URL  要打开的窗口网址
         * @param 第二个参数：类似于a标签的target属性，是替换当前窗口还是新开一个窗口
         * @param 第三个参数：新窗口特征：大小和位置等(新窗口才有效_blank)
         * @param 第四个参数：布尔类型  true/false:把新开的窗口加入/不加入到浏览器历史记录
         * @return 新打开的window对象*/  
    window.open('http://www.itheima.com','_blank','left=200px,top=200px,width=300px,height=300px')
      }

      document.querySelector('.close').onclick = function () {
          window.close()
      }

3.(重点)window.onload事件

window.onload事件:需要等页面和外部资源加载完毕之后才开始执行

应用场景：可以让你的js在任何位置都可以获取页面元素, js代码如果写在body上方，就会导致无法获取dom元素.因为代码从上往下解析，如果js写在body上方就会导致解析js代码的时候，body里面的元素还没有渲染

<style>
        .box {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>

    <div class="box">
        <img src="https://picsum.photos/1920/1080?random=1" alt="">
        <img src="https://picsum.photos/1920/1080?random=2" alt="">
        <img src="https://picsum.photos/1920/1080?random=3" alt="">
        <img src="https://picsum.photos/1920/1080?random=4" alt="">
        <img src="https://picsum.photos/1920/1080?random=5" alt="">
    </div>

</body>
<script>

    let box = document.querySelector('.box')
    console.log(box.offsetHeight, box.offsetWidth);//200  200
    console.log(box.scrollHeight, box.scrollWidth);//200  200


    // window.onload事件:需要等页面和外部资源 加载完毕之后 才开始执行
    window.onload = function () {
        //如果js写在head里面,将会无法获取dom元素
        //原因:js代码从上往下解析 执行到这里 dom还没有加载
        //onload事件:dom树 + 外部资源 加载完毕后执行
        let box = document.querySelector('.box')
        console.log(box.offsetHeight, box.offsetWidth);//200   200
        console.log(box.scrollHeight, box.scrollWidth);//5416 1920
        alert('测试')//等五张图片加载完毕后 才弹出对话框
    }

</script>

4.(重点)location对象.属性:

1.使用最多的属性: location.href //可以得到完整的地址
2.获取域名: console.log(location.hostname);
3.获取参数:console.log(location.search); //网络参数
location.search //可以得到 — ?后面的参数
location的数据类型是对象,它拆分并保存了URL地址的各个组成部分

1.location.href
/* 作用 : js跳转网页：修改location对象的href属性来实现的 */

location.href = ‘http://www.baidu.com’
与a标签的区别 :让跳转具有逻辑性

<body>
账号: <input class="uname" type="text" name="" id="">
密码: <input class="password" type="text" name="" id="">
    <button>提交</button>
<script>
document.querySelector('button').onclick = function () {
            let username = document.querySelector('.uname').value
            let password = document.querySelector('.password').value

            if (username == 'admin' && password == '123456') {
                window.location.href = 'http://www.baidu.com'
            } else {
                alert('用户名或密码错误')
            }
        }
 </script>
</body>

5.location对象的三个方法

location.assign() : 跳转网页，等价于window.location.href = ‘网址’

location.replace() : 替换网页

location.reload() : 刷新网页

<body>
    <button class="assign">assign 跳转网页</button>
    <button class="replace">replace 替换网页</button>
    <button class="reload">reload 刷新网页</button>
    <script>
        /*location对象三个方法
        
        location.assign() : 跳转网页  ， 等价于   window.location.href = '网址'
        location.replace() : 替换网页
        location.reload()  : 刷新网页
        */
        document.querySelector('.assign').onclick = function () {
            //跳转 : 与location.href一模一样 只是写法不同
            location.assign('http://www.baidu.com')
        }
        document.querySelector('.replace').onclick = function () {
            //替换网页:无法回退
            location.replace('http://www.baidu.com')
        }
        document.querySelector('.reload').onclick = function () {
            //刷新网页,相当于F5
            location.reload('http://www.baidu.com')
        }
    </script>
</body>

6.(重要)history对象

history对象主要用于记录你当前窗口的历史记录

主要作用就是前进和后退网页（相当于浏览器的左上角前进后退按钮功能）
history.forward():前进
history.back():后退

 <script>

//可以在控制台 依次输入 location.href = '跳转链接'之后  再输入history.back()方法演示

        /*	 history : 历史记录 
                history.back() : 回退上一页  
                history.forward() : 前进下一页
                history.go( 数字 ) 

                正数 ： 前进几页   history.go(2) : 前进2页
                负数 ： 回退几页   history.go(-2) : 回退2页 

       */
       
       console.log(history)
</script>

7.navigator对象

/* navigator : 包含当前浏览器的信息 (浏览器型号版本，用户操作系统信息)

工作中应用场景：用户信息统计（统计我这个网站平台的用户群体分布，什么浏览器，windows什么版本等）
console.log(window.navigator) //对象
console.log(navigator.userAgent)//字符串类型：用户代理获取具体详细信息手机/电脑型号…

        /* navigator : 浏览器信息 (浏览器型号 版本，用户操作系统信息)
        应用： 用户信息统计
		*/
        console.log(window.navigator) //对象
        console.log(navigator.userAgent)//字符串类型：用户代理  获取具体详细信息 手机/电脑型号...

8.(重点)localstorage与sessionstorage

localStorage与sessionStorage的异同点：

相同点：功能一致，都是存储数据
不同点：存储方式不同
localStorage : 硬盘存储 (永久存储)
sessionStorage : 内存存储 (临时存储)

8.1 localStorage:本地存储

1.本地存储将数据存储到浏览器

2.语法:

存数据：localStorage.setItem(‘属性名’,‘属性值’)
取数据：localStorage.getItem(‘属性名’)
删数据：localStorage.removeItem(‘属性名’)
清空数据：localStorage.clear()

3.注意点:

3.1 存储的数据只能是字符串类型。如果是其他数据类型则会自动调用toString()方法转成字符串
3.2 永久存储。除非自己删，否则一直存在于浏览器

4.应用场景:免登陆
在这里插入图片描述

<body>
    <div>1.localStorage: 本地存储 将数据存储到浏览器</div>
    <button class="btn1">存数据setItem</button>
    <button class="btn2">取数据getItem</button>
    <button class="btn3">删数据removeItem</button>
    <button class="btn4">clear清空数据</button>
    <script>
        /*  1.localStorage: 本地存储   将数据存储到浏览器    
                2.语法:
                local 本地 Storage 存储  set设定  Item项目
                存：  localStorage.setItem('属性名', '属性值')
                取：  localStorage.getItem('属性名')
                删：  localStorage.removeItem('属性名')
                清空： localStorage.clear()
        
            3.注意点
            3.1 存储的数据只能是字符串类型。如果是其他数据类型则会自动调用toString()方法转成字符串
            3.2 永久存储。除非自己删，否则一直存在于浏览器
        */
        document.querySelector('.btn1').onclick = function () {
            localStorage.setItem('uname', '张三')//存储
            localStorage.setItem('password', '123456')
            localStorage.setItem('age', 18)
            localStorage.setItem('nickname', ['测试', '测试'])//存储的数据只能是字符串类型。如果是其他数据类型则会自动调用toString()方法转成字符串
        }

        document.querySelector('.btn2').onclick = function () {
            let a = localStorage.getItem('uname')
            let b = localStorage.getItem('password')

            console.log(a, b);// 张三 123456
        }
        document.querySelector('.btn3').onclick = function () {
            localStorage.removeItem('age')//删除
        }
        document.querySelector('.btn4').onclick = function () {
            localStorage.clear()//清空
        }

    </script>

8.2 sessionStorage:临时存储

1.sessionStorage相当于短命版的localStorage，其他用法完全一致
2.两者区别：存储方式不同
localStorage：永久存储（存在硬盘，HP值无限）
sessionStorage：临时存储（存在内存，HP值一条命，只要浏览器关闭就没有了）

9. JSON解决数据跨平台传输

1.localStorage如何存储其他类型数据：使用JSON格式存储

存：转成json格式字符串来存储
取：取出json格式后转成js对象

2.JSON学习

什么是JSON？： JSON是一种数据格式，本质是字符串
JSON作用：解决数据跨平台传输

3.JSON和js互转：

JSON转JS对象 : 获取后台数据之后，必须要把json转成js才可以正常使用------------------------JSON.parse(json)
JS对象转JSON : 我们前端发给后台的数据不能直接发js，需要转成json------------------------JSON.stringify(js)

 let js = { name: '张三', age: 18, eat: [1, 2, 3] }
 let json = ' {"name":"张三","age":"18","hobby":["学习","上课"]} '

      //(1)JSON->JS  : 把json字符串转成js对象
      let jsObj = JSON.parse(json)
      console.log(jsObj)
      //(2)JS->JSON : 把js对象转成json格式字符串
      let jsonStr = JSON.stringify(js)
      console.log(jsonStr)

      /* localStorage存储其他类型的思路 */
      
      //1.存 ： 要把js对象转成json格式存储
      //(1)把js转成json  (2)存储json格式
      localStorage.setItem('user', JSON.stringify(js) )
      //2.取 ： 先取出json格式数据
      //   let jsonData = localStorage.getItem('user')
      //转成js对象
      //   let jsData = JSON.parse( jsonData )
      
      //(1)取出json格式数据 (2)转成js对象
      let jsData = JSON.parse( localStorage.getItem('user') )
      console.log(jsData)

A-sleep

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebAPIs-06 (window中的常见对象方法/localstorage与sessionstorage)

1.window对象介绍：( 当前浏览器窗口)1.window是js中的顶级对象：所有的全局函数、全局对象都是window对象的方法例如 document 、 alert() 、 setInterval() 、setTimeout() 等等2.window对象的成员(属性+方法),使用时都可以省略window3.window对象有一个特殊的属性叫做top, 指向window对象本身。细节： top这个变量名是无法被覆盖的，就算你自己声明top，它还是指向window.* 所以我们声明变量的时
复制链接

扫一扫