首页/ 填坑/ 文章详情

Cookie模块化,懒人至上

Cookie缓存是网页常用功能之一,记录账号、缓存设置和统计触发次数等,涉及到网页的方方面面应用,给网页增加灵性。

document.cookie 参数:

参数名 必选 类型 说明
key String 缓存数据的唯一名称,同名会覆盖
expires String 有效时间,格林威治时间,如:Thu, 1 Dec 2021 00:00:00
path String 路径,默认:/
domain String 域名,同个域名下,有多个子域,需要指定个域名,防止值乱窜

JSdocument.cookie="key=value; expires=Thu, 1 Dec 2021 00:00:00 GMT; path=/";

Javascript 虽然给出 document.cookie 缓存功能,不过缓存过程数据处理过于繁琐,不利于直接使用。为此,需要将这些过程封装,简化,参考 PHP 的 Cookie 函数设计出新的 Javascript 版的 Cookie 函数。

set 函数:

JS/**
 * 设置cookie的数据
 * @param {String} key 关键字
 * @param {String} value 值
 * @param {Number} days 天数
 */
var set = function (key, value, days) {
    var days = days || 7;
    var exp = new Date();
    exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
    document.cookie = key + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";path=/;domain=" + window.location.host;
}

缓存数据,首先确定缓存参数名称,起名一般需要加前缀,如用户的名称:u_name。参数名同路径上是唯一的,重名会覆盖前面的参数值。其二缓存时间,缓存的时间从当前开起算起,一般按天数来缓存,超出指定时间,缓存值自动消失。

※ 同个域名下,多个子域名,需要定义domin值,防止设置的值不生效。

get 函数:

JS/**
 * 获得cookie值
 * @param {String} key 关键字
 * @returns {null}
 */
var get = function (key) {
    var arr = document.cookie.match(new RegExp("(^| )" + key + "=([^;]*)(;|$)"));
    if (arr != null) {
        return unescape(arr[2]);
    } else {
        return null;
    }
}

获取缓存值,知道缓存的参数名称,可获得值。提前注意,缓存的值有可能没有赋值或已失效,默认返回 null

del 函数:

JS/**
 * 删除cookie值
 * @param {String} key 关键字
 */
var del = function (key) {
    var val = get(key);
    var exp = new Date();
    exp.setTime(exp.getTime() - 1000);
    if (val != null) {
        document.cookie = key + "=" + val + ";expires=" + exp.toGMTString() + ";path=/;domain=" + window.location.host;
    }
}

删除缓存值,知道缓存的参数名称,重新将有效时间设置为过去时间,值自动失效。

定义三个函数后,肯定不能直接单独放出来使用,会「污染」全局变量,容易造成函数名冲突,而且时间久了,看不出三个函数之间有什么关联性。基于三个函数的基础上,进一步封装,模块化。

JS/**
 * cookie
 * 操作cookie的添加、修改和删除
 *
 * @author keepsilent
 * @version 1.0.0
 */
var cookie = (function () {

   //do something
   ...

    return {
        set: set,
        get: get,
        del: del
    }
})();

模块化的后使用:

JScookie.set('u_name','keepsilent');
console.log('name:',cookie.get('u_name'))); //输出结果 name: keepsilent

cookie.del('u_name');
console.log('name:',cookie.get('u_name'))); //输出结果 name: null

缓存 Cookie 值有个缺点,只能存储字符串数据。解决这个问题也很简单,先将数据转换成对象,再转义成字符串,这里使用到 JSON.stringify JSON.parse 进行加密与解密即可。

JSON.stringify:对象转义成字符串

JSvar user = { name: 'keepsilent', sex: '男'};
cookie.set('user',JSON.stringify(user)));

JSON.parse:字符串转义对象

JSvar user = { name: 'keepsilent', sex: '男'};
cookie.set('user',JSON.stringify(user)));

文章评论0 records

最新 最早

0

最新评论Latest comments

唐牛才是食神唐牛才是食神 06-15 10:51
(*°▽°*)八(*°▽°*)♪,解决了
唐牛才是食神唐牛才是食神 06-15 10:49
发现不得了的东西,今晚回去好好研究下...
胖螺胖螺 02-04 00:58
( ゜- ゜)つロ 在写了在写了。看到也有些感慨。因为站长前年在我原博客的留言,让我毅然选择去深造,选择读研,曾经我想过挺多东西的,还是自己本专业的适合我自己。在这先表达感谢。新年快乐!
强哥强哥 2021-12-08 15:49
怎么看文章作者是谁呀?
big2catbig2cat 2021-08-27 16:11
然而没什么用,smartpss不兼容老录像机,就算能看回放,很多时间点在回放里也看不到