JQuery-cookies基础用法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 jQuery（建议使用CDN或本地文件） -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <!-- 引入 jquery-cookie（CDN） -->
    <script src="https://cdn.jsdelivr.net/npm/jquery.cookie@1.4.1/jquery.cookie.min.js"></script>
    <!-- 也可以下载到本地引入：<script src="js/jquery.cookie.min.js"></script> -->

</head>
<body>
<script>
    // 设置键值对
    $.cookie('username', 'zhangsan');
    // 设置过期时间为1分钟
    var expireTime = new Date();
    expireTime.setSeconds(expireTime.getSeconds() + 60); // 加1分钟（60秒）
    $.cookie('username', 'zhangsan', {expires: expireTime});
    // 完整配置（有效期、路径、域名、是否加密传输）
    $.cookie('username', 'zhangsan', {
        expires: expireTime,        // 有效期（天），也可以传Date对象（如new Date(2026, 12, 31)）
        path: '/',         // 生效路径，/ 表示全站生效（默认当前页面路径）
        domain: '.example.com', // 生效域名（如二级域名共享Cookie，需加前缀.）
        secure: true
    })     // 仅在HTTPS协议下传输（生产环境建议开启）
    
    // 读取cookies
    // 读取单个Cookie
    var username = $.cookie('username');
    console.log(username); // 输出：zhangsan
    
    // 读取所有Cookie（返回对象，键值对形式）
    var allCookies = $.cookie();
    console.log(allCookies); // 输出：{username: "zhangsan", ...}
    
    // 读取不存在的Cookie，返回undefined
    var nonExist = $.cookie('nonExistKey');
    console.log(nonExist); // 输出：undefined
    
    
    // 存储对象
    var userInfo = {name: '张三', age: 20};
    $.cookie('userInfo', JSON.stringify(userInfo), {expires: 7});
    // 读取并解析
    var user = JSON.parse($.cookie('userInfo'));
    console.log(user.name); // 输出：张三
</script>
</body>
</html>

运行结果如下所示：

image

posted @ 2026-03-23 16:32  chenlight  阅读(3)  评论(0)    收藏  举报