前端面试题（五）

小于负无穷

已于 2024-09-25 09:44:28 修改

阅读量822

点赞数 17

分类专栏：前端面试题汇总文章标签：前端

于 2024-09-25 09:43:49 首次发布

本文链接：https://blog.youkuaiyun.com/qq_62512874/article/details/142515181

版权

22. 浏览器存储机制

前端存储有哪些方式？
- 前端存储有多种方式，主要包括：
  1. localStorage：一种永久存储方式，数据会保存在浏览器中，除非手动删除。适用于存储不敏感的、需要长时间保留的数据。
  2. sessionStorage：存储数据仅在会话期间有效，浏览器关闭后数据被清除。适用于存储临时数据，如用户的会话信息。
  3. cookie：一种存储在浏览器的小型文本数据，常用于存储用户身份信息（如登录状态）。cookie 可以设置过期时间，并通过 HTTP 请求自动发送到服务器。由于 cookie 会随请求发送，因此体积不宜过大（通常不超过 4KB）。
  4. IndexedDB：一个基于浏览器的 NoSQL 数据库，适合存储大量的结构化数据。支持事务、索引和大规模数据存储操作。
localStorage 和 sessionStorage 的区别？
- 生命周期：localStorage 中的数据永久存在，直到手动清除，而 sessionStorage 的数据只在当前会话（session）有效，关闭浏览器后即被清除。
- 作用范围：localStorage 和 sessionStorage 的作用范围都限于同源（同协议、同域名、同端口），但 sessionStorage 只能在同一个标签页中共享，跨标签页的数据不能访问。
如何在前端安全地使用 cookie？
- 通过设置 HttpOnly 属性，限制 JavaScript 对 cookie 的访问，防止 XSS 攻击：
```
Set-Cookie: sessionId=abc123; HttpOnly
```
- 通过设置 Secure 属性，确保 cookie 仅在 HTTPS 协议下传输：
```
Set-Cookie: sessionId=abc123; Secure
```