欢迎来到甘丰迟的博客,更新中...

sessionStorage localStorage

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      sessionStorage.setItem("username", "tom");
      localStorage.setItem("username", "tom");
      console.log("AA" + sessionStorage.getItem("username") + "BB");
      console.log("CC" + localStorage.getItem("username") + "DD");
    </script>
  </body>
</html>

removeItem localStorage sessionStorage

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>
      <button onclick="remove()">删除age和salary</button>
    </p>

    <script>
      //sessionStorage
      sessionStorage.setItem("username", "Tom");
      sessionStorage.setItem("age", 26);
      sessionStorage.setItem("sex", true);
      sessionStorage.setItem("salary", 78956);
      //localStorage
      localStorage.setItem("username", "Tom");
      localStorage.setItem("age", 26);
      localStorage.setItem("sex", true);
      localStorage.setItem("salary", 78956);
      function remove() {
        //删除sessionStorage中的项目
        sessionStorage.removeItem("age");
        sessionStorage.removeItem("salary");
        //删除localStorage中的项目
        localStorage.removeItem("age");
        localStorage.removeItem("salary");
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let now = new Date();
      now.setFullYear(now.getFullYear() + 5);
      //设置cookie
      document.cookie = "a=1;expires=" + now.toUTCString();

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

drag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      width:150px;
      height: 150px;
      margin: 10px auto;
    }
    #div1{
      border:2px solid #f00;
    }
    #div2{
      border:2px solid #00f;
    }
  </style>
</head>
<body>
  <div id="div1">
      <p draggable="true" id="source">中华人民共和国</p>
  </div>
  <div id="div2"></div>
  <script>
    //获取段落对象 -- 源对象
    let pEle = document.getElementById('source');
    //获取DIV对象 -- 目标对象
    let divEle = document.getElementById('div2');
    //为源对象添加"开始拖动"的事件
    pEle.addEventListener('dragstart',()=>{
      console.log('源对象触发dragstart事件');
    });
    //为源对象添加"拖动过程中"的事件
    pEle.ondrag = ()=>{
      console.log('源对象触发drag事件(正在拖放过程中)');
    }

    //为目标对象添加"源对象进入目标对象范围内"的事件
    divEle.ondragenter = ()=>{
      console.log('目标对象触发dragenter(也就是源对象进入目标对象范围的事件)');
    }
    //为目标对象添加"源对象在目标对象范围内悬停的"事件
    divEle.ondragover = (event)=>{        
        event.preventDefault();
        console.log('现在源对象在目标对象范围内悬停 -- dragover');
    };

    //为目标对象添加"源对象拖动离开目标对象"的事件
    divEle.ondragleave = ()=>{
      console.log('现在源对象拖离目标对象了--dragleave');
    }

    //为目标对象添加"源对象在目标对象范围内释放"的事件
    divEle.ondrop = ()=>{
      console.log('源对象在目标对象范围内释放了 --- drop');
    }

    //为源对象添加"释对源对象"的事件
    pEle.ondragend = ()=>{
      console.log('你释放了左键 --- dragend');
    }
  </script>
</body>
</html>

列子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      width:150px;
      height: 150px;
      margin: 10px auto;
    }
    #div1{
      border:2px solid #f00;
    }
    #div2{
      border:2px solid #00f;
    }
  </style>
</head>
<body>
  <div id="div1">
      <p draggable="true" id="source"></p>
  </div>
  <div id="div2"></div>
  <script>
    //获取段落对象 -- 源对象
    let pEle = document.getElementById('source');
    pEle.innerText = Math.random();
    //获取DIV对象 -- 目标对象
    let divEle = document.getElementById('div2');
    //为源对象添加"开始拖动"的事件
    pEle.addEventListener('dragstart',(event)=>{
      //获取到DataTransfer对象
      let dt = event.dataTransfer;
      //调用DataTransfer对象的setData()方法用于设置拖放数据
      dt.setData('username',event.target.innerText);
    });  
   
    //为目标对象添加"源对象在目标对象范围内悬停的"事件
    divEle.ondragover = (event)=>{        
        event.preventDefault();
    };  

    //为目标对象添加"源对象在目标对象范围内释放"的事件
    divEle.ondrop = (event)=>{      
      //获取被拖放的数据
      let username = event.dataTransfer.getData('username');
      //将目标对象的内容设置为获取到的数据
      divEle.innerText = username;  
      //删除原来的源对象
      pEle.remove();
    }
  </script>
</body>
</html>

# sessionStorage localStorage

# removeItem localStorage sessionStorage

# cookie

# drag

sessionStorage localStorage

removeItem localStorage sessionStorage

cookie

drag