一、引言

JavaScript提供了多种数据存储技术，如Cookie、LocalStorage、SessionStorage和IndexedDB。这些技术在Web开发中扮演着重要的角色，用于在客户端存储和检索数据。

二、Cookie

1、Cookie是什么？

Cookie是存储在客户端的小型文本文件，由服务器发送到用户的浏览器，并随后每次请求都会被发送回服务器。它用于跟踪用户会话和存储少量数据，例如用户身份，登录状态等。Cookie的最大容量为4KB。Http请求中自动携带，可自行设置过期时间。

2、如何设置和获取cookie？

// 设置Cookie
document.cookie = 
"username=lisi; expires=Thu, 15 Dec 2023 16:00:00 UTC; path=/";

// 读取Cookie
let cookies = document.cookie;
console.log(cookies);

// 删除Cookie，设置Cookie的过期时间为过去的时间
document.cookie = 
"username=; expires=Thu, 01 Jan 1980 00:00:00 UTC; path=/;";

3、Cookie的限制和安全性

1. Cookie的大小通常为4KB左右。
2. Cookie会在每次HTTP请求中被发送到服务器，增加网络流量。
3. Cookie存储在客户端，可能被恶意脚本或跨站点脚本攻击利用。
4. Cookie可以设置过期时间，也可以通过设置路径、域名和安全标志来限制访问。

4、Cookie的某些字段

• Value：如果用于保存用户登录态，应该将该值加密，不能使用明文。
• HttpOnly：打勾表示只能通过http请求访问，不能被js访问，减少XSS攻击。
• Secure：Cookie只能在协议为 HTTPS 的请求中携带。
• SameSite：相同站点，不能在跨域请求中携带Cookie，减少CSRF攻击。None表示不需要同源，可以在跨站点请求中发送。

三、LocalStorage

1、LocalStorage是什么？

LocalStorage是HTML5提供的一种持久化的本地存储机制，用于在浏览器中存储键值对数据。

2、如何使用LocalStorage？

// 设置LocalStorage 
localStorage.setItem("key", "value");
localStorage.setItem("username", "lisi");

// 读取LocalStorage 
const value = localStorage.getItem("key");
console.log(value);
let username = localStorage.getItem("username"); 
console.log(username);

// 删除LocalStorage 
localStorage.removeItem("username");

3、LocalStorage的限制和安全性

1. LocalStorage的容量通常在5MB到10MB之间。
2. LocalStorage存储在客户端，不会随着每次请求被发送到服务器。
3. LocalStorage在同源策略下是安全的，不同域的页面无法访问彼此的数据。
4. LocalStorage是持久化的，数据会一直保存在客户端直到被主动清除。

四、SessionStorage

1、SessionStorage是什么？

SessionStorage是一种在浏览器中存储数据的机制，它提供了一个会话级别的解决方案。数据存储在键值对中，只在当前会话中有效，当会话结束时数据将被删除。

2、如何使用SessionStorage？

// 设置SessionStorage
sessionStorage.setItem("key", "value");

// 读取SessionStorage
const value = sessionStorage.getItem("key");
console.log(value);

// 删除SessionStorage
sessionStorage.removeItem("key");

3、SessionStorage的限制和安全性

1. SessionStorage的容量通常在5MB到10MB之间。
2. SessionStorage存储在客户端，不会随着每次请求被发送到服务器。
3. SessionStorage在同源策略下是安全的，不同域的页面无法访问彼此的数据。
4. SessionStorage的数据在浏览器会话结束时会被清除。

五、IndexedDB

1、IndexedDB是什么？

IndexedDB是一种在浏览器中存储大量结构化数据的机制，它提供了一个类似数据库的解决方案。它允许你存储和检索对象，支持事务和索引。

2、IndexedDB的基本使用

// 打开或创建数据库
let request = indexedDB.open("myDatabase", 1);
// 创建对象存储空间
request.onupgradeneeded = function(event) {
  let db = event.target.result;
  let objectStore = db.createObjectStore("people", { keyPath: "id" });
};
// 添加数据
request.onsuccess = function(event) {
  let db = event.target.result;
  let transaction = db.transaction(["people"], "readwrite");
  let objectStore = transaction.objectStore("people");
  let people = { id: 1, name: "lisi" };
  objectStore.add(people);
};
// 检索数据
request.onsuccess = function(event) {
  let db = event.target.result;
  let transaction = db.transaction(["people"], "readonly");
  let objectStore = transaction.objectStore("people");
  let request = objectStore.get(1);
  request.onsuccess = function(event) {
    let people = event.target.result;
    console.log(people.name);
  };
};
// 删除数据
request.onsuccess = function(event) {
  let db = event.target.result;
  let transaction = db.transaction(["people"], "readwrite");
  let objectStore = transaction.objectStore("people");
  let request = objectStore.delete(1);
};

3、IndexedDB的限制和安全性

1. IndexedDB的容量通常较大，可以存储大量数据。
2. IndexedDB存储在客户端，不会随着每次请求被发送到服务器。
3. IndexedDB在同源策略下是安全的，不同域的页面无法访问彼此的数据。
4. IndexedDB提供了强大的查询和索引功能，支持事务操作。

• Google Chrome：大约为50MB到500MB（取决于具体浏览器版本和操作系统）。

六、四种存储方式的区别

Cookie由后端(服务器)操作存储，其他三种由前端操作存储。

1、数据容量

• cookie：通常限制在4KB左右。
• LocalStorage和SessionStorage：通常限制在5MB到10MB之间，具体容量限制可以根据浏览器而有所不同。
• indexedDB：容量较大，可以存储大量数据。甚至有人说理论上无限大，上限是硬盘容量大小。

2、生命周期

• cookie：可以设置过期时间，可以在浏览器会话之间持久保存数据。
• LocalStorage：数据长期存储，除非被显式清除。
• SessionStorage：数据仅在当前浏览器会话期间有效，关闭浏览器标签或窗口后数据被清除。
• indexedDB：数据长期存储，除非被显式删除。

3、数据访问

• cookie：数据在每次HTTP请求中都会被发送到服务器(一般在请求头中)，增加网络流量。
• LocalStorage、SessionStorage和indexedDB：数据存储在客户端，不会随每次请求被发送到服务器。

4、安全性

• cookie：可以设置路径、域名和安全标志来限制访问，但仍然容易受到恶意脚本或跨站点脚本攻击的影响。
• LocalStorage、SessionStorage和indexedDB：在同源策略下是安全的，不同域的页面无法访问彼此的数据。

5、功能和灵活性

• cookie：主要用于会话跟踪和存储少量数据，功能相对简单。
• LocalStorage和SessionStorage：提供了基本的键值对存储，适合用于存储较大量的数据。
• indexedDB：提供了更强大的查询和索引功能，支持事务操作，适合存储和操作大量结构化数据。

七、最后的话

以上技术都是客户端浏览器中进行数据存储的机制，常用于 Web 应用程序的用户状态管理和客户端本地数据存储。每种存储机制都有其特定的用途和限制，了解这些存储机制的基本用法和特点，有助于在开发中选择合适的数据存储方式。

能力一般，水平有限，本文可能存在纰漏或错误，如有问题欢迎大佬指正，感谢你阅读这篇文章，如果你觉得写得还行的话，不要忘记点赞、评论、收藏哦！祝生活愉快！