纯js前端读写cookie

djk8888

87人浏览 · 2026-02-28 14:08:29

djk8888 · 2026-02-28 14:08:29 发布

主要的function

   <script>
       // 设置cookie
       function setCookie(name, value, days) {
           let expires = "";
           if (days) {
               let date = new Date();
               date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
               expires = "; expires=" + date.toUTCString();
           }
           document.cookie = name + "=" + value + expires + "; path=/";
       }

       // 获取cookie
       function getCookie(name) {
           let nameEQ = name + "=";
           let cookies = document.cookie.split(';');
           for (let i = 0; i < cookies.length; i++) {
               let cookie = cookies[i];
               while (cookie.charAt(0) == ' ') cookie = cookie.substring(1);
               if (cookie.indexOf(nameEQ) == 0) return cookie.substring(nameEQ.length);
           }
           return null;
       }

       // 删除cookie
       function deleteCookie(name) {
           document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
       }
   </script>

写入cookie:

var USERNAME = $("#USERNAME").val();
setCookie('USERNAME', USERNAME, 30);

读取cookie:

let USERNAME = getCookie('USERNAME');  
$("#USERNAME").val(USERNAME);

完整例子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>登录</title>
    @*<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.8.18/css/layui.css">*@
    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Content/layui/jquery.min.js.js"></script>
    <style>
        /* 全局适配手机 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            /*background-color: #f5f5f5;*/
            background-color: #1E9FFF;
            font-size: 14px;
        }
        /* 登录容器 */
        .login-container {
            width: 90%;
            max-width: 400px;
            margin: 50px auto;
            padding: 20px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .login-title {
            text-align: center;
            font-size: 18px;
            color: #333;
            margin-bottom: 20px;
            font-weight: 600;
        }
        .layui-form-item {
            margin-bottom: 15px;
        }
        .layui-btn {
            width: 100%;
            height: 44px;
            line-height: 44px;
            font-size: 16px;
        }
        /* 适配小屏手机 */
        @@media screen and (max-width: 375px) {
            .login-container {
                margin: 30px auto;
                padding: 15px;
            }
            .layui-btn {
                height: 40px;
                line-height: 40px;
            }
        }

        .verification-code {
            /* 基础字体设置 - 优先使用无衬线字体，避免模糊 */
            font-family: "Courier New", Courier, monospace, "Microsoft YaHei", sans-serif;
            /* 字体大小 - 保证清晰可见 */
            font-size: 18px;
            /* 字体加粗 - 增强辨识度 */
            font-weight: 700;
            /* 字母大小写 - 统一为大写，减少混淆 */
            text-transform: uppercase;
            /* 字间距 - 增加字符间区分度 */
            letter-spacing: 6px;
            /* 禁止文字选中 - 提升用户体验 */
            user-select: none;
            /* 抗锯齿优化 - 让字体边缘更清晰 */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            /* 可选：轻微倾斜，增加机器识别难度 */
            transform: skew(-2deg);
            /* 可选：文字颜色（建议搭配背景色对比强烈） */
            color: #333;
            /* 可选：背景色 */
            background-color: #f5f5f5;
            /* 可选：内边距和圆角 */
            padding: 8px 16px;
            border-radius: 4px;
        }

    </style>
    <script>
        $(function () {
            Init();           
        });
        function Init() {
            const params = new URLSearchParams(window.location.search);
            const a = params.get('a');
            if (a) {           
                //generateSimpleCode();//刷新验证码

                //cookie
                let USERNAME = getCookie('USERNAME');  // 返回 "用户名"
                if (USERNAME) {
                    $("#USERNAME").val(USERNAME);
                    $('#myCheckbox').prop('checked', true); // true = 勾选
                }
                else {
                    $('#myCheckbox').prop('checked', false); // false = 取消勾选
                }

                let PASSWORD = getCookie('PASSWORD');  // 返回 "密码"
                if (PASSWORD) {
                    $("#PASSWORD").val(PASSWORD);
                    $('#myCheckbox').prop('checked', true); // true = 勾选
                } else {
                    $('#myCheckbox').prop('checked', false); // false = 取消勾选
                }
            }
            else {
                window.location.href = window.location.href + '?a=8744E15A-0E97-41FB-A63B-99FC563232DE';
            }
        }
        function generateSimpleCode() {        
            const chars = '23456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz';// 字符池：排除0/O/1/l/I等易混淆字符
            let code = '';
            // 循环4次生成随机字符
            for (let i = 0; i < 4; i++) {
                // 随机选取字符池中的一个字符
                const randomIndex = Math.floor(Math.random() * chars.length);
                code += chars[randomIndex];
            }
            //return code;
            $("#BTN_CODE").val(code);
        }

    </script>


    <script>
        // 设置cookie
        function setCookie(name, value, days) {
            let expires = "";
            if (days) {
                let date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                expires = "; expires=" + date.toUTCString();
            }
            document.cookie = name + "=" + value + expires + "; path=/";
        }

        // 获取cookie
        function getCookie(name) {
            let nameEQ = name + "=";
            let cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                let cookie = cookies[i];
                while (cookie.charAt(0) == ' ') cookie = cookie.substring(1);
                if (cookie.indexOf(nameEQ) == 0) return cookie.substring(nameEQ.length);
            }
            return null;
        }

        // 删除cookie
        function deleteCookie(name) {
            document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
        }
    </script>
