🤖 作者简介：水煮白菜王 ，一位资深前端劝退师 👻
👀 文章专栏： 浏览器原理专栏 ，记录一下平时在博客写作中，总结出的一些开发技巧✍。
感谢支持💕💕💕关联文章：
一、浏览器组成的介绍
二、浏览器渲染原理
三、浏览器安全
四、浏览器进程与线程
六、浏览器缓存
七、浏览器垃圾回收机制
八、浏览器同源策略
九、浏览器事件机制
目录
1.浏览器本地存储方式
（1）Cookie
-
特性:
- 名称创建后不可修改。
- 遵循同源策略，不能跨域名共享。
- 每个域名下Cookie数量和大小受限（约20个，每个4KB）。
- 安全性问题：易被拦截，用于会话劫持。
- 随每次HTTP请求自动发送至服务器。
-
使用场景:
- 会话管理：与服务器端的Session配合，存储Session ID，识别用户会话。
- 用户偏好设置：保存用户的界面设置、语言偏好等不敏感信息。
（2） LocalStorage
-
优点:
- 较大的存储空间（通常5MB）。
- 持久存储，不随浏览器关闭而消失。
- 数据仅存储在客户端，减少网络流量。
-
缺点:
- 面临兼容性问题，如IE8及更低版本不支持。
- 隐私模式下不可用。
- 同源策略限制访问。
Javascript
// 数据保存到localStorage
localStorage.setItem('username', 'John Doe');
// 从 localStorage 获取数据
let username = localStorage.getItem('username');
// 从 localStorage 删除保存的数据
localStorage.removeItem('username');
// 清空所有localStorage 保存的数据
localStorage.clear();
// 获取键名key
let key = localStorage.key(index);
- 使用场景:
- 用户设置：存储用户选择的界面主题、字体大小等个性化设置。
- 离线数据缓存：保存应用数据，以便在离线状态下使用。
（3） SessionStorage
-
特点:
- 类似LocalStorage，但数据仅在当前浏览器窗口或标签页有效。
- 会话存储，关闭窗口或标签页后，数据会被清除。
- 同源策略限制，且在同源下的不同窗口间不共享数据。
// 数据保存到sessionStorage
sessionStorage.setItem('username', 'John Doe');
// 从 sessionStorage获取数据
let username = sessionStorage.getItem('username');
// 从 sessionStorage删除保存的数据
sessionStorage.removeItem('username');
// 清空所有sessionStorage保存的数据
sessionStorage.clear();
// 获取键名key
let key = sessionStorage.key(index);
-
使用场景:
- 临时数据存储：保存表单填写过程中的草稿，防止意外刷新丢失数据。
- 临时身份验证：存储临时的用户身份验证信息，如临时登录状态，直到关闭页面。
2.Cookie有哪些字段及对应的作用
- Name: 定义了Cookie的标识符，用于区分其他Cookie。
- Value: 存储Cookie的具体信息或数据，例如会话ID、用户偏好等。
- Size: 表明Cookie的大小，尽管这不是一个常见的直接操作字段，但了解它有助于避免超过浏览器对Cookie大小的限制。
- Path: 指定了哪些路径下的页面可以访问该Cookie。默认是当前页面的路径，可以根据需要设置为更宽泛或更具体的路径。
- Domain: 指定了哪些域名可以访问此Cookie。子域名通常也可以访问父域名设置的Cookie，有助于实现单点登录等功能。
- Secure: 当设为true时，指示浏览器仅在通过HTTPS连接时发送Cookie，增强了数据传输的安全性。
- HTTPOnly:设为true时，表示这个Cookie不能被客户端JavaScript访问，有助于防范跨站脚本(XSS)攻击，保护Cookie信息不被恶意脚本窃取。
- Expires/Max-Age: 指定Cookie的有效期。可以是一个具体日期时间(Expires)，或者从创建时间开始的秒数(Max-Age)。如果未设置，则Cookie将在会话结束后（即浏览器关闭时）失效，称为会话Cookie。
| 属性名 | 描述 | 作用详解 |
|---|---|---|
| Name | Cookie的标识符 | 用于区分不同的Cookie，每个Cookie通过其Name唯一确定。 |
| Value | 存储的具体信息或数据 | 可包含会话ID、用户偏好设置、认证信息等，依据应用需求自定义内容。 |
| Size | Cookie的大小 | 非直接操作字段，了解其大小有助于避免超出浏览器对Cookie大小的限制（通常约4KB）。 |
| Path | 指定可访问该Cookie的页面路径 | 默认为当前页面路径，可设置为更宽泛或更精确的路径以控制Cookie的可见性。 |
| Domain | 指定哪些域名可以访问此Cookie | 支持子域名访问父域名Cookie，有利于实现单点登录等特性。 |
| Secure | 是否仅在HTTPS连接时发送Cookie | 设为true增加安全性，确保敏感数据仅通过HTTPS安全连接传输。 |
| HTTPOnly | 控制Cookie是否可被客户端JavaScript访问 | 设为true可以防止XSS攻击，保护Cookie信息不被恶意脚本窃取。 |
| Expires/Max-Age | Cookie的有效期设定 | 可设定具体过期日期（Expires）或生存时间（Max-Age，单位秒），未设定则为会话Cookie，随浏览器关闭失效。 |
这些属性共同控制着Cookie的存储、读取、有效期以及安全性，是Web应用中处理用户状态、认证和个性化设置的关键机制。
3.Cookie、LocalStorage和SessionStorage区别
Cookie
- 用途:最初设计用于维护用户会话状态，如用户认证信息。服务器可以通过Set-Cookie头部在响应中设置Cookie，浏览器之后会自动在同源请求的HTTP头部中带上这些Cookie。
- 存储量: 通常限制在4KB左右，对于现代Web应用来说，这在存储大量数据时显得捉襟见肘。
- 生命周期: 可以设置为会话级别（浏览器关闭即失效）或指定一个过期时间。
- 安全性: 易受到跨站脚本攻击(XSS)和中间人攻击，特别是当敏感数据如认证凭证未经加密存储时。
- 跨域: 默认情况下，Cookie遵循同源策略，但可以通过设置domain属性来实现一定程度的跨域共享。
sessionStorage
- 用途: 适用于存储会话级别的信息，如临时的表单数据。它在页面会话期间有效，即浏览器窗口或标签页关闭后数据就会被清除。
- 存储量: 大多现代浏览器支持至少5MB的存储空间，远超Cookie。
- 生命周期: 当浏览器窗口或标签页关闭时，数据自动删除。
- 安全性:相比Cookie，不太容易受到XSS攻击，因为它不能通过JavaScript的document.cookie访问，但仍需注意在页面内防止数据泄露。
- 跨域: 不支持跨域共享，严格遵循同源策略。
localStorage
- 用途: 适合长期存储用户偏好设置、客户端数据缓存等不需要服务器交互的数据。
- 存储量: 同sessionStorage，提供相对较大的存储空间。
- 生命周期: 持久化存储，除非用户主动清除浏览器数据或通过JavaScript代码删除，否则数据一直存在。
- 安全性: 同样面临XSS攻击的风险，但没有跨站请求伪造(CSRF)的风险，因为不随HTTP请求发送。
- 跨域: 同sessionStorage，不支持跨域访问。
| 特性 | Cookie | LocalStorage | SessionStorage |
|---|---|---|---|
| 存储位置 | 客户端和随HTTP请求发送 | 客户端浏览器 | 客户端浏览器 |
| 容量限制 | 通常4KB左右 | 一般为5MB或更大 | 一般为5MB或更大 |
| 生命周期 | 可设置，随会话或指定时间结束 | 持久存储，除非主动删除 | 会话结束时（浏览器关闭） |
| 同源策略 | 遵循 | 遵循 | 遵循 |
| 跨域共享 | 有限支持（需服务器设置） | 不支持 | 不支持 |
| 安全性问题 | 易受XSS和中间人攻击 | 易受XSS攻击，不随请求发送 | 易受XSS攻击，不随请求发送 |
| 用途举例 | 认证信息、偏好设置 | 长期用户数据缓存、配置 | 临时数据、表单输入暂存 |
| API | document.cookie | window.localStorage | window.sessionStorage |
当应对更大数据量的本地存储需求时，浏览器的IndexedDB成为优选方案。这是一种内置的非关系型数据库存储技术，专为客户端设计，能够高效存储和检索大量结构化数据。与Cookie、LocalStorage、SessionStorage相比，IndexedDB不仅存储容量更大，还支持创建索引、事务处理等高级功能，非常类似于NoSQL数据库，适用于构建需要处理大量数据的Web应用，如离线存储、用户生成内容的缓存等场景。通过使用IndexedDB，开发者可以克服传统本地存储在容量和性能上的局限，实现更复杂的数据管理逻辑。
IndexedDB
IndexedDB用于存储大量结构化或非结构化数据，提供了远超上述三种的存储能力，理论上受限于用户设备的可用空间。开发者依然需要注意防止XSS和CSRF攻击，但提供了更灵活的数据访问控制。
特点:
- 键值对存储与对象仓库：IndexedDB 通过对象仓库（Object Store）组织数据，每个对象仓库可以看作是一个表，其中的数据以键值对形式存在。键可以是简单的字符串或数字，也可以是复合键（KeyPath），确保数据的唯一性和高效查询。
- 异步API设计：所有的读写操作都是异步的，这意味着 IndexedDB操作不会阻塞用户界面线程，提高了应用的响应性和用户体验，特别适合处理大量数据时保持应用流畅。
- 事务处理：通过事务（Transactions）保证数据的一致性和完整性。事务可以包含多个操作，并且支持不同的隔离级别，如果事务中的任何操作失败，所有操作都会被回滚，确保数据状态不被破坏。
- 同源策略：遵循同源安全策略，确保数据只能被来自同一源的脚本访问，增强了安全性，防止数据泄露给恶意网站。
- 大容量存储：相比LocalStorage通常几MB的限制，IndexedDB提供了更大的存储空间，通常至少有250MB，某些现代浏览器更是提供了几乎不受限的存储空间，适合存储大量应用数据或离线缓存。
- 丰富的数据类型支持：除了基本的数据类型，IndexedDB还可以直接存储JavaScript对ArrayBuffer以及Blob对象，这对于存储图片、音频、视频等二进制大文件非常有用，使得Web应用能够实现更多样化的功能。
- 索引优化查询：允许在对象仓库上创建索引，通过索引可以快速查找和过滤数据，提高数据检索效率，特别是对于复杂的查询条件支持良好
4.前端储存的⽅式
- Cookies:主要用于在客户端存储小量数据，随每次HTTP请求发送至服务器，适用于存储认证信息、偏好设置等，但受限于大小和性能问题。
- LocalStorage: HTML5引入的存储API，提供持久化的本地存储，适合存储较大量的数据，如用户设置，且不随HTTP请求发送，减少了网络流量。
- SessionStorage: 同样是HTML5的一部分，用于存储会话级别的数据，当浏览器窗口关闭时数据会被清除，适合存储临时性的信息。
- IndexedDB: 一个强大的客户端存储数据库，特别适合处理大量结构化数据，支持事务处理、索引和查询，是NoSQL数据库，适用于复杂的客户端数据存储需求。
- Web SQL:虽已被W3C废弃，但在一些浏览器中仍有实现，它允许在客户端使用SQL查询语言操作数据库，但由于标准废弃，新项目不推荐使用。
- Cache API: 包括Service Worker Cache和Browser Cache，用于存储网络资源（如图片、脚本、样式表等），以加速页面加载和实现离线访问能力。
- File System API: 允许Web应用在用户授权的情况下读写用户计算机的文件系统，虽然不直接用于常规数据存储，但在某些场景下可以作为数据持久化的一种方式。
- URLSearchParams: 虽然严格来说不是存储技术，但可以通过URL的查询字符串传递和存储轻量级数据，特别是在页面间传递状态时。
- Service Workers: 结合Cache API，可以创建完全离线体验的应用，通过拦截网络请求并在本地存储中查找或回填数据。
- Application Cache (AppCache): 虽已被弃用，但曾是HTML5中用于实现离线存储应用资源的技术，现已被Service Workers和Cache API取代。
如果你觉得这篇文章对你有帮助，请点赞 👍、收藏 👏 并关注我！👀
扫一扫
1088
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
