前端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存储



相关文章
|
15天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
16天前
|
Web App开发 前端开发 JavaScript
前端应用实现 image lazy loading 的原理介绍
前端应用实现 image lazy loading 的原理介绍
26 0
|
20天前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
20 0
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
1月前
|
机器学习/深度学习 人工智能 前端开发
未来趋势:人工智能在前端开发中的应用
随着人工智能技术的快速发展,前端开发领域也迎来了新的变革。本文将深入探讨人工智能在前端开发中的应用现状,并展望未来的发展趋势,带领读者一窥未来前端开发的可能面貌。
|
1月前
|
存储 自然语言处理 API
Session、cookie、token有什么区别?
Session、cookie、token有什么区别?
24 1
|
1天前
|
缓存 安全 JavaScript
前端安全:Vue应用中防范XSS和CSRF攻击
【4月更文挑战第23天】本文探讨了在Vue应用中防范XSS和CSRF攻击的重要性。XSS攻击通过注入恶意脚本威胁用户数据,而CSRF则利用用户身份发起非授权请求。防范措施包括:对输入内容转义、使用CSP、选择安全的库;采用Anti-CSRF令牌、同源策略和POST请求对抗CSRF;并实施代码审查、更新依赖及教育团队成员。通过这些实践,可提升Vue应用的安全性,抵御潜在攻击。
|
9天前
|
存储 JSON 安全
|
25天前
|
编解码 前端开发 JavaScript
探索前端开发中的新趋势:WebAssembly 技术应用与展望
本文将深入探讨前端开发中的新趋势——WebAssembly 技术,介绍其在前端领域的应用场景和优势,并展望未来在前端开发中的潜在影响。通过对 WebAssembly 技术的原理解析和实际案例分析,帮助读者更好地了解并应用这一新兴技术。
|
27天前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈应用的技术挑战与解决方案
在当今互联网时代,全栈开发成为越来越受欢迎的技术趋势。本文将深入探讨从前端到后端的全栈开发过程中所面临的技术挑战,并提出相应的解决方案,涵盖前端框架选择、后端技术架构、数据库设计以及跨平台兼容性等关键问题。
|
1月前
|
监控 前端开发 JavaScript
构建高性能Web应用:前端性能优化的关键策略与实践
本文将深入探讨前端性能优化的关键策略与实践,从资源加载、渲染优化、代码压缩等多个方面提供实用的优化建议。通过对前端性能优化的深入剖析,帮助开发者全面提升Web应用的用户体验和性能表现。