解锁JavaScript中Web存储API的秘密
推荐超级课程：
@TOC
在构建前端应用程序时，直接在用户浏览器中保存数据是非常常见的。幸运的是，JavaScript提供了简单的Web存储API，使这变得容易。这些工具允许您在需要时在客户端保存和检索数据。我将在本文中分解这些API，并展示如何有效地使用它们。
您将学习 —
- 本地存储
- 会话存储
- Cookies
- IndexedDB
本地存储
本地存储是在浏览器端存储数据的一种非常有效且最简单的方式，它提供了各种方法来轻松地设置、检索和删除数据。这些数据没有过期时间，即使关闭浏览器也不会被删除。请看下面的例子。
JavaScript本地存储
- 要在本地存储中存储一个项目，我们有
localStorage.setItem()方法，它接受两个参数，第一个是你想要存储数据的键，第二个是值。 - 要从本地存储检索数据，我们需要使用
localStorage.getItem()方法，它将返回你存储的数据。 - 要从本地存储删除数据，我们有
localStorage.removeItem()，它需要键来完全从本地存储中删除它们。
以下是本地存储的示例：
- 在本地存储中设置数据
// 在本地存储中设置数据
localStorage.setItem("username", "Harendra");
localStorage.setItem("email", "harendra2108@gmail.com");
- 从本地存储获取数据
// 从本地存储获取数据
const username = localStorage.getItem("username");
const email = localStorage.getItem("email");
console.log(username); // 输出： "Harendra"
console.log(email); // 输出： "harendra2108@gmail.com"
- 更新本地存储中的数据
// 更新本地存储中的数据
localStorage.setItem("username", "Harendra Singh");
localStorage.setItem("email", "updated_harendra2108@gmail.com");
- 删除本地存储中的特定数据
// 删除本地存储中的特定数据
localStorage.removeItem("username");
localStorage.removeItem("email");
- 清空本地存储中的所有数据
// 清空本地存储中的所有数据
localStorage.clear();
- 整合所有操作
// 1. 设置数据
localStorage.setItem("username", "Harendra");
localStorage.setItem("email", "harendra2108@gmail.com");
// 2. 获取并打印数据
console.log(localStorage.getItem("username")); // 输出： "Harendra"
console.log(localStorage.getItem("email")); // 输出： "harendra2108@gmail.com"
// 3. 更新数据
localStorage.setItem("username", "Harendra Singh");
localStorage.setItem("email", "updated_harendra2108@gmail.com");
// 4. 获取并打印更新后的数据
console.log(localStorage.getItem("username")); // 输出： "Harendra Singh"
console.log(localStorage.getItem("email")); // 输出： "updated_harendra2108@gmail.com"
// 5. 删除特定数据
localStorage.removeItem("username");
// 6. 尝试获取已删除的数据
console.log(localStorage.getItem("username")); // 输出： null
// 7. 清空所有数据
localStorage.clear();
// 8. 尝试在清空后获取任何数据
console.log(localStorage.getItem("email")); // 输出： null
会话存储
会话存储与本地存储类似，但不会永久存储数据，一旦关闭浏览器标签页，数据就会被删除。它几乎具有与本地存储相同的方法，但我们要使用sessionStorage而不是localStorage。
JavaScript会话存储
Cookies
Cookies是通过网站在浏览器中存储的小数据，用于记住关于用户的信息。在Cookies中，我们存储诸如主题模式、用户认证和用户首选语言等信息。Cookies限制为只能存储4KB的字符串类型数据，并且我们可以为其设置过期时间。
JavaScript Cookies
以下是Cookies的示例：## Cookies操作
// 获取Cookie
function getCookie(name) {
let c = document.cookie;
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
// 示例用法：
const username = getCookie("username");
console.log(username); // 如果存在Cookie，输出："Harendra"
- 更新Cookie
setCookie("username", "Harendra2108@gmail.com", 7); // 将Cookie "username" 更新为新值
- 删除Cookie
function deleteCookie(name) {
document.cookie = name + "=; Max-Age=-99999999;";
}
// 示例用法：
deleteCookie("username"); // 删除 "username" Cookie
- 整合所有操作
// 设置Cookie
setCookie("username", "Harendra", 7);
// 获取Cookie
console.log(getCookie("username")); // "Harendra"
// 更新Cookie
setCookie("username", "Harendra2108@gmail.com", 7);
// 获取更新后的Cookie
console.log(getCookie("username")); // "Harendra2108@gmail.com"
// 删除Cookie
deleteCookie("username");
// 尝试获取已删除的Cookie
console.log(getCookie("username")); // null (Cookie已被删除)
Local Storage vs Cookie
Local Storage与Cookie对比
IndexedDB
在JavaScript中，indexedDB是一个基于SQL的关联数据库系统，用于在浏览器中存储用户数据。与固定列不同，IndexedDB是一个基于JavaScript的对象导向数据库。
JavaScript IndexedDB
以下是IndexedDB的示例：
- 打开/创建数据库
const request = indexedDB.open('MyDatabase', 1);
request.onupgradeneeded = function(event) {
const db = event.target.result;
if (!db.objectStoreNames.contains('MyStore')) {
db.createObjectStore('MyStore', { keyPath: 'id', autoIncrement: true });
}
};
request.onerror = function(event) {
console.error('Database error:', event.target.errorCode);
};
request.onsuccess = function(event) {
const db = event.target.result;
console.log('Database opened successfully');
// 现在您可以执行CRUD操作
};
- 插入/设置数据
function addData(db, data) {
const transaction = db.transaction(['MyStore'], 'readwrite');
const store = transaction.objectStore('MyStore');
const request = store.add(data);
request.onsuccess = function() {
console.log('Data added successfully:', request.result);
};
request.onerror = function() {
console.error('Error adding data:', request.error);
};
}
// 示例用法：
const data = { name: 'Harendra', age: 30, email: 'harendra2108@gmail.com' };
addData(db, data);
- 获取/检索数据
function getData(db, key) {
const transaction = db.transaction(['MyStore'], 'readonly');
const store = transaction.objectStore('MyStore');
const request = store.get(key);
request.onsuccess = function() {
if (request.result) {
console.log('Data retrieved:', request.result);
} else {
console.log('No data found for key:', key);
}
};
request.onerror = function() {
console.error('Error retrieving data:', request.error);
};
}
// 示例用法：
getData(db, 1);
- 更新数据
function updateData(db, data) {
const transaction = db.transaction(['MyStore'], 'readwrite');
const store = transaction.objectStore('MyStore');
const request = store.put(data);
request.onsuccess = function() {
console.log('Data updated successfully:', request.result);
};
request.onerror = function() {
console.error('Error updating data:', request.error);
};
}
// 示例用法：
const updatedData = { id: 1, name: 'Harendra', age: 31, email: 'harendra2108@gmail.com' };
updateData(db, updatedData);
- 删除数据
function deleteData(db,// 添加数据
const data = { name: 'Harendra', age: 30, email: 'harendra2108@gmail.com' };
addData(db, data);
// 获取数据
getData(db, 1);
// 更新数据
const updatedData = { id: 1, name: 'Harendra', age: 31, email: 'harendra2108@gmail.com' };
updateData(db, updatedData);
// 删除数据
deleteData(db, 1);
};
感谢您阅读这篇博客文章