HTML5笔记

1 标签

2 表单

3音频

4视频

5属性

6 图片懒加载

7 json

   前后端数据交互的数据类型 是一个字符串
   var tmp=JSON.stringfy(tmp) 把对象类型改为了字符串类型
   var tmp=JSON.parse(tmp) 把字符串类型改为对象类类型
   浅拷贝/浅克隆： 把A赋值给B 如果修改A或B的内容 另一方也改变
   深拷贝/深克隆； 把A赋值给B 如果修改A或B的内容 另一方没有改变
     第一种方法var arr1=[1,2,3]  
     var a='xm'
     var obj2=JSON.stringfy(obj)
     obj2=JSON.parse(obj2)
     obj2.age=4
      第二种方法
    function deepclone(obj){
        
        if(typeof(obj)!='object'){
            return obj  
        }else{
           var tep =Array.isArray(obj)?[]:{}
            for(var key in obj){
                if(typeof(obj[key])==='object'){
                    tep[key]=deepclone(obj[key]) 
                } else {
                    tep[key]=obj[key] 
                }  
            }  
            return tep
        }
   
    }

本地存储cookie

  //  设置cookie的方式 document.cookie
  //  存储大小为4k 过期时间 如果不设置 关闭窗口就过期了
  //expires=  设置过期时间
  //设置时间要通过dete.setDate设置时间
  document.cookie="name='zs'"
  document.cookie='token=123'
  var date=new Date()
  date.setDate(date.getDate()+1)
  document.cookie='channer=123;expires='+date.toUTCString
  //设置cookie的函数
  function setcookie(key,value,expires){
      //创建日期对象
      var date=new Date()
      date.setDate(date.getDate()+expires*1) //防止过期时间传入的是一个字符串
      document.cookie=key+'='+value+';expires='+date.toUTCString
  }
  //设置一个设置cookie的函数
  function getcookie(key){
      var cookie=document.cookie  //得到一个字符串
      var arr=cookie.split(';')    //设置一个数组去接受
      for(var i=0;i<arr.length;i++){
          var tep=arr[i].split('=')
          if(tep[0].trim()=key){// trim 去掉字符串前后的空格
              return tep[1]
          }
      }

  }
  //删除cookie
  function decookie(key){
      var date=new Date()
      date.setDate(date.getDate()-1)
      document.cookie=key+'=null'+';expires='+date.toUTCString
  }

本地存储2

<script>
    //都属于本地存储
    //localStorage 存储大小为5M 会一直存储在本地  除非手动删除
    //sessionStorage 存储大小5M 浏览器关闭之后就失效了
    localStorage
    sessionStorage
    //设置localStorage
    localStorage.islogin=true
    localStorage.setItem('tag',123)
    //获取locaStorage
    localStorage.islogin
    localStorage.getItem('tag')
    //设置获取sessionStorage 与 locaStorage方法相同
    //如果在浏览器中设置了sessionStorage，重新打开浏览器设置的sessionStorage消失
    //代码中设置的sessionStorage,重新打开浏览器中sessionStorage不消失
</script>

历史管理

JS是单线程的  浏览器是多线程的
    异步加载
    defer 先渲染结构，遇到js开始加载同时结构继续渲染，渲染完之后执行JS
    async 先渲染结构，遇到js开始加载同时结构继续渲染，js加载完之后立马执行js，js执行完结构渲染
    原生JS历史记录传参获取
    1.hash
    oBtn.onclick=function(){
        var tag=Math.random()
        oDiv.innerText=tag
        location.hash=tag
    }
    window.onhashchange=function(){
        obtn.inneerText=location.hash
    }  监听hash的改变
    2.堆栈
    oBtn.onclick=function(){
        var tag=Math.random()
        oDiv.innerText=tag
        history.pushState(tag,'')  第一个参数是要追加的东西，第二个是页面标签名字，可以为空，不可以不填
    }
    
    window.onpopstate=function(e){
    op.innerText=e.state
    }