面试官问：说说你对cookie的理解?

Posted 2022-03-05 咖啡壶子

前言：我相信初级前端工程师一下就会联想到localstorage，sessionStorage。接着就会回答这三者的区别，拜托，这些都不是面试官想要得到的重点信息，cookie属于计算机网络中的基础知识。那么接下来，我们从百度百科上来揭来cookie神秘的面纱。（内容都是来自大佬们的博客和社区平台）

cookie的概念

Cookie，有时也用其复数形式Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。

cookie它就好比服务器发给客户端的一个身份标识, 有了这个身份牌, 只要客户端随身携带这个身份牌. 服务器就能识别我们的身份了

cookie 的组成

Cookie是一段不超过4KB的小型文本数据，由一个名称（Name）、一个值（Value）和其它几个用于控制Cookie有效期、安全性、使用范围的可选属性组成

1. Name/Value：设置Cookie的名称及相对应的值，对于认证Cookie，Value值包括Web服务器所提供的访问令牌。
2. Expires属性：设置Cookie的生存期。有两种存储类型的Cookie：会话性与持久性。Expires属性缺省时，为会话性Cookie，仅保存在客户端内存中，并在用户关闭浏览器时失效；持久性Cookie会保存在用户的硬盘中，直至生存期到或用户直接在网页中单击“注销”等按钮结束会话时才会失效。
3. Path属性：定义了Web站点上可以访问该Cookie的目录。
4. Secure属性：指定是否使用HTTPS安全协议发送Cookie。使用HTTPS安全协议，可以保护Cookie在浏览器和Web服务器间的传输过程中不被窃取和篡改。由于许多用户缺乏安全意识，因而仍可能连接到Pharming攻击所伪造的网站。
5. HTTPOnly 属性：用于防止客户端脚本通过document.cookie属性访问Cookie，有助于保护Cookie不被跨站脚本攻击窃取或篡改。但是，HTTPOnly的应用仍存在局限性，一些浏览器可以阻止客户端脚本对Cookie的读操作，但允许写操作；此外大多数浏览器仍允许通过XMLHTTP对象读取HTTP响应中的Set-Cookie头。

cookie的读写删改操作

1.读取cookie

console.log(document.cookie) 

多条cookie之间以;  隔开，我们如果希望的到一个对象，可以封装一个方法:

/** 获取某一条cookie
 * @param string key 要获取的cookie的名称
 * @retrun string 当前这条cookie的值
 */
getCookie (key) 
    var str = document.cookie
    var arr = str.split('; ')
    var obj = new Object()
    arr.forEach(item => 
        var subArr = item.split('=')
        obj[subArr[0]] = decodeURIComponent(subArr[1])
    )
    return obj[key]

2. 写cookie

简单存储一条cookie

document.cookie = 'username=zansan'

封装一个方法存储cookie

/** 存一条cookie
 * @param string key 要存的cookie的名称
 * @param string value 要存的cookie的值
 * @param object [options] 可选参数，过期时间和目录，如： path: '/', expires: 7 存根目录7天过期的cookie
 */
function setCookie (key, value, options) 
    var str = `$key=$encodeURIComponent(value)`
    // 先判断options是否传进来了
    if (options) 
        // 如果传进来了再判断有哪个属性
        if (options.path) 
            // 路径拼接进去
            str += `;path=$options.path`
        
        if (options.expires) 
            var date = new Date()
            // 日期设置为过期时间
            date.setDate(date.getDate() + options.expires)
            str += `;expires=$date.toUTCString()`
        
    
    document.cookie = str

3.删除cookie

删除cookie的方法，很简单，只需要将过期时间设置成已经过去的时间，就可以。

/** 删一条cookie
 * @param string key 要删的cookie的名称
 * @param path [path] 可选参数，要删的cookie的所在的路径，如果就是当前路径这个参数可以不传
 */
function removeCookie (key, path) 
    var date = new Date()
    date.setDate(date.getDate() - 1) // 过期时间设置为昨天
    var str = `$key='';expires=$date.toUTCString()`
    if (path) 
        str += `;path=$path`      
    
    document.cookie = str

4.修改cookie

修改就是重写cookie，和写cookie的操作没什么区别。