javascript(3)-文档操作

鹏重名了
265 阅读2分钟

1. 属性操作

概念： JS有两种方式可以操作HTML属性：

  • 直接控制：
    • obj.属性名 / obj["属性名"]：获取属性，若属性不存在返回 undefined。
    • obj.属性名 = "属性值" / obj["属性名"] = "属性值"：设置该属性。
  • DOM控制：
    • obj.getAttribute("属性名")：获取属性，若属性不存在返回 null。
    • obj.setAttribute("属性名", "属性值")：设置该属性。
    • obj.removeAttribute("属性名")：删除该属性。
<label>
    <input id="test-ipt" value="111"/>
</label>
<br/>
<button id="get-btn" type="button">简单获取属性</button>
<br/>
<button id="set-btn" type="button">简单设置属性</button>
<br/>

<script type="text/javascript">
    window.onload = () => {
        let testIpt = document.querySelector("#test-ipt");
        document.querySelector("#get-btn").onclick = () => {
            console.log(testIpt.value);
            console.log(testIpt["value"]);
            console.log(testIpt["aaa"]);
        };

        document.querySelector("#set-btn").onclick = () => {
            testIpt.value = "222";
            testIpt["value"] = "333";
        };
    };
</script>

<button id="get-btn" type="button">DOM方式获取属性</button>
<br/>
<button id="set-btn" type="button">DOM方式设置属性</button>
<br/>
<button id="delete-btn" type="button">DOM方式删除属性</button>
<br/>

<script type="text/javascript">
    window.onload = () => {
        let testIpt = document.querySelector("#test-ipt");
        document.querySelector("#get-btn").onclick = () => {
            console.log(testIpt.getAttribute("value"));
            console.log(testIpt.getAttribute("aaa"));
        };

        document.querySelector("#set-btn").onclick = () => {
            testIpt.setAttribute("value", "222");
        };

        document.querySelector("#delete-btn").onclick = () => {
            testIpt.removeAttribute("value");
        };
    };
</script>

2. 样式操作

概念： JS支持直接对元素的CSS样式进行操作：

  • obj["style"]["属性"] = "属性值"：设置obj的指定样式。
  • obj["style"]["属性"]：获取obj的指定行间样式。
  • obj["currentStyle"]["属性"]：获取obj的指定样式（包括非行间），IE支持的写法。
  • window.getComputedStyle(obj)["属性"]：获取obj的指定样式（包括非行间），非IE支持的写法。
    <style type="text/css">
        #text-sec {
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<section id="text-sec" style="width:100px"></section>

<button id="set-inline-style-btn" type="button">设置样式</button>
<br/>
<button id="get-inline-style-btn" type="button">获取行间样式</button>
<br/>
<button id="get-style-btn" type="button">获取所有位置的样式</button>
<br/>


<script type="text/javascript">
    window.onload = function () {
        let testSec = document.querySelector("#text-sec");

        document.querySelector("#set-inline-style-btn").onclick = () => {
            testSec["style"]["width"] = "1000px";
        };

        document.querySelector("#get-inline-style-btn").onclick = () => {
            console.log(testSec["style"]["width"]);
            console.log(testSec["style"]["height"]);
        };

        document.querySelector("#get-style-btn").onclick = () => {
            console.log(css(testSec, "width"));
            console.log(css(testSec, "height"));
        };

        function css(obj, key) {
            return obj["currentStyle"] ? obj["currentStyle"][key] : getComputedStyle(obj)[key];
        }
    };

</script>

3. 元素操作

概念：

  • 静态获取：
    • obj.querySelector("selector")：根据CSS选择器获取一个元素。
    • obj.querySelectorAll("selector")：根据CSS选择器获取多个元素。
  • 动态获取：
    • obj.getElementById("id")：通过id获取某个元素，不加 #。
    • obj.getElementsByTagName("tagName")：通过标签名获取元素集合。
    • obj.getElementsByName("name")：通过元素的 name 属性获取元素集合。
  • 操作元素：
    • document.createElement("li")：通过标签名凭空创造一个DOM元素。
    • 父.appendChild(子)：若子本身存在则表示移动，若子不存在则表示追加。
    • 父.insertBefore(子A, 子B)：将子A插入到子B之前。
    • 父.removeChild(子)：从父中删除子。

