JavaScript制作的Cookie封装及使用指南

什么是Cookie

Cookie是服务器下发到客户端浏览器，由浏览器进行存储的一种数据。通常包括cookie名称，cookie值，过期时间，路径等内容。可以在后续的浏览器请求中提供给服务器进行识别并进行相应的操作。

JavaScript制作Cookie的封装

封装步骤

1. 创建cookie
2. 获取cookie
3. 删除cookie

需要使用到的JavaScript方法

• encodeURIComponent()，将cookie值编码以避免出现特殊字符
• decodeURIComponent()，解码cookie值
• Document.cookie，获取/设置cookie

封装示例代码

var cookieUtil = {
    set: function(name, value, expires, path, domain, secure) {
        var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
        if (expires instanceof Date) {
            cookieText += '; expires=' + expires.toGMTString();
        }
        if (path) {
            cookieText += '; path=' + path;
        }
        if (domain) {
            cookieText += '; domain=' + domain;
        }
        if (secure) {
            cookieText += '; secure';
        }
        document.cookie = cookieText;
    },
    get: function(name) {
        var cookieName = encodeURIComponent(name) + '=',
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null;
        if (cookieStart > -1) {
            var cookieEnd = document.cookie.indexOf(';', cookieStart);
            if (cookieEnd == -1) {
                cookieEnd = document.cookie.length;
            }
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
        }
        return cookieValue;
    },
    delete: function(name, path, domain, secure) {
        this.set(name, '', new Date(0), path, domain, secure);
    }
}

JavaScript制作Cookie的使用指南

设置Cookie

cookieUtil.set('name', 'value');

name和value分别为cookie的名称和值。

可以自己设置cookie的过期时间、路径、作用域以及是否为安全协议。

cookieUtil.set('name', 'value', new Date(Date.now() + 10 * 86400000), '/', 'localhost', true);

其中new Date(Date.now() + 10 * 86400000)表示设置过期时间为当前时间加10天。

获取Cookie

var cookieValue = cookieUtil.get('name');

cookieValue就是name对应的值。

删除Cookie

cookieUtil.delete('name');

删除设置的cookie，可以通过重新设置cookie的过期时间为0来实现。

使用示例

示例1：记录用户首次访问时间和访问次数

// 获取cookie中的首次访问时间
var firstVisit = cookieUtil.get('firstVisit');

// 如果cookie中没有首次访问时间，则在客户端设置首次访问时间和访问次数为0
if (!firstVisit) {
    cookieUtil.set('firstVisit', new Date().toString());
    cookieUtil.set('visitCount', 0);
} else { // 如果有首次访问时间，则将访问次数加1并重新设置cookie
    cookieUtil.set('visitCount', parseInt(cookieUtil.get('visitCount')) + 1);
}

// 获取当前访问次数
var visitCount = cookieUtil.get('visitCount');
console.log('First visit:', firstVisit, 'Visit count:', visitCount);

示例2：实现用户登录状态保持

可以在用户登录成功后，将用户信息存储在cookie中，以实现用户登录状态的保持。

// 用户登录成功后将用户名存储在cookie中
cookieUtil.set('username', 'testUser');

// 下次进入页面时，检测是否有cookie信息，如果有则直接做登录状态判断
if (cookieUtil.get('username')) {
    console.log('User has already signed in');
} else {
    console.log('User has not signed in');
}

总结

通过这篇文章，我们了解了JavaScript制作的Cookie封装及使用指南，可以方便地进行Cookie的操作，包括设置cookie、获取cookie以及删除cookie。同时也给出了两个实际应用的示例，希望能够对大家有所帮助。