其他分享
首页 > 其他分享> > BOM五大对象

BOM五大对象

作者：互联网

01-BOM浏览器对象模型

1.1-BOM与DOM介绍

1.2-window对象

1.3-案例：页面间传值

页面A

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input class="name" type="text" placeholder="请输入用户名"><br>
    <input class="password" type="text" placeholder="密码"> <br>
    <button class="btn">下一步</button>
    <script>
        // 获取按钮
        document.querySelector('.btn').onclick = function () {
            // 获取用户输入的数据存到内存中   获取用户输入数据
            let name = document.querySelector('.name').value
            let password = document.querySelector('.password').value
            
            // 将数据临时存到内存中
            sessionStorage.setItem('name', name)
            sessionStorage.setItem('password', password)
            // 跳转B页面
            location.href = './页面传值B.html'
        }
    </script>
</body>

</html>

页面B

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input class="email" type="text" placeholder="请输入邮箱"><br>
    <input class="phone" type="text" placeholder="请输入电话"><br>
    <button class="btn">注册</button>
    <script>
        // 获取按钮
        document.querySelector('.btn').onclick = function () {
            // 获取用户输入的数据 和A页面的数据
            let email = document.querySelector('.email').value
            let phone = document.querySelector('.phone').value

            // 获取内存中的用户所输入的数据                 
            let name = sessionStorage.getItem('name')
            let password = sessionStorage.getItem('password')

            // 在控制台打印输入数据
            console.log(name, password, email, phone);
        }
    </script>
</body>

</html>

03-localStorage如何存储对象类型数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btn">存数据</button>
    <button class="btn1">取数据</button>
    <script>
        let obj = {
            name: '陈爽',
            age: '19'
        }
        // 获取页面的元素
        document.querySelector('.btn').onclick = function () {
            // 将js对象的数据临时存到内存总
            // 将数据转为json格式
            let json = JSON.stringify(obj)
            // 将转换的数据存到内存中
            sessionStorage.setItem('name', json)
        }

        document.querySelector('.btn1').onclick = function () {
            // 取到内存中用户存到的数据
            let index = sessionStorage.getItem('name')
            // 先将用户的json数据转为js的格式
            let obj = JSON.parse(index)
            console.log(obj);
        }

    </script>
</body>

</html>

 案例：后台管理系统

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: cyan;
        }

        .login_form_con {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -155px;
            width: 400px;
            height: 310px;
            background-color: #edeff0;
            text-align: center;
        }

        .login_title {
            height: 50px;
            font-size: 30px;

        }

        input {
            width: 80%;
            height: 50px;
            ;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div class="login_form_con">
        <div class="login_title">后台管理系统</div>
        <div class="login_form">
            <input type="text" class="input_txt" placeholder="邮箱/手机号">
            <input type="password" class="input_pass" placeholder="密码">
            <input type="submit" class="input_sub" value="登 录">
        </div>
    </div>
    <script>
        /*
        1.分析需求(交互)：
            点击登录按钮 ： (1)判断用户名密码长度  ：  全部大于6 登录成功
                           (2)如果登录成功
                                (2.1)将用户名和密码写入本地存储，下一次登录时直接显示用户名和密码
                                (2.2)跳转网页 http://www.itheima.com

                
        2.思路分析（事件三要素）
            获取元素：事件源：
            注册事件：事件类型
            事件处理：
        */

        // 获取页面交互元素
        let input_txt = document.querySelector('.input_txt') //邮箱
        let input_pass = document.querySelector('.input_pass')  // 密码
        let input_sub = document.querySelector('.input_sub') //登录按钮

        // 给按钮注册点击事件
        input_sub.onclick = function () {
            // 非空判断
            if (input_txt.value.length <= 6 || input_pass.value.length <= 6) {
                alert('登录失败')
            } else {
                // 将用户输入的用户名和密码存到硬盘当中
                localStorage.setItem('name', input_txt.value)
                localStorage.setItem('username', input_pass.value)
                alert('登录成功')
                // 用户登录成功  然后跳转页面
                location.href = 'http://www.itheima.com'
            }
        }
        // 用户重新登录页面的时候账号密码也存在
        // 取到的数直接存到用户名和密码上
        input_txt.value = localStorage.getItem('name')
        input_pass.value = localStorage.getItem('username')



    </script>
</body>

</html>

标签：console,log,对象,window,BOM,五大,浏览器,document,location
来源： https://blog.csdn.net/cs1330/article/details/122029437