灵芝产品网站建设方案,wordpress登录开发,手机3d动画制作软件,湖南省建设厅官网查询证书文章目录 一、由来什么是Cookie#xff1f;特点Cookie的类型 二、原理三、Cookie生成机制客户端设置案例 四、属性五、缺陷最后分享一段自己工作中封装的一些关于cookie的公众方法✒️总结 前端Cookie是Web开发中非常重要的一部分#xff0c;它是服务器发送到用户浏览器并保存… 文章目录 一、由来什么是Cookie特点Cookie的类型 二、原理三、Cookie生成机制客户端设置案例 四、属性五、缺陷最后分享一段自己工作中封装的一些关于cookie的公众方法✒️总结 前端Cookie是Web开发中非常重要的一部分它是服务器发送到用户浏览器并保存在本地的一小块数据。以下是对前端Cookie的详细解析
一、由来
什么是Cookie
Cookie也称为HTTP Cookie、Web Cookie、浏览器Cookie等是服务器发送到用户浏览器并保存在本地的一小块数据该数据通常是用户账号相关的信息。假设一个系统有5个页面然后每个页面都可以添加相关的商品就有点像购物车那一个用户在页面1加入了苹果页面2加入了草莓页面3加入了铅笔页面4加入了电池那在传统的HTTP上面的话到底用什么类型的东西来存储这些数据呢因为HTTP本身是一个无状态的请求要记录这些数据统一发起一个购物车生成一张订单是非常困难的所以这个时候我们就需要有Cookie这个东西产生所以Cookie最初的的原始目的是为了维持状态而产生的就像所有的苹果、草莓、铅笔、电池全部记录在Cookie中然后Cookie附带着每个HTTP请求这样服务器就可以知道用户一共选购了哪些内容如下图所示
特点
存储位置存储在用户浏览器中。数据内容通常是用户相关的状态信息如身份认证信息。大小限制不同浏览器对Cookie的数量和大小限制不同但一般来说单域名下设置的Cookie不能超过30个单条Cookie的大小不能超过4KB。过期时间可以设置过期时间到达过期时间后浏览器会把Cookie清除掉。
Cookie的类型
会话期Cookie不设置具体失效时间只会在当前会话结束之后被删除掉存储在内存中。持久性Cookie会设置好具体的有效期被存储在磁盘中浏览器关闭不会影响该Cookie只有当有效期结束时才会从磁盘中删除
二、原理
我们来聊聊Cookie的原理以及生成机制其实非常简单无非是三步首先游览器会以一种无状态的方式去向服务器发起HTTP请求服务器接收到请求之后会在请求上的respond header上加上Cookie相关的信息然后染回给游览器游览器后面再向服务器发送请求的时候都会同步的带上Cookie那这样Cookie就会附在每个HTTP请求上服务器也可以根据这些信息来进行相关的逻辑判断
三、Cookie生成机制
关于Cookie生成机制有俩种方法
方法一服务端生成在Http Respond-Header 中 Set-Cookie方法二客户端生成通过document.cookie设置
客户端设置案例
document.cookienamechujian四、属性
我们来看下上面我们设置的一个cookie的属性值
NameCookie的名称唯一标识该Cookie。Value与Name相对应的值表示要存储的数据。Domain指定哪些域名及其子域名可以访问该Cookie。Path指定Cookie的作用路径只有匹配该路径下的请求才会携带这个Cookie。Expires/Max-Age 它是一个cookie的过期时间设置Cookie的过期时间或有效期。HttpOnly如果设置为true的时候就不能改变cookie的内容设置后Cookie将不能通过客户端脚本如JavaScript访问有助于防止跨站脚本攻击XSS。size是当前这个cookie的大小这个size值指的是具体这个value的大小Secure这个也是安全性的标识指定Cookie是否仅通过安全的HTTPS连接传输。
五、缺陷
聊一下cookie的一些缺陷以及对它的误用
cookie设计初衷用于维持HTTP状态不用于存储数据 大小限制:每个cookie项只能存储4k数据性能浪费:cookie附带在http请求上数据量过大会导致每个http请求就非常庞大
最后分享一段自己工作中封装的一些关于cookie的公众方法
// 设置cookie
export const setUserCookie (name, value, expires) {var date new Date();date.setTime(date.getTime() expires);console.log(时间, date.setTime(date.getTime() expires));document.cookie name escape(value) ;expires date.toGMTString();// document.cookie name (value || ) expires ; ;
};// 过期时间秒设置cookie
export const setCookieWithSeconds (name, value, seconds) {var expires ;if (seconds) {var date new Date();date.setTime(date.getTime() seconds * 1000);expires ; expires date.toUTCString();}document.cookie name (value || ) expires ; path/;
};// 获取Cookie值
export const getCookie (name) {var cookies document.cookie.split(; );for (var i 0; i cookies.length; i) {var cookie cookies[i].split();if (cookie[0] name) {return cookie[1];}}return ;
};// 清除所有cookie
export const clearAllCookies () {var cookies document.cookie.split(;);for (var i 0; i cookies.length; i) {var cookie cookies[i];var eqPos cookie.indexOf();var name eqPos -1 ? cookie.substr(0, eqPos).trim() : cookie.trim();document.cookie name ;expiresThu, 01 Jan 1970 00:00:00 GMT; path/;}
};
✒️总结 如果这篇【文章】有帮助到你希望可以给我点个赞创作不易如果有对前端端或者对python感兴趣的朋友,请多多关注咱们一起探讨和努力 个人主页 : 前端初见
