【BOM、本地存储、数组map和join方法】-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45871539/article/details/144728201
【BOM、本地存储、数组map和join方法】
<!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>
</head>
<body>
    <a href="http://itcast.cn">支付成功<span>5</span>秒后跳转</a>
   <script>
        // window对象：BOM、定时器-延迟函数、JS执行机制、location对象、navigator对象、history对象
            // 定时器-延迟函数：只执行一次。 setTimeout（回调函数，等待的毫秒数）
                setTimeout(function(){
                    console.log('11')
                },2000)
                // 清除延时函数：
                    // let timer=setTimeout(回调函数，等待毫秒数)
                    clearTimeout(timer)
            // JS执行机制：单线程;耗时阻塞,同步，异步
                // 异步：任务队列
                // 同步：先形成任务栈；
                // 先执行同步任务，异步任务队列；同步任务执行完毕，依次读取任务队列的异步任务推入主线程处理。重复——时间循坏（event loop）
            // location对象
                // 拆分并保存了URL地址的各个组成部分
                // href经常用href利用js的方法去跳转页面；location.href
                    const a=document.querySelector('a')
                    let num=5
                    let timerID = setInterval(function(){
                        num--
                        a.innerHTML=`支付成功<span>${num}</span>之后跳转`
                        if(num===0){
                            clearInterval(timerID)
                            location.href='http://itcast.cn'
                        }
                    },5000)
                //location.search:获取地址中携带的参数，符号？后面的部分
                // hash属性获取的地址中的哈希值，符号#后面
            //navigator获取页面信息——使用的时候直接复制
            //history对象，后退前进按钮
                //  back():
                //  forward():
                //  go(参数):前进后退功能，前进是1，后退为-1
                 history.go(1)
        //本地存储
            // 用户数据存储在用户浏览器中，设置刷新不丢失数据
            // sessionStorage和localStorage大约5M左右
            // localStorage：永久存储在本地，只能存储字符串类型
                    localStorage.setItem(key,value)//removeItem表示移除，clear表示清除，getItem表示取
                    // sessionStorage关闭之后就没有了，在同一个窗口下数据可以共享，以键值对的形式存储使用，用法和local那个是一样的
                // 存储复杂类型时，需要转换成json字符串类型，转换成对象，存储在本地
                // 语法：JSON.stringify(复杂数据类型)
                    const obj={
                        uname:'wang',
                        age:18,
                        gender:'女'
                    }
                    localStorage('obj',obj)//无法直接使用
                    localStorage.setItem('obj',JSON.stringify(obj))
                    JSON.parse(localStorage.getItem('obj'))//转换成对象
            // map（）和join（）：实现字符串拼接
                // map()遍历数组处理数据，返回新的数组
                    const arr=['red','blue']
                    const newarr=arr.map(function(ele,index){
                        console.log(ele)//数组元素
                        console.log(index)//数组索引号
                        return ele +'颜色'
                    })//'red颜色','blue颜色'
                //join()把所有元素转换成字符串,小括号写什么就用什么隔开
                newarr.join()//red颜色,blue颜色
                newarr.join('')//red颜色blue颜色，没有分割

   </script>
</body>
</html>