Cookie、sessionStorage、localStorage、IndexedDB介绍

一、Cookie

1. 概念

Cookie 是一种存储在用户浏览器中的小型数据片段,通常用于跟踪用户会话、用户偏好设置等。服务器可以通过 HTTP 响应设置 Cookie,并在后续的请求中读取它们。

2. 相关属性

  • name=value:键值对,存储实际数据。
  • Domain:指定 Cookie 所属的域名。
  • Path:指定 Cookie 有效的路径。
  • Expires/Max-Age:指定 Cookie 的过期时间。
  • Secure:仅通过 HTTPS 传输 Cookie。
  • HttpOnly:防止 JavaScript 访问 Cookie,增强安全性(一定程度防御跨站脚本攻击)。
  • SameSite:控制 Cookie 的跨站请求行为(一定程度防御跨站请求伪造攻击)。

3. 特性

  • 存储容量有限:通常每个域名最多存储 20 个 Cookie,每个 Cookie 最大 4KB。
  • 自动发送:浏览器会在每次 HTTP 请求中自动发送与当前域名和路径匹配的 Cookie。
  • 安全性 :可以通过 HttpOnlySecure 标志增强安全性。

4. 使用示例

ini 复制代码
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
document.cookie = "age=30; path=/";
javascript 复制代码
console.log(document.cookie); // "username=John Doe; age=30"
ini 复制代码
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/";

二、sessionStorage

1. 概念

sessionStorage 是一种存储机制,用于在浏览器会话期间存储数据。数据在浏览器关闭后丢失。

2. 相关属性

  • sessionStorage.setItem(key, value) :存储数据。
  • sessionStorage.getItem(key) :获取数据。
  • sessionStorage.removeItem(key) :删除数据。
  • sessionStorage.clear() :清空所有数据。

3. 特性

  • 存储容量有限:通常为 5MB。
  • 临时存储:数据在浏览器关闭后丢失。
  • 同步操作:操作是同步的,可能会阻塞主线程。

4. 使用示例

存储数据

arduino 复制代码
sessionStorage.setItem("username", "John Doe");

读取数据

arduino 复制代码
console.log(sessionStorage.getItem("username")); // "John Doe"

删除数据

arduino 复制代码
sessionStorage.removeItem("username");

清空所有数据

ini 复制代码
sessionStorage.clear();

三、localStorage

1. 概念

localStorage 是一种存储机制,用于在浏览器中持久化存储数据。数据在浏览器关闭后仍然保留,直到被显式删除。

2. 相关属性

  • localStorage.setItem(key, value) :存储数据。
  • localStorage.getItem(key) :获取数据。
  • localStorage.removeItem(key) :删除数据。
  • localStorage.clear() :清空所有数据。

3. 特性

  • 存储容量有限:通常为 5MB。
  • 持久化存储:长期有效,数据在浏览器关闭后仍然保留。
  • 同步操作:操作是同步的,可能会阻塞主线程。

4. 使用示例

存储数据

javascript 复制代码
localStorage.setItem("username", "John Doe");

读取数据

javascript 复制代码
console.log(localStorage.getItem("username")); // "John Doe"

删除数据

javascript 复制代码
localStorage.removeItem("username");

清空所有数据

ini 复制代码
localStorage.clear();

四、IndexedDB

1. 概念

IndexedDB 是一种运行在浏览器中的非关系型数据库,用于存储大量结构化数据。它支持事务操作,可以保证数据的一致性和完整性。

2. 相关属性

  • indexedDB.open(name, version) :打开数据库。
  • IDBDatabase:数据库对象。
  • IDBTransaction:事务对象。
  • IDBObjectStore:对象存储空间。
  • IDBIndex:索引。

3. 特性

  • 存储容量大:通常受限于浏览器的存储限制(通常为几十MB到几百MB)。
  • 支持事务:支持事务操作,可以保证数据的一致性和完整性。
  • 异步操作:操作是异步的,不会阻塞主线程。
  • 结构化存储:支持复杂的数据结构和索引。

4. 使用示例

打开数据库

ini 复制代码
const request = indexedDB.open("myDatabase", 1);
​
request.onerror = function(event) {
  console.error("Database error:", event.target.error);
};
​
request.onsuccess = function(event) {
  const db = event.target.result;
  console.log("Database opened successfully:", db);
};
​
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore("users", { keyPath: "id" });
  objectStore.createIndex("username", "username", { unique: true });
};

添加数据

ini 复制代码
const request = indexedDB.open("myDatabase", 1);
​
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(["users"], "readwrite");
  const objectStore = transaction.objectStore("users");
  const addRequest = objectStore.add({ id: 1, username: "John Doe" });
​
  addRequest.onsuccess = function() {
    console.log("Data added successfully");
  };
​
  transaction.oncomplete = function() {
    console.log("Transaction completed");
    db.close();
  };
};

查询数据

ini 复制代码
const request = indexedDB.open("myDatabase", 1);
​
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(["users"], "readonly");
  const objectStore = transaction.objectStore("users");
  const getRequest = objectStore.get(1);
​
  getRequest.onsuccess = function(event) {
    console.log("Data retrieved:", event.target.result);
  };
​
  transaction.oncomplete = function() {
    console.log("Transaction completed");
    db.close();
  };
};

删除数据

ini 复制代码
const request = indexedDB.open("myDatabase", 1);
​
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(["users"], "readwrite");
  const objectStore = transaction.objectStore("users");
  const deleteRequest = objectStore.delete(1);
​
  deleteRequest.onsuccess = function() {
    console.log("Data deleted successfully");
  };
​
  transaction.oncomplete = function() {
    console.log("Transaction completed");
    db.close();
  };
};

五、总结

  • Cookie:用于存储少量数据,通常用于跟踪用户会话和偏好设置。数据会自动发送到服务器。
  • sessionStorage:用于存储会话级别的数据,数据在浏览器关闭后丢失。
  • localStorage:用于存储持久化数据,数据在浏览器关闭后仍然保留。
  • IndexedDB:用于存储大量结构化数据,支持事务操作和复杂的数据结构。
相关推荐
koiy.cc9 分钟前
记录:echarts实现tooltip的某个数据常显和恢复
前端·echarts
一只专注api接口开发的技术猿18 分钟前
企业级电商数据对接:1688 商品详情 API 接口开发与优化实践
大数据·前端·爬虫
GISer_Jing20 分钟前
[前端高频]数组转树、数组扁平化、深拷贝、JSON.stringify&JSON.parse等手撕
前端·javascript·json
Yvonne爱编码1 小时前
CSS- 4.1 浮动(Float)
前端·css·html·github·html5·hbuilder
timeguys1 小时前
【前端】[vue3] [uni-app]使用 vantUI 框架
前端·uni-app
岁岁岁平安2 小时前
Vue3学习(组合式API——Watch侦听器、watchEffect()详解)
前端·javascript·vue.js·学习·watch侦听器·组合式api
uwvwko2 小时前
BUUCTF——web刷题第一页题解
android·前端·数据库·php·web·ctf
有事没事实验室2 小时前
CSS 浮动与定位以及定位中z-index的堆叠问题
前端·css·开源
2501_915373883 小时前
Vue路由深度解析:Vue Router与导航守卫
前端·javascript·vue.js
小妖6663 小时前
前端表格滑动滚动条太费事,做个浮动滑动插件
前端