前端Cookie,Token,Session,Storage;等名词详解与应用,干货满满“建议收藏”

简介: 前端Cookie,Token,Session,Storage;等名词详解与应用,干货满满“建议收藏”

目录


Cookie


用途


cookie实际应用


cookie和session的联系


Token


用途


localStorage、sessionStorage


用途


支持类型


cookie,localStorage,sessionStorage,indexDB的区别


Cookie

Cookie是浏览器支持的一种本地存储机制。一般由服务端设置生成,在响应请求时被自动存储在浏览器中。是一个由网页服务器放在您硬盘上的非常小的文本文件. 它本质上就像您的身份证明一样,它只能被您使用并且只能由提供的服务器读取,每次访问网站的时候浏览器都会将该网站的Cookie发回给网站服务器,同时网站也可以随意更改你机器上对应的Cookie,Cookie名称和值可以由服务器端开发自己定义。


用途

用途之一是存储用户在特定网站上的密码和id。一般用在网站个人化和网站跟踪。


cookie只是为了更好地了解使用模式并改进网站访客的效率而采用的一个网站跟踪统计手段而已。


如果服务器需要记录用户状态,服务器会在响应信息中包含一个Set-Cookie的响应头,客户端会根据这个响应头存储Cookie信息。再次请求服务器时,客户端会在请求信息中包含一个Cookie请求头,而服务器会根据这个请求头进行用户身份、状态等较验。


cookie实际应用

比如提交按钮被按下,后台处理完请求跳转到相应页面后会把Cookie值带回来,也可以是后端请求返回的时候。服务器接收到了Cookie的数据后,可以利用这些数据决定返回到前台的内容(更进一步是跟Session结合使用)。如果站点用户没有访问过,就会为这个访问地址新建一个ID并且发送一些键值对给前台,这些值会被放在这次响应中的Header中通过Set-Cookie头带给浏览器,浏览器端于是有了Cookie的值。


举例某宝的浏览记录


这台电脑某宝告诉你你浏览过某些商品,另一台电脑可能是另外一些商品,因为不同Cookie对应的不同浏览记录,显得有点不符逻辑。


所以就用到了账号登陆,只要登陆过就能把所有记录跟后台数据库中的账号强关联起来,才可以获取完整的浏览记录。


cookie和session的联系

服务端用 session 来保存用户加密后的状态,然后客户端用 cookie 来保存 session ,服务器端把 session 种植到 cookie 中,然后下次访问时,cookie 会携带着 session ,进而达到一个身份认证的效果。


Token

Token是服务端生成的一串字符串将Token放置到session当中,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Token前来请求数据即可,无需再次带上用户名和密码。


用途

Token可以防止表单重复提交,一般客户端初始化进入页面的时候就调用后端代码,后端代码生成一个token,返回给客户端,客户端储存token(可以在前台使用Form表单中使用隐藏域来存储这个Token,也可以放在cookie或者Local Storage本地存储里),然后就将request(请求)中的token与(session)中的token进行比较:


session应用相对安全,但也叫繁琐,同时当多页面多请求时,必须采用多Token同时生成的方法,这样占用更多资源,执行效率会降低。因此,也可用cookie存储验证信息的方法来代替 session Token。


localStorage、sessionStorage

在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,为了解决cookie存储空间不足的问题,名字上可以看出前者是一直存在本地的,后者伴随着session,窗口一旦关闭就没了,不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。


用途

localStorage就是相当于一个前端的数据库的东西,所以可以增删改查


支持类型

大部分浏览器的localStorage只支持string类型的存储,localStorage会自动将localStorage转换成为字符串形式


cookie,localStorage,sessionStorage,indexDB的区别

image.png

从上表可以看到,cookie 已经不建议用于存储。如果没有大量数据存储需求的话,可以使用 localStorage 和 sessionStorage 。对于不怎么改变的数据尽量使用 localStorage 存储,否则可以用 sessionStorage存储



相关文章
|
2月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
69 3
|
8天前
|
存储 前端开发 Java
【SpringMVC】——Cookie和Session机制
获取URL中参数@PathVarible,上传文件@RequestPart,HttpServerlet(getCookies()方法,getAttribute方法,setAttribute方法,)HttpSession(getAttribute方法),@SessionAttribute
|
1月前
|
移动开发 缓存 前端开发
深入理解前端路由:原理、实现与应用
本书《深入理解前端路由:原理、实现与应用》全面解析了前端路由的核心概念、工作原理及其实现方法,结合实际案例探讨了其在现代Web应用中的广泛应用,适合前端开发者和相关技术人员阅读。
|
2月前
|
前端开发 项目管理
Gitflow分支策略及其在前端工程化中的应用
Gitflow 分支策略也并非适用于所有项目。对于一些小型或简单的前端项目,可能会显得过于复杂。在实际应用中,需要根据项目的具体情况和团队的需求进行适当调整和优化。
|
2月前
|
自然语言处理 前端开发 JavaScript
深入理解前端中的 “this” 指针:从基础概念到复杂应用
本文全面解析前端开发中“this”指针的运用,从基本概念入手,逐步探讨其在不同场景下的表现与应用技巧,帮助开发者深入理解并灵活掌握“this”的使用。
|
2月前
|
存储 前端开发 JavaScript
前端中对象的深度应用与最佳实践
前端对象应用涉及在网页开发中使用JavaScript等技术创建和操作对象,以实现动态交互效果。通过定义属性和方法,对象可以封装数据和功能,提升代码的组织性和复用性,是现代Web开发的核心技术之一。
|
2月前
|
前端开发
结合具体案例分析Gitflow分支策略在大型前端项目中的应用优势
通过这个具体案例可以看出,Gitflow 分支策略在大型前端项目中能够提供有条不紊的开发环境,保障项目的稳定性和持续发展。
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
54 5
|
2月前
|
前端开发 开发者
本文将深入探讨 BEM 的概念、原理以及其在前端开发中的应用
BEM(Block-Element-Modifier)是一种前端开发中的命名规范和架构方法,旨在提高代码的可维护性和复用性。通过将界面拆分为独立的模块,BEM 提供了一套清晰的命名规则,增强了代码的结构化和模块化设计,促进了团队协作。本文深入探讨了 BEM 的概念、原理及其在前端开发中的应用,分析了其优势与局限性,为开发者提供了宝贵的参考。
57 8
|
2月前
|
JavaScript 前端开发 测试技术
构建高效可维护的前端应用
构建高效可维护的前端应用