<ul id="item-list">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ul>
<button id="by-static-btn" type="button">静态获取元素</button>
<br/>
<button id="by-dynamic-btn" type="button">动态获取元素</button>
<br/>

<script type="text/javascript">
   onload = () => {
       document.querySelector("#by-static-btn").onclick = () => {
           let itemList = document.querySelector("#item-list");
           let lis = itemList.querySelectorAll("li");
           console.log(lis.length);
           for (let i = 0, j = lis.length; i < j; i++) {
               console.log("lis.length: " + lis.length);
               itemList.innerHTML += `<li>${lis.length + i + 1}</li>`
           }
       };

       document.querySelector("#by-dynamic-btn").onclick = () => {
           let itemList = document.getElementById("item-list");
           let lis = itemList.getElementsByTagName("li");
           for (let i = 0, j = lis.length; i < j; i++) {
               console.log("lis.length: " + lis.length);
               itemList.innerHTML += `<li>${lis.length + i + 1}</li>`
           }
       };
   };
</script>

<ul id="item-list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<button id="append-btn" type="button">追加一个子元素</button>
<br/>
<button id="move-btn" type="button">移动一个子元素</button>
<br/>
<button id="insert-btn" type="button">在头部插入一个子元素</button>
<br/>
<button id="delete-btn" type="button">删除最后一个子元素</button>
<br/>

<script type="text/javascript">

  window.onload = () => {
      let itemList = document.querySelector("#item-list");

      document.querySelector("#append-btn").onclick = () => {
          let newLi = document.createElement("li");
          newLi.innerText = "5";
          itemList.append(newLi);
      };

      document.querySelector("#move-btn").onclick = () => {
          let firstLi = document.querySelector("#item-list li:first-child");
          itemList.append(firstLi);
      };

      document.querySelector("#insert-btn").onclick = () => {
          let newLi = document.createElement("li");
          newLi.innerText = "0";
          itemList.insertBefore(newLi, itemList.querySelectorAll("li")[0]);
      };

      document.querySelector("#delete-btn").onclick = () => {
          let lastLi = document.querySelector("#item-list li:last-child");
          itemList.removeChild(lastLi);
      };
  }

</script>

4. 表格操作

概念：

  • 表格专用属性：
    • tBodies：快速获取表格的 <tbody> 集合。
    • rows：快速获取表格的 <tr> 集合。
    • cells：快速获取表格的 <td> 或 <th> 集合。
  • str.search(c)：在字符串str中查找c的位置，不存在返回-1。
  • str.split(a)：将字符串str按照a来拆分，返回一个字符数组。

查寻目标和表格中内容完全一致（忽略大小写），将背景高亮显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #user-tab, td, th {
            width: 300px;
            border: 1px solid red;
            border-collapse: collapse;
            text-align: center;
        }
    </style>
</head>
<body>
<section>
    <label><input id="search-ipt"/></label>
    <button id="search-btn" type="button">按姓名搜索</button>
</section>
<hr/>
<section>
    <table id="user-tab">
        <tr>
            <th>编号</th>
            <th>姓名</th>
        </tr>
        <tr>
            <td>001</td>
            <td>zhaosi</td>
        </tr>
        <tr>
            <td>002</td>
            <td>liuneng</td>
        </tr>
    </table>
</section>

<script type="text/javascript">
    /*需求：查寻目标和表格中内容完全一致（忽略大小写），将背景高亮显示。*/
    window.onload = () => {
        //抓到按钮，点击按钮后的一系列操作
        document.querySelector("#search-btn").onclick = () => {
            // 抓到文本框（当前写入的文本）
            let searchIpt = document.querySelector("#search-ipt");
            // 从这个集合的0号元素开始抓到<tbody>框
            let tbody = document.querySelector("#user-tab").tBodies[0];
            //获取<tbody>中的所有<tr>的内容
            let trs = tbody.rows;
         //集合遍历所有的<tr>,并且从第二行开始
            for (let i = 1, j = trs.length; i < j; i++) {
                //每次点击搜索之后文本框直接变成空的
                trs[i]["style"]["backgroundColor"] = "";
                //第二行<tr>第二个字段的内容赋值，并且忽略大小写
                let nameFromTab = trs[i].cells[1].innerText.toUpperCase();
                //获取当前文本框的内容，忽略大小写
                let nameFromIpt = searchIpt["value"].toUpperCase();
                //如果已存在的姓名和文本框的输入的名字匹配然后这行高亮
                if (nameFromTab === nameFromIpt) {
                    trs[i]["style"]["backgroundColor"] = "gray";
                }
            }
        }
    };
