封装一个 cookie 功能

2018-10-11 admin

在这里插入图片描述

cookie 概述

由于浏览器无状态的特性,cookie 技术应运而生,cookie 是一个会话级的存储,用于某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据(通常经过加密),通过访问某些服务器而特定携带的存储信息,不支持跨域,在浏览器清空缓存或超过有效期后失效。

JavaScript 中的 cookie

在 JavaScript 中操作 cookie 通过 document.cookie 来实现:

// 操作 cookie
document.cookie = "key1=value1; key2=value2; path=/; domain=pandashen.com";

在传递 cookie 过程中,使用上面这样的方式对于参数的传递和拼接都是不太方便的,下面我们来封装一个自己的 cookie 功能。

封装一个 cookie 模块

1、整体思路设计

(function() {
    var kvTool = {
        maxage: "max-age",
        path: "path",
        domain: "domain",
        secure: "secure"
    };

    function setCookie() {}

    function getCookie() {}

    var cookieUtil = function() {};

    window.cookieUtil = cookieUtil;
})();

我们封装了一个自执行函数,在内部将 cookie 基本参数的键名存入 kvTool 对象当中设计的 options 参数的键名一一对应,并单独声明一个设置 cookie 的方法 setCookie 和获取 cookie 的方法 getCookie,最后用函数表达式的形式声明一个 cookieUtil 暴露给全局作用域。

2、setCookie 方法的实现

(function() {
    var kvTool = {
        maxage: "max-age",
        path: "path",
        domain: "domain",
        secure: "secure"
    };

    function setCookie(k, v, options) {
        if (!options) {
            document.cookie = k + "=" + v;
        } else {
            var tmp = [];
            for (var key in options) {
                // { path='/', domain='pandashen.com' }
                tmp.push(kvTool[key] + "=" + options[key]);
            }
            document.cookie = k + "=" + v + "; " + tmp.join("; ");
        }
    }

    function getCookie() {}

    var cookieUtil = function() {};

    window.cookieUtil = cookieUtil;
})();

setCookie 方法的有三个参数:

  • k:cookie 发送信息的键
  • v:cookie 发送信息的值
  • options:cookie 的基本参数

当没有传入基本参数 options 的时候直接将 cookie 发送信息的键值拼接赋值给 document.cookie

传入基本参数 options 的时候取出 kvTool 真正的键名,并和 cookie 发送的信息的键值拼接成 k=v; k=v 形式的字符串赋值给 document.cookie

3、getCookie 方法的实现

(function() {
    var kvTool = {
        maxage: "max-age",
        path: "path",
        domain: "domain",
        secure: "secure"
    };

    function setCookie(k, v, options) {
        if (!options) {
            document.cookie = k + "=" + v;
        } else {
            var tmp = [];
            for (var key in options) {
                // { path='/', domain='pandashen.com' }
                tmp.push(kvTool[key] + "=" + options[key]);
            }
            document.cookie = k + "=" + v + "; " + tmp.join("; ");
        }
    }

    function getCookie(k) {
        var strCookie = document.cookie;
        // 形如: 'k=v; k=v; k=v; k=v'
        var kvs = strCookie.split(";").map(v => v.trim());
        var objCookie = {};

        kvs.forEach(v => {
            var kv = v.split("=");
            objCookie[kv[0]] = kv[1];
        });

        return objCookie[k];
    }

    var cookieUtil = function() {};

    window.cookieUtil = cookieUtil;
})();

getCookie 方法只有一个参数,即我们要获取的 cookie 的某一个属性的键,函数会将对应的值返回。

其实对外暴露的方法只有 cookieUtil,所以 setCookiegetCookie 都是在 cookieUtil 内部调用的。

4、cookieUtil 方法的实现

