当前位置：首页 > news >正文

前端本地存储数据：深入解析与代码示例（Cookie、LocalStorage、SessionStorage和IndexedDB）

news 2025/6/23 9:32:04

在现代Web应用中，前端本地存储是实现用户个性化体验的关键技术。本文将深入探讨前端本地存储的四种主要技术：Cookie、LocalStorage、SessionStorage和IndexedDB，并提供具体的代码示例。

Cookie

简介

Cookie是由服务器创建并存储在用户浏览器中的小块数据，用于跟踪会话状态和存储用户偏好。

特点

大小限制：一般限制在4KB左右。
与服务器通信：每次HTTP请求都会携带Cookie，增加服务器负载。
安全性：容易受到跨站脚本攻击（XSS）和跨站请求伪造（CSRF）的威胁。

使用场景

会话管理
用户认证

代码示例

设置Cookie:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

读取Cookie:

function getCookie(name) {let cookieArray = document.cookie.split(';');for (let i = 0; i < cookieArray.length; i++) {let cookie = cookieArray[i].trim();if (cookie.indexOf(name + "=") == 0)return cookie.substring(name.length + 1, cookie.length);}return "";
}
console.log(getCookie("username")); // 输出: John Doe

LocalStorage

简介

LocalStorage提供了一种在用户浏览器中存储数据的方式，数据存储在客户端，且没有时间限制。

特点

存储容量：通常为5MB左右。
数据持久性：数据在浏览器关闭后依然存在。
同步性：数据存储是同步的，可能会阻塞UI线程。

使用场景

存储用户偏好设置
缓存数据以减少服务器请求

代码示例

存储数据:

localStorage.setItem('user', 'John Doe');

读取数据:

let user = localStorage.getItem('user');
console.log(user); // 输出: John Doe

删除数据:

localStorage.removeItem('user');

SessionStorage

简介

SessionStorage与LocalStorage类似，但它存储的数据只在当前会话中有效，关闭浏览器标签或窗口后数据会被清除。

特点

会话限制：数据只在会话期间有效。
容量：通常为5MB左右。

使用场景

表单数据暂存
临时数据存储

代码示例

存储数据:

sessionStorage.setItem('sessionUser', 'Jane Doe');

读取数据:

let sessionUser = sessionStorage.getItem('sessionUser');
console.log(sessionUser); // 输出: Jane Doe

删除数据:

sessionStorage.removeItem('sessionUser');

IndexedDB

简介

IndexedDB是一个更强大的客户端存储解决方案，支持存储大量结构化数据，包括文件/blobs。

特点

存储容量：通常没有硬性限制，但受到浏览器和用户磁盘空间的限制。
异步API：不会阻塞UI线程。
索引：支持创建索引以优化查询性能。

使用场景

复杂数据存储
大量数据的本地缓存

代码示例

打开数据库:

let request = window.indexedDB.open("myDatabase", 1);request.onerror = function(event) {console.log("Database error: " + event.target.errorCode);
};request.onsuccess = function(event) {let db = event.target.result;console.log("Database opened successfully");
};request.onupgradeneeded = function(event) {let db = event.target.result;let objectStore = db.createObjectStore("users", { keyPath: "id" });objectStore.createIndex("name", "name", { unique: false });
};

存储数据:

let db = request.result;
let transaction = db.transaction(["users"], "readwrite");
let objectStore = transaction.objectStore("users");
let user = { id: 1, name: "Alice", email: "alice@example.com" };objectStore.add(user);

读取数据:

let transaction = db.transaction(["users"], "readonly");
let objectStore = transaction.objectStore("users");
let request = objectStore.get(1);request.onsuccess = function(event) {let user = event.target.result;console.log(user);
};