</script>

</body>
</html>

模糊查寻指定内容（忽略大小写），将背景高亮显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #user-tab, td, th {
            width: 300px;
            border: 1px solid red;
            border-collapse: collapse;
            text-align: center;
        }
    </style>
</head>
<body>
<section>
    <label><input id="search-ipt"/></label>
    <button id="search-btn" type="button">按姓名搜索</button>
</section>
<hr/>
<section>
    <table id="user-tab">
        <tr>
            <th>编号</th>
            <th>姓名</th>
        </tr>
        <tr>
            <td>001</td>
            <td>zhaosi</td>
        </tr>
        <tr>
            <td>002</td>
            <td>liuneng</td>
        </tr>
    </table>
</section>

<script type="text/javascript">
    /*需求：模糊查寻指定内容（忽略大小写），将背景高亮显示。*/
    window.onload = () => {
        //抓到按钮，点击按钮后的一系列操作
        document.querySelector("#search-btn").onclick = () => {
            // 抓到文本框（当前写入的文本）
            let searchIpt = document.querySelector("#search-ipt");
            // 从这个集合的0号元素开始抓到<tbody>框
            let tbody = document.querySelector("#user-tab").tBodies[0];
            //获取<tbody>中的所有<tr>的内容
            let trs = tbody.rows;
            //如果文本框的值是字符串空的或者是空的 直接返回
            if (searchIpt["value"] === "" || searchIpt["value"] == null) {
                return;
            }
            //集合遍历所有的<tr>,并且从第二行开始
            for (let i = 1, j = trs.length; i < j; i++) {
                //每次点击搜索之后文本框直接变成空的
                trs[i]["style"]["backgroundColor"] = "";
                //第二行<tr>第二个字段的内容赋值，并且忽略大小写
                let nameFromTab = trs[i].cells[1].innerText.toUpperCase();
                //获取当前文本框的内容，忽略大小写
                let nameFromIpt = searchIpt["value"].toUpperCase();
                //用以拥有的内容比较 文本框需要搜索的内容如果不存在就返回空，存在的话就变成灰色
                if (nameFromTab.search(nameFromIpt) !== -1) {
                    trs[i]["style"]["backgroundColor"] = "gray";
                }
            }
        }
    };
</script>

</body>
</html>

按照空格拆分后，模糊查寻指定内容（忽略大小写），将背景高亮显示。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #user-tab, td, th {
            width: 300px;
            border: 1px solid red;
             /*单元格边框合并*/
            border-collapse: collapse;
            /*文本对齐方式：居中*/
            text-align: center;
        }
    </style>
</head>
<body>
<section>
    <label><input id="search-ipt"/></label>
    <button id="search-btn" type="button">按姓名搜索</button>
</section>
<hr/>
<section>
    <table id="user-tab">
        <tr>
            <th>编号</th>
            <th>姓名</th>
        </tr>
        <tr>
            <td>001</td>
            <td>zhaosi</td>
        </tr>
        <tr>
            <td>002</td>
            <td>liuneng</td>
        </tr>
    </table>
</section>

<script type="text/javascript">
    /*需求：按照空格拆分后，模糊查寻指定内容（忽略大小写），将背景高亮显示。*/
    window.onload = () => {
                //抓到按钮，点击按钮后的一系列操作
        document.querySelector("#search-btn").onclick = () => {
            // 抓到文本框（当前写入的文本）
            let searchIpt = document.querySelector("#search-ipt");
            // 从这个集合的0号元素开始抓到<tbody>框
            let tbody = document.querySelector("#user-tab").tBodies[0];
            //获取<tbody>中的所有<tr>的内容
            let trs = tbody.rows;
            //如果文本框的值是字符串空的或者是空的 直接返回
            if (searchIpt["value"] === "" || searchIpt["value"] == null) {
                return;
            }
           //集合遍历所有的<tr>,并且从第二行开始
            for (let i = 1, j = trs.length; i < j; i++) {
                //每次点击搜索之后文本框直接变成空的
                trs[i]["style"]["backgroundColor"] = "";
                //第二行<tr>第二个字段的内容赋值，并且忽略大小写
                let nameFromTab = trs[i].cells[1].innerText.toUpperCase();
                //获取当前文本框的内容，忽略大小写
                let nameFromIpt = searchIpt["value"].toUpperCase();
                //将文本框获取到的内容拆解成单独一个一个的
                let names = nameFromIpt.split(" ");
                //循环遍历拆解后的内容
                for (let m = 0, n = names.length; m < n; m++) {
                    //用以拥有的内容比较 文本框需要搜索的内容如果不存在就返回空，存在的话就变成灰色
                    if (nameFromTab.search(names[m]) !== -1) {
                        trs[i]["style"]["backgroundColor"] = "gray";
                    }
                }
            }
        }
    };