</head>
<body>
    <div class="login-container">
        <div class="login-title">用户登录</div>

        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" id="USERNAME" lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" id="PASSWORD" lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        @*<div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-block">
                <table>
                    <tr>
                        <td><input type="text" id="CODE" lay-verify="required" placeholder="验证码" maxlength="4" autocomplete="off" class="layui-input" style="width:100px;"></td>
                        <td>&nbsp;<input type="button" id="BTN_CODE"  lay-verify="required" class="verification-code" style="width:90px; height:32px;" value="" onclick="generateSimpleCode()"></td>
                    </tr>
                </table>
            </div>
        </div>*@
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <input type="checkbox" id="myCheckbox" />记住密码
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="button" id="login" class="layui-btn" value="登录" onclick="Login()" />
            </div>
        </div>
    </div>

    @*<script src="https://cdn.staticfile.org/layui/2.8.18/layui.js"></script>*@
    <script src="~/Content/layui/layui.js"></script>
    <script>
        function Login() {
            //var BTN_CODE = $("#BTN_CODE").val().toUpperCase();
            //var CODE = $("#CODE").val().toUpperCase();
            var USERNAME = $("#USERNAME").val();
            var PASSWORD = $("#PASSWORD").val();
            var CK = 0;
            const params = new URLSearchParams(window.location.search);
            const CMPID = params.get('a');

            //if (CODE) {
                //if (BTN_CODE == CODE) {
                    //layer.msg('验证码输入正确！');
                    if (USERNAME && PASSWORD) {
                        $.ajax({
                            data: {
                                USERNAME: USERNAME,
                                PASSWORD: PASSWORD,
                                Key: CMPID,
                                CK: CK,
                                OPRTYPE: 0
                            },
                            type: "post",
                            dataType: "json",
                            url: "/Home/LoginYz",
                            async: false,
                            success: function (res) {
                                debugger;
                                if (res.UID > 0) {
                                    //cookie
                                    if ($('#myCheckbox').prop('checked')) {
                                        setCookie('USERNAME', USERNAME, 30);
                                        setCookie('PASSWORD', PASSWORD, 30);
                                    } else {
                                        setCookie('USERNAME', "", 30);
                                        setCookie('PASSWORD', "", 30);
                                    }
                                    window.location.href = "/Minisite/Index";
                                } else {
                                    layer.alert(res.msg, { title: '登录失败', icon: 5 });
                                }
                            }
                        });
                    }
                    else {
                        layer.msg('请输入用户名和密码！');
                    }
                //}
                //else {
                //    layer.msg('验证码输入错误！');
                //    generateSimpleCode();
                //}
            //}
            //else {
            //    layer.msg('请输入验证码！');
            //}
        }
    </script>
</body>
</html>

天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

deck.gl TripsLayer 出租车轨迹动画示例实战：从示例运行到着色器原理

TripsLayer 是 deck.gl 中用于渲染**随时间流动的轨迹动画**（如出租车行程、物流路径、迁徙路线）的核心图层。本文以仓库中的最小独立示例 [examples/website/trips](https://link.gitcode.com/i/1442af8f442f4cff39ff546e050fceb5) 为骨架，带你完成从安装依赖、启动应用、理解曼哈顿出租车数据格式，到深入

天工造物局

Foundry Anvil 中 eth_simulateV1 的 Blob 交易与 Blob Gas 字段规范化：原理、实现与测试验证

本篇技术指南以 [anvil-simulate-blob-transactions.md](https://link.gitcode.com/i/3d2ebe227262de169335eb290af80da8) 这条 changelog 条目为起点，深入剖析 Foundry Anvil 对 `eth_simulateV1` RPC 返回结果中 blob（EIP-4844）交易与 blob gas

天工造物局

LMCache CLI 实战：用 `lmcache kvcache clear` 管理运行中服务的 KV Cache 状态

本文是一份针对 LMCache 官方 CLI 命令 `lmcache kvcache` 的完整技术指南。该命令用于在**运行中的 LMCache 服务（MP HTTP server）**上管理 KV cache 状态，当前提供 `clear` 子命令，用于清空 L1（CPU 内存）层中缓存的全部 KV 数据。读完本文，你将掌握该命令的完整参数体系、退出码语义、终端/JSON/静默三种输出模式，并能