BOM

获取浏览器窗口的尺寸

获取的是可见的（你目前窗口的），不是你设置的宽高

浏览器的弹出层

alert 弹出一个提示框

prompt 在浏览器弹出一个输入框

confirm 弹出一个询问框

浏览器的地址信息

herf

reload

可以实现跳转页面或重新加载的效果

重新加载的那个不要写在全局，不然会一直处在刷新状态

浏览器的常见事件

onload

包含图片，视频，dom

resize

onscroll 滚动条

如何获得浏览器滚动距离

body适用于所有浏览器兼容性解决方案（或）

可应用于黏性定位

联想截图_20231103214551.png 需要对你body里的按钮进行事件的设置

对button事件的两个方法：

两个数字代表x轴和y轴联想截图_20231103215249.png

浏览器打开标签页

a链接和location.herf=”“都是在当前页面跳转

在空白页面打开新的内容：window.open（”“）

联想截图_20231103215838.png window.close（”“） 删除的是原来页面

浏览器的历史记录

history.back或者history.go（负数）

history.forword或者history.go（正数）

它生效的前提是有历史页面

放在button的事件里

浏览器本地存储

存在浏览器的某个地方，可用于记住用户名密码之类的

1.localStorage （永久存储）

2.sessionStorage（会话存储即临时存储，关了页面就丢失）联想截图_20231103231314.png 存储联想截图_20231103231839.png

检查是否生效，在检查里面的application，如果有，说明存了。但是这个只有自己的电脑可以取出来

联想截图_20231103231908.png

存取删和全部删掉（改的话直接改就行）

TIP:存的话只能存字符串，别的（数字，数组，对象）都不行。要不你就用json转成字符串，JSON.parse（） 全部删掉

记住用户名密码案例

 <!-- 前端部分 -->
    <div>用户名
        <input type="text" id="username">
    </div>
    <div>密码
        <input type="password" id="userpassword">
    </div>
    <button id="login">登录</button>

    <script>
        //每次进来之前先获取用户名和密码，进行存储（自动填上的效果）
        //这里可以先if判断一下之前有没有存过，但是不判断也可以，input比较宽容不会报错
        //这里只是获取了，但是无法显示
        var uservlaue = localStorage.getItem("username")
        var passvalue = localStorage.getItem("userpassword")

        //从localstora中取取出来给前端附上值
        //必须写上这个，也就是取出来，才会真正记住用户名密码
        username.value = uservlaue
        userpassword.value = passvalue



        login.onclick = function () {
            //必须加.value，不加的话打印的就是你前端里叫这个id的代码内容
            //这个打印，只是将你的value值打在控制台上
            console.log(username.value, userpassword.value)

            //这个才是把你的信息存到localstorage里（不然里面就是空）
            //这个需要写在你这个onclick事件的里面
            localStorage.setItem("username", username.value)
            localStorage.setItem("userpassword", userpassword.value)



        }
    </script>

JS学习之—BOM（67~76）

BOM