</script>

</body>
</html>

增删改查

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #user-tab {
            width: 1000px;
            table-layout: fixed;
            border-collapse: collapse;
            text-align: center;
        }

        #user-tab, td, th {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<section>
    <label><input id="name-ipt" placeholder="input your name..."/></label>
    <label><input id="age-ipt" placeholder="input your age..."/></label>
    <label><input id="search-ipt" placeholder="input your search..."/></label>
    <button id="create-btn" type="button">添加</button>
    <button id="delete-btn" type="button">删除</button>
    <button id="search-btn" type="button">查找</button>

</section>
<hr/>
<section>
    <table id="user-tab">
        <tr>
            <th><label><input type="checkbox"></label></th>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><label><input type="checkbox" disabled="disabled"></label></td>
            <td>001</td>
            <td>zhaosi</td>
            <td>11</td>
            <td></td>
        </tr>
    </table>
</section>

<script type="text/javascript">
    let tbody;
    window.onload = () => {
        tbody = document.querySelector("#user-tab").tBodies[0];
        document.querySelector("#create-btn").onclick = () => createData();
        document.querySelector("#delete-btn").onclick = () => deleteData();
        document.querySelector("#search-btn").onclick = () => searchData();
    };

    /*需求：点击添加按钮，可以添加一条数据。*/
    function createData() {
        let tr, td;
        //创建一个tr标签
        tr = document.createElement("tr");
        //将创建的tr追加到曾经的tr后面
        tbody.appendChild(tr);

        //创建一个td标签
        td = document.createElement("td");
        //td的第一个标签是html并且是可选框 名字为cbs
        td.innerHTML = `<label><input type="checkbox" name="cbs"/></label>`;
        //将td追加到tr的身体里
        tr.appendChild(td);

        //创建一个td标签
        td = document.createElement("td");
        //这个代表文本编号  rows：快速获取表格的 `<tr>` 集合
        td.innerText = "00" + (tbody.rows.length-1);
        //将td追加到tr的身体里
        tr.appendChild(td);

        //创建一个td标签
        td = document.createElement("td");
        //创建对应th标签的文本框写入的值
        td.innerText = document.querySelector("#name-ipt")["value"];
        //将td追加到tr的身体里
        tr.appendChild(td);

        //创建一个td标签
        td = document.createElement("td");
        //创建对应th标签的文本框写入的值
        td.innerText = document.querySelector("#age-ipt")["value"];
        //将td追加到tr的身体里
        tr.appendChild(td);

        //创建一个td标签
        td = document.createElement("td");
        //在创建一个a标签
        let updateA = document.createElement("a");
        //想让a标签触发js事件，需要添加href="javascript:"
        updateA["href"] = "javascript:";
        //添加成功的时候td内容文本默认修改二字
        updateA.innerText = "修改";
        //点击这个修改按钮发生的事情
        updateA.onclick = () => updateData(updateA);
        td.appendChild(updateA);
        tr.appendChild(td);
    }

    /*需求：点击修改按钮，可以修改姓名和年龄。*/
    function updateData(updateA) {
        //因为创建updateA是a标签，需要获取当前父亲标签，的父亲标签的子，标签数组第三个位置是姓名。
        let nameTd = updateA.parentNode.parentNode.children[2];
        //因为创建updateA是a标签，需要获取当前父亲标签，的父亲标签的子，标签数组第四个位置是年龄。
        let ageTd = updateA.parentNode.parentNode.children[3];
        //因为创建updateA是a标签，需要获取当前父亲标签，的父亲标签的子，标签数组第五个位置是操作。
        let updateTd = updateA.parentNode.parentNode.children[4];
        // 姓名原来的值 变成了输入框 ，输入框里面的值还是原来的值
        nameTd.innerHTML = `<input value="${nameTd.innerHTML}"/>`;//输入框
        ageTd.innerHTML = `<input value="${ageTd.innerHTML}"/>`;

        //再次创建一个a标签
        let okA = document.createElement("a");
        //想让a标签触发js事件，需要添加href="javascript:"
        okA["href"] = "javascript:";
        okA.innerText = "确定";
        //将获取到updateTd里面的内容清空
        updateTd.innerHTML = "";
        //然后将确定俩字添加进去
        updateTd.appendChild(okA);
        //点击确定按钮之后
        okA.onclick = () => {
            //获取姓名的子标签的值（input的值：输入框）就变成的修改后的值
            nameTd.innerHTML = nameTd.children[0]["value"];
            //获取年龄的子标签的值（input的值：输入框）就变成的修改后的值
            ageTd.innerHTML = ageTd.children[0]["value"];
            //清空确定这两个字
            updateTd.innerHTML = "";
            //把修改这两个字再次追加到标签里
            updateTd.appendChild(updateA);
        };
    }

    /*需求：勾选每一行的checkbox后，点击删除按钮可以进行批量删除。*/
    function deleteData() {
        //捕捉所有input标签里的name名字并且需要被打勾才行
        let cbs = document.querySelectorAll("input[name=cbs]:checked");
        if (cbs.length <= 0) {
            alert("至少选择一项！");
            return;
        }
        //confirm 是带取消 按钮的框
        let response = confirm(`您将有条${cbs.length}数据被删除，确认吗？`);
        if (response) {
            for (let i = 0, j = cbs.length; i < j; i++) {
                //从父中删除子，要删除tr的话需要找到tr的位置，父子关系查找，
                //input>label>th>tr
                tbody.removeChild(cbs[i].parentNode.parentNode.parentNode);
            }
        }
    }

    function searchData() {
        // 抓到文本框（当前写入的文本）
        let searchIpt = document.querySelector("#search-ipt");
        //获取<tbody>中的所有<tr>的内容
        let trs = tbody.rows;
        //如果文本框的值是字符串空的或者是空的 直接返回
        if (searchIpt["value"] === "" || searchIpt["value"] == null) {
            return;
        }
        //集合遍历所有的<tr>,并且从第二行开始
        for (let i = 1, j = trs.length; i < j; i++) {
            //每次点击搜索之后文本框直接变成空的
            trs[i]["style"]["backgroundColor"] = "";
            //第二行<tr>第三个字段的内容赋值，并且忽略大小写
            let nameFromTab = trs[i].cells[2].innerText.toUpperCase();
            //获取当前文本框的内容，忽略大小写
            let nameFromIpt = searchIpt["value"].toUpperCase();
            //将文本框获取到的内容拆解成单独一个一个的
            let names = nameFromIpt.split(" ");
            //循环遍历拆解后的内容
            for (let m = 0, n = names.length; m < n; m++) {
                //用以拥有的内容比较 文本框需要搜索的内容如果不存在就返回空，存在的话就变成灰色
                if (nameFromTab.search(names[m]) !== -1) {
                    trs[i]["style"]["backgroundColor"] = "gray";
                }
            }
        }
    }
