用js读、写、删除Cookie代码分享及详细注释说明

下面为大家分享JS读、写、删除Cookie的攻略，首先我们来简单了解一下Cookie。

Cookie简介

Cookie是一种存储在用户计算机上的小文件，它可以存储网站发送到用户计算机上的信息，以便于在用户下一次访问同一网站时使用，它属于浏览器缓存的一种。当然，Cookie的存储大小是有限制的，一般不超过4KB。

读Cookie

读取Cookie很简单，我们可以通过 document.cookie 来获取本地 Cookie 信息，该属性返回当前页面的所有 Cookie 信息。

function readCookie(name) {
    const cookies = document.cookie.split(';')
    for(let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i].trim()
        if(cookie.startsWith(name + "=")) {
            return cookie.substring(name.length + 1,cookie.length)
        }
    }
    return null
}
console.log(readCookie('name'))

通过上方代码的实现，我们可以根据 Cookie 名称来获取到对应 Cookie 的值。

写Cookie

写Cookie其实也十分简单，我们可以使用 document.cookie 来存储 Cookie，这边代码包装了一个完整的写入函数示例。

function writeCookie(name, value, days, path='/') {
    let expires = ''
    if(days) {
        const date = new Date()
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000))
        expires = '; expires=' + date.toUTCString()
    }
    document.cookie = name + '=' + value + expires + '; path=' + path;
}

writeCookie('name', '张三', 7)

以上代码说明了如何设置一个名为name，值为张三，有效期为7天的Cookie，如果.days=0，则代表本次会话，关闭浏览器即失效。

删除Cookie

Cookie的删除也很简单，我们只需要重置其有效时间即可，让其过期即可。

function deleteCookie(name) {
    document.cookie = name + "=; expires=Thu, 01-Jan-70 00:00:01 GMT; path=/";
}

deleteCookie('name')

以上示例中，我们通过将过期时间设置为1970年来删除一个名为name的Cookie。

总结

综上所述，通过以上的示例，我们可以很方便地对 Cookie 进行操作。需要注意的是，Cookie 受限于空间大小和浏览器限制，批量写入 Cookie 时需要注意 Cookie 的数量和大小。