(function() {
    var kvTool = {
        maxage: "max-age",
        path: "path",
        domain: "domain",
        secure: "secure"
    };

    function setCookie(k, v, options) {
        if (!options) {
            document.cookie = k + "=" + v;
        } else {
            var tmp = [];
            for (var key in options) {
                // { path='/', domain='pandashen.com' }
                tmp.push(kvTool[key] + "=" + options[key]);
            }
            document.cookie = k + "=" + v + "; " + tmp.join("; ");
        }
    }

    function getCookie(k) {
        var strCookie = document.cookie;
        // 形如: 'k=v; k=v; k=v; k=v'
        var kvs = strCookie.split(";").map(v => v.trim());
        var objCookie = {};

        kvs.forEach(v => {
            var kv = v.split("=");
            objCookie[kv[0]] = kv[1];
        });

        return objCookie[k];
    }

    var cookieUtil = function(key, value, options) {
        if (!value) {
            // 没有传参, 得到数据
            return getCookie(key);
        } else {
            setCookie(key, value, options);
        }
    };

    window.cookieUtil = cookieUtil;
})();

cookieUtil 的逻辑为当 keyvalue 两个参数都传入时,调用 setCookie 来设置 cookie,只传入 key 时,调用 getCookie 获取 cookie 对应参数的值。

上面就是我们封装的 cookie 功能模块来帮主我们设置和获取 cookie,之所以封装这个功能最终的目的就是让我们更方便的通过 JavaScript 来操作 cookie

原文链接:https://segmentfault.com/a/1190000016653601

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42449.html

文章标题:封装一个 cookie 功能

相关文章
2015年Web:追求原有“框架”外的新功能
Web目前正在经历一场巨大的变化,ServiceWorkers、传感器访问、推送通知等方式将打破Web原有的框架。而在2015年我们可以利用这几种方式快速的改变自己的网站。在不断增多的Web功能中寻求最合适自己的功能。 Web最初的设想是一...
2015-11-12
js获取数组的最后一个元素
在js里面如何获取一个数组的最后一个元素呢?这里总结了两种方法,有需要的朋友可以看看。 (1)js内置pop方法 pop() 方法用于删除并返回数组的最后一个元素,注意这里在获取了数组的最后一个元素的同时也将原数组的最后一个元素给删除了。如...
2017-03-22
JS实现的验证身份证及获取地区功能示例
本文实例讲述了JS实现的验证身份证及获取地区功能。分享给大家供大家参考,具体如下: 这里的代码可以用来验证身份证号,并且根据身份证号来判断是哪个省份及性别 代码示例: <head > <title><&#x...
2017-03-08
Angular 6 正式发布,新功能详解
作者|Stephen Fluin编译|覃云今天,Angular 6.0.0 正式发布,新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。 这次更新还包括框架包(@angular/core、@angular/common、@...
2018-05-05
JS基于cookie实现来宾统计记录访客信息的方法
<p>本文实例讲述了JS基于cookie实现来宾统计记录访客信息的方法。分享给大家供大家参考。具体如下:</p><p>这里使用JavaScript记录访客的来宾信息,记录是第几次来访,显示的信息有:您的名...
2017-03-29
JavaScript实现基于Cookie的存储类实例
本文实例讲述了JavaScript实现基于Cookie的存储类。分享给大家供大家参考。具体分析如下: 通过这个JS类,你可以象使用session一样使用cookie,非常简单了! /* * CookieStorage.js *...
2017-03-22
使用JavaScript制作一个简单的计数器的方法
设计思想 该方法的关键是Cookie技术和动态图像特性的综合运用。使用Cookie,可以在用户端的硬盘上记录用户的数据,下次访问此站点时,即可读取用户端硬盘的Cookie,直接得知来访者的身份和访问次数等有关信息。JavaScript中通过...
2017-03-27
JavaScript获取本周周一,周末及获取任意时间的周一周末功能示例
本文实例讲述了JS获取本周周一,周末及获取任意时间的周一周末功能。分享给大家供大家参考,具体如下: 项目需要获取本周及任意一天的周一及周末 需格式化,示例代码如下: <!DOCTYPE html PUBLIC "-&#x2F...
2017-03-17
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能。分享给大家供大家参考。具体如下: JavaScript实现HTML代码预览功能,直接在网页上显示代码运行的效果,就例如点击“运行代码”后的效果,使用时,你只需将需要运行...
2017-03-27
JavaScript数组对象实现增加一个返回随机元素的方法
本文实例讲述了JavaScript数组对象实现增加一个返回随机元素的方法。分享给大家供大家参考。具体如下: 核心特性: 概率随机、顺序随机、随机冒泡 本方法 来自个人手写 JavaScript 的实践,只涉及 JavaScript 1.5(...
2017-03-27
回到顶部