个人练习:结合cookie和动态结点插入做的可存储的用户名存储系统(id具有唯一性)

最新推荐文章于 2024-05-08 10:46:54 发布

Seeker-Joseph

最新推荐文章于 2024-05-08 10:46:54 发布

阅读量141

点赞数

分类专栏：个人练习文章标签： cookie javascript

本文链接：https://blog.csdn.net/weixin_51458883/article/details/115838712

版权

个人练习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

#结合cookie和动态结点插入做的可存储的用户名存储系统(id具有唯一性)

注意:要有端口才能运行以下代码,如果单单打开，cookie是不能存的
访问服务器上的html文件是以http的协议方式去打开，有网络交互。
直接打开html文件是以file协议的方式去打开，没有网络交互。
此为个人研究练习
缺点:id具有唯一性

个人cookie练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ID具有唯一性</title>
    <style>
      button {
        margin: 10px auto;
        padding: 10px;

        height: 50px;
        width: 300px;
        border: 1px black solid;
        border-radius: 50px;
        outline: none;

        cursor: pointer;
      }
      .list {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        margin: 5em auto;
        width: 400px;
        /* height: 300px; */
        text-align: center;

        border: 2px solid black;
        border-radius: 10px;

        box-shadow: 0 2px 5px 0 #666;
      }
      .list div {
        margin: 10px 0;
        display: flex;
        align-items: center;
      }
      .name {
        width: 100px;
        flex-shrink: 0;
        text-align: center;
        font-weight: bold;
      }
      .data {
        flex-grow: 1;
      }
    </style>
  </head>
  <body>
    <button id="visit" onclick="see()">显示cookie</button>
    <button id="add" onclick="add1();">增加1个cookie</button>
    <button id="del" onclick="del1()">
      删除1个cookie(注意:一旦删除改id不可恢复)
    </button>
    <button id="modify" onclick="mod1()">修改cookid</button>
    <button id="clear" onclick="clear1()">清空所有cookie(ID重置)</button>
    <div class="info"></div>
  </body>

  <script type="text/javascript">
    let info = document.getElementsByClassName("info")[0];

    window.i = document.cookie.split(";").length;
    //首先获取cookie是否存在
    if (i == 1) {
      clear1();
    } else {
      //获取cookie中最后一个id的数字

      window.maxnum =
        Number(document.cookie.split(";")[i - 1].split("=")[0].split("y")[1]) +
        1;
    }

    //增加cookie需要调用的函数
    function addCookie(key, value, exdays) {
      var d = new Date();
      d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
      var expires = "expires=" + d.toGMTString();
      document.cookie = key + "=" + value + ";" + expires;
    }

    //清除cookie
    function clear1() {
      document.cookie = "keyNaN=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
      for (let k = 0; k <= 100; k++) {
        document.cookie = `key${k}=; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
      }
      window.i = 0;
      window.maxnum = window.i + 1;
      see();
    }

    //浏览并排序功能
    function see() {
      //判断cookie里面是否为空
      if (document.cookie != "") {
        if (window.i == 1) {
          let m = document.cookie.split("=");
          htmlCode = `
      <div class="list">
      <div>
        <span class="name">Id:${m[0]}</span>
        <span class="data">name:${m[1]}</span>
      </div>
      </div>`;
          info.innerHTML = htmlCode;
        } else {
          let x = document.cookie.split(";");
          //这一块是排序id值
          let len = x.length;
          for (let k = 0; k < len - 1; k++) {
            for (let j = k + 1; j < len; j++) {
              let l1 = Number(x[k].split("=")[0].split("y")[1]);
              let l2 = Number(x[j].split("=")[0].split("y")[1]);
              if (l1 > l2) {
                let temp = x[k];
                x[k] = x[j];
                x[j] = temp;
              }
            }
          }

          //获取最大id下标
          window.maxnum = Number(x[len - 1].split("=")[0].split("y")[1]) + 1;

          var htmlCode = "";
          for (let k = 0; k <= window.i - 1; k++) {
            if (x[k] != "" && x[k] != null) {
              let m = x[k].split("=");
              htmlCode += `
      <div class="list">
      <div>
        <span class="name">Id:${m[0]}</span>
        <span class="data">name:${m[1]}</span>
      </div>
    </div>`;
            }
          }
        }
        info.innerHTML = htmlCode;
      } else {
        info.innerHTML = `
      <div class="list"  style="padding-left:10px;color: red;">
      <div  >
        当前没有cookie！！！
      </div>
    </div>`;
      }
    }

    //增加功能
    function add1() {
      var user = prompt("请输入一个新的用户名:", "");
      if (user != "" && user != null) {
        addCookie(`key${maxnum}`, user, 30);
        window.i++;
        window.maxnum++;
      }
      see();
    }

    //删除功能
    function del1() {
      //num转化数字
      var num = Number(prompt("请输入要删除第几个key", ""));
      if (num > 0 && num < window.maxnum) {
        document.cookie = `key${num}=; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
      } else {
        alert("请输入正确的数字！");
      }
      window.i = document.cookie.split(";").length;

      see();
    }

    //修改
    function mod1() {
      var num = Number(prompt("请输入要修改第几个key", ""));
      if (num > 0 && num < window.maxnum) {
        let user = prompt("请输入一个新的用户名:", "");

        addCookie(`key${num}`, user, 30);
      } else {
        alert("请输入正确的数字！");
      }
      window.i = document.cookie.split(";").length;
      
      see();
    }
  </script>
</html>

Seeker-Joseph

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
个人练习:结合cookie和动态结点插入做的可存储的用户名存储系统(id具有唯一性)

#结合cookie和动态结点插入做的可存储的用户名存储系统(id具有唯一性)注意:要有端口才能运行以下代码,如果单单打开，cookie是不能存的访问服务器上的html文件是以http的协议方式去打开，有网络交互。直接打开html文件是以file协议的方式去打开，没有网络交互。此为个人研究练习缺点:id具有唯一性个人cookie练习 <!DOCTY
复制链接

扫一扫