JavaScript BOM的常用属性和方法

153 阅读1分钟

1. window

window.confirm() 确认框,用于验证是否接受用户操作。

<script>
    if (confirm('作业写完了吗?')) {
        alert('棒棒哒👍')
    } else {
        alert('努力努力再努力✊')
    }        
</script>

prompt()输入框,的第二个参数是默认值

console.log(window.location.search); 地址的参数信息
console.log(window.location.href) 地址路径
console.log(window.location.port) 地址的端口

2. history

<body>
    <button onclick="back()">后退</button>
    <button onclick="forward()">前进</button>
    <button onclick="go()">刷新</button>
    <script>
        function back() {
            /*  window.history.back(); */
            window.history.go(-1)
        }
        function forward() {
            /*  window.history.forward(); */
            window.history.go(1)
        }
        function go() {
            /*  window.history.go(); */
            /*  window.history.go(0); */
            location.reload();
        }
    </script>
</body>

3. 计时事件

setInterval() 定时器会返回一个唯一的id,根据定时器返回的唯一的id 来清除定时器

<body>
    <button onclick="clearId()">清除定时器</button>
    <script>
        var i = 1;
        let id = setInterval(function() {
            console.log(i);
            i++
        }, 1000)
        function clearId() {
            clearInterval(id)
        }
    </script>
</body>

setTimeout()只执行一次,也会产生一个唯一的id标识。

4. 存储

(1) sessionStorage

存储之后,页面刷新,缓存的值不会消失。
但是,把tab页关闭之后,缓存的值就不存在了。

<body>
    <button onclick="set()">储值setItem</button>
    <button onclick="get()">取值getItem</button> 
    <script>
        function set(){           
            /* sessionStorage.setItem('name','Ann') */
            sessionStorage.name = 'Ann';
        }
        function get(){
            /* document.write(sessionStorage.getItem('name')) */
            document.write(sessionStorage.name);
        }
    </script>
</body>

⭐清除存储的值

<body>
    <button onclick="clearOne()">清除指定项</button>
    <button onclick="clearAll()">清除全部</button>
    <script>
       function clearOne(){
           // x: Key值
           sessionStorage.removeItem('x')
       }
       function clearAll(){
           sessionStorage.clear();
       }
    </script>
</body>

(2) localStorage

localStorage 会把值一直存储在本地,tab页关闭也不会消失。
localStorage 是和地址有关系的,地址改变了,localStorage里面的值就不存在了。
前面地址没有发生改变的话,虽然页面改变,值依然存在。
⭐存的内容都是字符串类型。

/* A页面*/
<body>
    <button onclick="set()">储值</button>
    <script>
        function set() {
            //对象类型
            let stu = {
                name: 'Leo',
                stuNo: '11'
            }
            // JSON.stringify 把对象转成字符串类型
            let strStu = JSON.stringify(stu);
            localStorage.strStu = strStu;
            // location.href='b.html';
            // location.replace('b.html')
            open('b.html', '_self')
        }
    </script>
</body>
/* B页面*/
<script>
    // JSON.parse 再把字符串转成对象类型
    let objstrStu = JSON.parse(localStorage.strStu);
    document.write(objstrStu.name);
    document.write(objstrStu.stuNo);
</script>