写在前面
现代浏览器都具备完善的数据存储功能，为维护用户数据，提高用户体验有着重要意义，这是第三方数据库无法替代的。
数据库存储VS浏览器存储
问题：目前的数据库存储技术方便且成熟，为什么还需要使用浏览器的存储空间呢？
要搞懂这个问题，我们就需要清楚的了解两种产品的定位了。
数据库：
- 定义：服务端组织、存储和检索数据的系统。
- 用途：存储大量的用户数据等。
- 特点：数据持久化，支持多用户并发访问。
浏览器存储
- 定义：客户端存储数据的系统。
- 用途：快速访问和存储轻量级数据。
- 特点：存储空间相对（数据库）较小，数据持久性可灵活切换。
为了更加形象的解释，我们可以大致类比图书馆藏书室、阅读区和顾客三者的关系。
-
藏书室相当于数据库，存放大量书籍，通常不对外开放，支持多个员工同时管理书籍。
-
阅读区相当于浏览器存储空间。阅读区可以存放少量书籍，便于访客快速查看。
综上：
尽管数据库提供了强大的数据管理和存储能力，但是在实际应用中，合理利用用户浏览器的存储空间可以显著提高用户体验，减轻服务器负担。
既然浏览器存储空间如此重要，那么我们就来聊聊LocalStorage、SessionStorage和Cookies。
浏览器的存储空间
一、LocalStorageI（本地存储）
LocalStorage是Web Storage API的一部分，在浏览器上以键值对的形式存储字符串形式的数据，主要用于持久化存储用户的表单数据。
-
特点：
- 持久性：LocalStorage中存储的数据存在用户设备的硬盘中，能够长期存在，除非被人为清除。
- 容量：大多数浏览器的LocalStorage的容量是5MB左右。
- 安全性：通常不随着HTTP请求发送到服务器，但是可能受到脚本攻击，不建议存储敏感数据。
-
使用方式
//设置
localStorage.setItem('key','value');
//获取
localStorage.getItem('key');
//清除某一数据
localStorage.removeItem('key');
//清空所有数据
localStorage.clear();
如果需要获取或存入对象类型的数据，需要先将内容进行序列化JSON.strigfy()或者反序列化JSON.parse()
二、SessionStorage（会话存储）
其实会话存储和本地存储类似，只是存储的数据生命周期不同。所有在会话存储空间的数据会随着当前会话的结束而销毁。
会话在浏览器存储技术上的定义是：用户与网页的一次交互过程。具体来说，就是页面从创建到关闭的一段时期。
-
特点：
- 持久性：SessionStorage只在标签页的生命周期内有效，页面关闭，数据清除。
- 容量：大多数浏览器的SessionStorage的容量是5MB左右。
- 安全性：通常不随着HTTP请求发送到服务器，但是可能受到脚本攻击，不建议存储敏感数据。
-
使用方式
//设置
sessionStorage.setItem('key','value');
//获取
sessionStorage.getItem('key');
//清除某一数据
sessionStorage.removeItem('key');
//清空所有数据
sessionStorage.clear();
SessionStorage也是以键值对的形式存储字符串形式的数据，可以在用户填入表单数据时存储备份，避免因中途刷新丢失数据。
三、Cookies
Cookies是广泛使用的客户端存储技术。主要用于存储小型文本文件，在浏览器和服务器之间传递信息，使得网站能够记住用户偏好、登录状态等信息。
原理
当用户第一次访问一个网站时，服务器可以向浏览器发送一个Cookie。这个Cookie就会存储在用户浏览器上，每次用户访问网站时，浏览器就将这个Cookie发送给服务器。服务器通过校验Cookie的某些内容（token）就能精准识别出用户，并且根据Cookie里面的信息提供个性化的体验。
特点
cookie的特点和其字段内容有关，总共有9个字段，如下图：
1.Name
- 描述:标识Cookie的名称
- 例如：
username
2.Value
- 描述:具体的数据
- 示例：
novalic
3.Domain
- 描述:指定Cookie应用于哪个域名
- 示例：
.baidu.com
4.Path
- 描述:指定Cookie应用于哪些URL路径
- 示例：
/表示该域名下的所有路径
5.Expires/Max-Age
- 描述:Cookie的过期时间或者最大生命周期
- 示例：
Tue, 19 Jan 2021 12:00:00 UTC或3600秒
6.Secure
- 描述:设置此标志代表只有在使用HTTPS协议时才会发送该Cookie
- 示例：在Cookie中带上
Secure关键字即可
7.HttpOnly
- 描述:设置此标志代表只能使用HTTP协议访问，不能通过JS访问
- 示例：在Cookie中带上
HttpOnly关键字即可
8.SameSite
- 描述:控制Cookie是否随跨站请求一起发送
- 选项：
- Strict:不允许跨站请求Cookie
- Lax:默认情况不发送Cookie,在GET请求下可以跨站发送Cookie
- None:允许跨站请求Cookie
- 示例：设置
SameSite=Lax
9.Priority
- 描述:设置Cookie的优先级，控制网络请求时的发送顺序。
- 选项：
- High：该 Cookie 应优先发送。
- Medium：该 Cookie 为中等优先级，默认值。
- Low：该 Cookie 为低优先级，应在其他 Cookies 之后发送。
- 示例：设置
Priority=High
以上就是Cookie的字段，这些字段让开发者能够对Cookies的行为进行精确控制，具体而言，其大小限制为4KB左右，过期时间、安全性和可访问性等方面都是灵活变化的。
我们来看一下操作Cookies的方式：
//设置Cookie
document.cookie = "
username=novalic;
Domain=.baidu.com;
path=/;
expires=86400;
Secure;
HttpOnly;
SameSite=Lax;
Priority=High
"
//获取Cookie
function getCookies() {
var cookieArray = document.cookie.split('; ');
var cookies = {};
cookieArray.forEach(function(cookie) {
var keyValue = cookie.split('=');
cookies[keyValue[0]] = keyValue[1];
});
return cookies;
}
var cookies = getCookies();
console.log(cookies.username);
// 输出 "novalic"
//删除Cookie
//设置过期时间在过去，其他属性保持不变
document.cookie = username + "
=novalic;
Domain=.baidu.com;
path=/;
expires=一个过去的时间
Secure;
HttpOnly;
SameSite=Lax;
Priority=High
"
场景
Cookies是一种非常实用的客户端存储技术，在会话管理和用户认证等广泛使用。Cookie的管理在服务端进行，存储在浏览器的Cookies存储空间中。
注意事项
- 安全性：设置
HttpOnly标志可以防止跨站脚本攻击（XSS）通过 JavaScript 访问 Cookie。设置Secure标志可以确保 Cookies 只通过 HTTPS 协议传输，增加安全性。 - 容量限制：每个Cookie大小不超过4KB，每个域名下的总 Cookie 大小不超过 4KB，超过这个限制可能导致某些 Cookie 无法正常设置。
- 跨域问题：Cookies 只能由设置它的域名读取，因此如果需要跨域共享 Cookies，需要使用 CORS（跨源资源共享）策略。
- 隐私考虑：由于 Cookies 可以被用于追踪用户行为，因此应该遵循 GDPR 或其他隐私法规的要求。
拓展
IndexDB
Index也是客户端的一种存储技术，相比于localStorage 、 sessionStorage 和 Cookies有着更加强大的存储能力，适合存储大量复杂的数据。
- 特点：
- 对象存储:IndexDB允许存储键值对数据，可以是任意的JS对象。
- 事务支持：IndexDB支持十五，可以确保一组操作要么全部成功，要么全部失败。
- 索引：IndexDB支持创建索引来加速数据检索。
- 异步操作：IndexDB支持异步操作，不会阻塞用户数据。
- 容量：IndexDB的存储容量比本地存储和会话存储大得多，通常每个站点可以达到100M甚至更多。
总之，IndexDB功能强大，但是使用难度也更大。
总结：
以上就是浏览器常见的存储技术，主要是需要掌握LocalStorage、SessionStorage和Cookies，特别是对于Cookies的使用。如果你觉得本文对你有帮助，还请给个赞，这将是我持续创作的动力，感谢！
