资讯专栏INFORMATION COLUMN

JS学习笔记 - 封装 Cookie 应用接口

oneasp / 2764人阅读

摘要:本文章记录本人在学习中看书理解到的一些东西,加深记忆和并且整理记录下来,方便之后的复习。封装函数在默认的情况下存取是一件比较麻烦的事情。而且信息的字符串本身就令人讨厌,在经常使用信息的应用中格外的不方便。

  

本文章记录本人在学习 Cookie 中看书理解到的一些东西,加深记忆和并且整理记录下来,方便之后的复习。

封装函数

在默认的情况下存取Cookie是一件比较麻烦的事情。由于Cookie是通过字符串来存储信息的,所以容易导致在执行赋值运算的时需要转换读取信息的数据类型。而且Cookie信息的字符串本身就令人讨厌,在经常使用Cookie信息的 Web 应用中格外的不方便。所以需要自行的封装一个Cookie函数来提供开发效率!

定义一个函数Cookie(),这个函数能够写入指定的Cookie信息,删除指定的Cookie信息,也能够读取指定名称的Cookie值,另外,在该函数中还可以制定Cookie信息的有效期、有效路径、作用域和安全性选项设置。完整的代码:

JavaScriptvar Cookie = function(name, value, options) {
        // 如果第二个参数存在
        if (typeof value != "undefined") {
            options = options || {};
            if (value === null) {
                // 设置失效时间
                options.expires = -1;
            }
            var expires = "";
            // 如果存在事件参数项,并且类型为 number,或者具体的时间,那么分别设置事件
            if (options.expires && (typeof options.expires == "number" || options.expires.toUTCString)) {
                var date;
                if (typeof options.expires == "number") {
                    date = new Date();
                    date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
                } else {
                    date = options.expires;
                }
                expires = "; expires=" + date.toUTCString();
            }
            var path = options.path ? "; path=" + options.path : "", // 设置路径
                domain = options.domain ? "; domain=" + options.domain : "", // 设置域 
                secure = options.secure ? "; secure" : ""; // 设置安全措施,为 true 则直接设置,否则为空

            // 把所有字符串信息都存入数组,然后调用 join() 方法转换为字符串,并写入 Cookie 信息
            document.cookie = [name, "=", encodeURIComponent(value), expires, path, domain, secure].join(""); 
        } else { // 如果第二个参数不存在
            var CookieValue = null;
            if (document.cookie && document.cookie != "") {
                var Cookie = document.cookie.split(";");
                for (var i = 0; i < Cookies.length; i++) {
                    var Cookie = (Cookie[i] || "").replace( /^s+|s+$/g, "");
                    if (Cookie.substring(0, name.length + 1) == (name + "=")) {
                        CookieValue = decodeURIComponent(Cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return CookieValue;
        }
    };
如何使用

写入Cookie信息:

JavaScript// 简单写入一条 Cookie 信息
cookie("user", "baidu");
// 写入一条 Cookie 信息,并且设置更多选项
cookie("user", "baidu", {
    expires: 10, // 有效期为 10 天
    path: "/", // 整个站点有效
    domain: "www.baidu2.com", // 有效域名
    secure: true // 加密数据传输
});

2.读取Cookie信息:

JavaScriptcookie("user");

3.删除Cookie信息:

JavaScriptcookie("user", null);
  

最后,如果文章有什么错误和疑问的地方,请指出。与sf各位共勉!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85747.html

相关文章

  • 前端相关大杂烩

    摘要:希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎,由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时,老司机们首先就会告诉你其实是个没有网络请求功能的库。 前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单 原文地址:Learning React.js is easier than you think 原文作...

    fuyi501 评论0 收藏0
  • 全栈开发自学路线

    摘要:前言这里筑梦师是一名正在努力学习的开发工程师目前致力于全栈方向的学习希望可以和大家一起交流技术共同进步用简书记录下自己的学习历程个人学习方法分享本文目录更新说明目录学习方法学习态度全栈开发学习路线很长知识拓展很长在这里收取很多人的建议以后决 前言 这里筑梦师,是一名正在努力学习的iOS开发工程师,目前致力于全栈方向的学习,希望可以和大家一起交流技术,共同进步,用简书记录下自己的学习历程...

    wwolf 评论0 收藏0
  • 全栈开发自学路线

    摘要:前言这里筑梦师是一名正在努力学习的开发工程师目前致力于全栈方向的学习希望可以和大家一起交流技术共同进步用简书记录下自己的学习历程个人学习方法分享本文目录更新说明目录学习方法学习态度全栈开发学习路线很长知识拓展很长在这里收取很多人的建议以后决 前言 这里筑梦师,是一名正在努力学习的iOS开发工程师,目前致力于全栈方向的学习,希望可以和大家一起交流技术,共同进步,用简书记录下自己的学习历程...

    CoXie 评论0 收藏0
  • 全栈开发自学路线

    摘要:前言这里筑梦师是一名正在努力学习的开发工程师目前致力于全栈方向的学习希望可以和大家一起交流技术共同进步用简书记录下自己的学习历程个人学习方法分享本文目录更新说明目录学习方法学习态度全栈开发学习路线很长知识拓展很长在这里收取很多人的建议以后决 前言 这里筑梦师,是一名正在努力学习的iOS开发工程师,目前致力于全栈方向的学习,希望可以和大家一起交流技术,共同进步,用简书记录下自己的学习历程...

    galaxy_robot 评论0 收藏0
  • 全栈开发自学路线

    摘要:前言这里筑梦师是一名正在努力学习的开发工程师目前致力于全栈方向的学习希望可以和大家一起交流技术共同进步用简书记录下自己的学习历程个人学习方法分享本文目录更新说明目录学习方法学习态度全栈开发学习路线很长知识拓展很长在这里收取很多人的建议以后决 前言 这里筑梦师,是一名正在努力学习的iOS开发工程师,目前致力于全栈方向的学习,希望可以和大家一起交流技术,共同进步,用简书记录下自己的学习历程...

    Scorpion 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<