</script>

</body>
</html>

表格点击排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            width: 400px;
            margin: 0 auto;
            text-align: center;
        }

        #user-tab, td, th {
            width: 400px;
            border: 1px solid red;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
<section>
    <table id="user-tab">
        <tr>
            <th id="sort-by-id">编号</th>
            <th id="sort-by-name">姓名</th>
            <th id="sort-by-age">年龄</th>
        </tr>
        <tr>
            <td>1</td>
            <td>赵四</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>刘能</td>
            <td>12</td>
        </tr>
        <tr>
            <td>3</td>
            <td>广坤</td>
            <td>13</td>
        </tr>
    </table>
</section>

<script type="text/javascript">

    /* 需求：按照表格第二列的序号进行升降序排列切换。*/
    /* 思路：
    1. 设置标志位isDescending，表示升序或降序。
    2. 获取排序<th>并且挂载点击事件。
    3. 新建一个空数组trArray，因为只有数组可以调用sort()方法。
    4. 遍历<tbody>中的每一个<tr>，并且将它们都push到trArray中。
    5. 用数组中的每个<tr>的第二个<td>中的内容进行比较和排序。
    6. 排序后，将数组中的所有<tr>重新追加到<tbody>中。
    7. 改变标志，方便循环点击排序。
    */
    let tbody;
    let isDescending = false;
    window.onload = () => {
        //获取所有的表格从数组角标0开始
        tbody = document.querySelector("#user-tab").tBodies[0];
        document.querySelector("#sort-by-id").onclick = () => {
            //getTrArray()代表获取列 0代表比较角标
            numberSort(getTrArray(), 0);
        };
        document.querySelector("#sort-by-name").onclick = () => {
            stringSort(getTrArray(), 1)
        };
        document.querySelector("#sort-by-age").onclick = () => {
            numberSort(getTrArray(), 2)
        };
    };

    function getTrArray() {
        let trArray = [];
        //获取所有的tr
        let trs = tbody.rows;
        //从第二行开始循环，第一行是著称
        for (let i = 1, j = trs.length; i < j; i++) {
            //把所有的tr 放到数组里
            trArray.push(trs[i]);
        }
        return trArray;
    }
    //数字比较
    function numberSort(trArray, cellNumber) {
        //排序tr列第一个孩子和第二列的孩子一次比较
        trArray.sort((tr01, tr02) => {
            let id01Text = tr01.cells[cellNumber].innerText;
            let id02Text = tr02.cells[cellNumber].innerText;
            return isDescending ? id01Text - id02Text : id02Text - id01Text;
        });
        appendToTbody(trArray);
    }
    // 文本比较
    function stringSort(trArray, cellNumber) {
        trArray.sort((tr01, tr02) => {
            let id01Text = tr01.cells[cellNumber].innerText;
            let id02Text = tr02.cells[cellNumber].innerText;
            return isDescending ? id02Text.localeCompare(id01Text, "zh-CN") : id01Text.localeCompare(id02Text, "zh-CN");
        });
        appendToTbody(trArray);
    }
    //数组排序之后把排序好的内容再次追加到数组中
    function appendToTbody(trArray) {
        for (let i = 0, j = trArray.length; i < j; i++) {
            tbody.appendChild(trArray[i]);
        }
        //取反可来回调换
        isDescending = !isDescending;
    }
