cookie的使用cookie的使用1.1 cookie的原理1.2 cookie的使用1.2.2 cookie使用1.3 cookie的利弊1.3.3 localStorage和sessionStroage

cookie的使用

1.1 cookie的原理

HTTP协议本身是无状态的，一旦客户端和服务端完成数据交换后，连接就会断开，下次请求则会重建连接。这也就意味着服务器无法判断用户身份，每次请求都需要进行身份验证。cookie原理便是浏览器存储身份验证的唯一标识，然后发送给服务端，让服务端可以根据这个标识确认用户是否已经验证通过了。

cookie是一个很小的文件，是浏览器存储在本机上的。它是一个纯文本内容，记录了一些服务器需要的信息，每次站点请求，会随同请求一起发送给服务器，便于服务器进行身份识别。

以一次请求为例：

1. 用户第一次请求时,会附带用户身份认证信息。
2. 浏览器根据认证信息，对用户进行身份认证。如果认证成功，则将用户信息缓存在服务器，然后生成一个cookie唯一标识，并保存在服务器缓存中。
3. 在http响应中会附带服务器生成的唯一cookie标识一并返回给浏览器。
4. 浏览器接收到http响应后，提取返回的cookie存储在本地磁盘或内存。
5. 下次再请求时，只需附带这个存储的cookie标识给服务器。
6. 服务器根据接收到的cookie，查找用户身份信息。
7. 如果验证通过，则依旧返回一个cookie唯一标识，方便用户下次请求的身份认证。如果验证不通过或cookie过期，则返回信息让用户重新登录进行身份认证。

1.2 cookie的使用

1.2.1 cookie的属性

cookie中的expires表示过期时间，有3种值。

正数：cookie值持久保存。

负数：cookie值临时保存，仅在本窗口或其子窗口有效，关闭浏览器则失效。

0：立即删除cookie。

1.2.2 cookie使用

//设置cookie
const setCookie = (key, value, iDay) => {
        let oDate = new Date();
        oDate.setDate(oDate.getDate() + iDay);
        document.cookie = key + '=' + value + ';expires=' + oDate;

}

//删除cookie
const removeCookie = (key) => {
        setCookie(key, '', -1);//设置浏览器关闭则清楚cookie
}

//获取cookie
const getCookie = (key) => {
        let cookieArr = document.cookie.split('; ');
        for (let i = 0; i < cookieArr.length; i++) {
            let arr = cookieArr[i].split('=');
            if (arr[0] === key) {
                return arr[1];
            }
        }
        return false;
}

1.3 cookie的利弊

1.3.1 cookie的优点

• cookie可以在本地缓存部分有用数据，对用户登录来说，避免了多次重复验证操作。不占用服务器资源。
• 数据保存比较持久，根据设置的cookie过期时间而定。
• cookie结构简单，可存放任何结构的轻量级文本。

1.3.2 cookie的弊端

• cookie的存储大小受到限制。每个cookie不能超过4k，根据浏览器不同存储的cookie数量也不同。

• cookie存在安全隐患

常用的cookie攻击方式有：网络窃听，DNS缓存中毒，跨站点脚本XSS，跨站点伪造CSRF。

所以对于敏感的cookie数据一定要进行加密，而且浏览器尽量不要保存敏感数据，而是结合后端session共同对认证信息进行确认。

• 如果用户手动配置了cookie禁用则，cookie将不生效。
• cookie会被附加在每个HTTP请求中，所以无形中增加了流量。

1.3.3 localStorage和sessionStroage

cookie的存储容量较少，为了解决该问题，H5引入了localStorage和sessionStroage来解决该问题。

localStorage和sessionStroage也都是浏览器本地存储内容，但他们的存储体积就相对较大一些。

localStorage：本地缓存，长期有效。

sessionStroage：会话缓存，关闭浏览器则失效。

详见：https://blog.csdn.net/mafan121/article/details/60133107

虽然localStorage和sessionStroage、cookie都是缓存在本地的内容，但是他们有着本质的区别。

cookie存储的数据是要随着HTTP请求一起发送到服务器的。

虽然localStorage和sessionStroage、cookie都是缓存在本地的内容，但是他们有着本质的区别。

cookie存储的数据是要随着HTTP请求一起发送到服务器的。

localStorage和sessionStroage存储的数据仅仅存在于客户端，方便客户端下次读取而已。

最后

以上就是纯真饼干为你收集整理的cookie的使用cookie的使用1.1 cookie的原理1.2 cookie的使用1.2.2 cookie使用1.3 cookie的利弊1.3.3 localStorage和sessionStroage的全部内容，希望文章能够帮你解决cookie的使用cookie的使用1.1 cookie的原理1.2 cookie的使用1.2.2 cookie使用1.3 cookie的利弊1.3.3 localStorage和sessionStroage所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。