JavaScript本地存储的几种方式小结
作者：AitTech
在 JavaScript 中,本地存储指的是将数据保存在用户的浏览器中,能够在页面刷新或关闭后仍然保留,本文给大家介绍了本地存储的几种方式,每种存储方式的特点、区别及应用场景,需要的朋友可以参考下
在JavaScript中，有几种常用的方式可以在本地存储数据。以下是主要的几种本地存储方式：
LocalStorage:
- 描述: LocalStorage 是 Web Storage API 的一部分，用于在用户的浏览器中存储键值对。数据不会过期，除非用户明确删除。
- 用法：
// 存储数据
localStorage.setItem('key', 'value');
// 获取数据
const value = localStorage.getItem('key');
// 移除数据
localStorage.removeItem('key');
// 清除所有数据
localStorage.clear();
SessionStorage:
- 描述: SessionStorage 也是 Web Storage API 的一部分，与 LocalStorage 类似，但它存储的数据在页面会话结束时（如用户关闭浏览器标签页）会被清除。
- 用法:
// 存储数据
sessionStorage.setItem('key', 'value');
// 获取数据
const value = sessionStorage.getItem('key');
// 移除数据
sessionStorage.removeItem('key');
// 清除所有数据
sessionStorage.clear();
Cookies:
- 描述: Cookies 是小块的数据，由浏览器存储在用户的计算机上。它们通常用于存储会话信息或用户偏好设置，并会在每次请求时发送到服务器。
- 用法:
// 设置 Cookie
document.cookie = "username=John Doe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";
// 读取 Cookie
function getCookie(name) {
let cookieArr = document.cookie.split(";");
for(let i = 0; i < cookieArr.length; i++) {
let cookiePair = cookieArr[i].split("=");
if(name == cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1]);
}
}
return null;
}
const username = getCookie("username");
// 删除 Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
IndexedDB:
- 描述: IndexedDB 是一种低级 API，用于在用户的浏览器中存储大量结构化数据。它类似于 SQL 数据库，但使用的是事务性数据库模型。
- 用法:
// 打开数据库
let request = indexedDB.open("myDatabase", 1);
request.onupgradeneeded = function(event) {
let db = event.target.result;
let objectStore = db.createObjectStore("customers", { keyPath: "id" });
};
request.onsuccess = function(event) {
let db = event.target.result;
// 添加数据
let transaction = db.transaction(["customers"], "readwrite");
let objectStore = transaction.objectStore("customers");
let customer = {id: 1, name: "John Doe", age: 30};
objectStore.add(customer);
// 读取数据
let transaction = db.transaction(["customers"]);
let objectStore = transaction.objectStore("customers");
let request = objectStore.get(1);
request.onerror = function(event) {
console.log("Unable to retrieve data");
};
request.onsuccess = function(event) {
if (request.result) {
console.log(request.result.name);
} else {
console.log("No data found");
}
};
};
Web SQL (已废弃):
- 描述: Web SQL 是一种早期的本地数据库技术，但已经不被推荐使用，并且在现代浏览器中逐渐被淘汰。
- 用法: 不推荐使用，建议使用 IndexedDB 作为替代。
这些技术各有优缺点，选择哪一种取决于具体的应用场景和需求。对于简单的键值对存储，LocalStorage 和 SessionStorage 是很好的选择；对于需要存储更复杂和大量数据的情况，IndexedDB 更加合适；而 Cookies 则通常用于存储需要在服务器和客户端之间共享的信息。
以上就是JavaScript本地存储的几种方式小结的详细内容，更多关于JavaScript本地存储方式的资料请关注脚本之家其它相关文章！