</script>
</body>
</html>

6. 数据存储

概念： 利用JS在客户端存储数据有三种办法：

  • cookie：cookie存储的数据在同一域名下共享，一个浏览器最多创建300个cookie，且每个cookie大小不能超过4KB，具体视浏览器而定，cookie存储方便，但不安全且占用带宽：
    • document.cookie="k=v"：cookie同名覆盖，默认有效期是session级，即随浏览器关闭而死亡。
    • document.cookie="k=v;expires=eDay"：利用 expires 手动设定过期日期，-1表示立即失效。
    • document.cookie：获取客户端的所有cookie，是一个由 ; 分隔的字符串。

谷歌浏览器的Cookie可以在 F12-Application-Cookies 中点击查看，若不支持本地测试Cookie，可以换成IE或者FF来测试。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<button id="test-cookie" type="button">测试cookie</button>
<br/>
<button id="set-cookie" type="button">测试setCookie()</button>
<br/>
<button id="get-cookie" type="button">测试getCookie()</button>
<br/>
<button id="delete-cookie" type="button">测试delCookie()</button>
<br/>


<script type="text/javascript">
    window.onload = () => {
        document.querySelector("#test-cookie").onclick = () => {
            document.cookie = "a=1";
            document.cookie = "a=2";
            document.cookie = "b=3";
            console.log(document.cookie);
        };

        document.querySelector("#set-cookie").onclick = () => {
            setCookie("a", "1");
            setCookie("b", "2", 1);
            setCookie("b", "3", 4);
            setCookie("c", "4", -1);
            console.log(document.cookie);
        };

        document.querySelector("#get-cookie").onclick = () => {
            setCookie("user", "joe");
            console.log(getCookie("user"));
            console.log(getCookie("username"));
        };

        document.querySelector("#delete-cookie").onclick = () => {
            setCookie("user", "joe");
            console.log(getCookie("user"));
            delCookie("user");
            console.log(getCookie("user"));
        };
    };

    //存值 ：键值对的方法 和过期时间
    function setCookie(key, value, eDay = 1) {
        let now = new Date();
        //当前日期和输入的天数
        let new_data = now.getDate() + eDay;
        now.setDate(new_data);
        //存入 输入的值和过期时间
        document.cookie = `${key}=${value};expires=${now}`;
    }
        //取值
    function getCookie(key) {
        let result = null;
        //存入数组并用分号空格分离开来
        let cookies = document.cookie.split("; ");
        //循环数组的值
        for (let i = 0, j = cookies.length; i < j; i++) {
            //如果输入的值和已存在的值一样用=号连接
            let kvs = cookies[i].split("=");
            if (kvs[0] === key) {
                result = kvs[1];
                break;
            }
        }
        return result;
    }
    //删除值
    function delCookie(key) {
        //如果存在就删除
        if (getCookie(key)) {
            setCookie(key, "", -1);
        }
    }
