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取代。