</script>
</body>
</html>

案例：七天免密

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<section>
    <form id="login-form" action="http://www.baidu.com" method="get">
        <label>
            <input id="username-ipt" name="username"/>
        </label>
        <label>
            <input id="password-ipt" name="password" type="password"/>
        </label>
        <label>
            <input id="no-password-cbx" type="checkbox"/>七天免密
        </label>
        <button id="login-btn" type="button">登录</button>
    </form>
</section>

<script type="text/javascript">
    /* 需求：以帐号以 admin/123 为例：
    1. 当第一次使用 admin/123 进行登录时：
        - 如果不勾选[7天免密]，直接跳入主页面，cookie中不会记录任何信息。
        - 如果勾选了[7天免密]，将帐号密码存入cookie中，并设置7天后过期。
    2. 当我在该 admin/123 过期前（7天内），再次登录时：
        - 帐号框键入admin之后，密码框自动注入123，[7天免密]自动勾选。
        - 帐号框键入admin之后，手动取消了勾选[7天免密]，则admin/123将从cookie中被移除。
    */
    window.onload = () => {
        let usernameIpt = document.querySelector("#username-ipt");
        let passwordIpt = document.querySelector("#password-ipt");
        let noPasswordCbx = document.querySelector("#no-password-cbx");
        let loginBtn = document.querySelector("#login-btn");
        let loginForm = document.querySelector("#login-form");

        loginBtn.onclick = () => {
            //如果选中了点击框 用checked
            if (noPasswordCbx.checked) {
                //选中后存所有值
                setCookie(usernameIpt["value"], passwordIpt["value"], 7);
            } else {
                //没选中就删除当前存在的值
                delCookie(usernameIpt["value"]);
            }
            //手动提交表单
            loginForm.submit();
        };
        //当文本框丧失焦点时触发的事件。
        //账号框丧失焦点后
        usernameIpt.onblur = () => {
            //账号登录过输入，第二次输入账号就会自动获取密码
            let passwordFromCookie = getCookie(usernameIpt["value"]);
            if (passwordFromCookie) {
            //密码的值和账号如果匹配上
                passwordIpt["value"] = passwordFromCookie;
                //选中
                noPasswordCbx.checked = "checked";
            }
        }
    };

    //存值 ：键值对的方法 和过期时间
    function setCookie(key, value, eDay = 1) {
        let now = new Date();
        //当前日期和输入的天数
        let new_data = now.getDate() + eDay;
        now.setDate(new_data);
        //存入 输入的值和过期时间
        document.cookie = `${key}=${value};expires=${now}`;
    }
        //取值
    function getCookie(key) {
        let result = null;
        //存入数组并用分号空格分离开来
        let cookies = document.cookie.split("; ");
        //循环数组的值
        for (let i = 0, j = cookies.length; i < j; i++) {
            //如果输入的值和已存在的值一样用=号连接
            let kvs = cookies[i].split("=");
            if (kvs[0] === key) {
                result = kvs[1];
                break;
            }
        }
        return result;
    }
    //删除值
    function delCookie(key) {
        //如果存在就删除
        if (getCookie(key)) {
            setCookie(key, "", -1);
        }
    }
</script>

</body>
</html>
avatar
文章
阅读
粉丝