悠悠楠杉
网站页面
HTML5本地存储方式详解与介绍
06/05
1. localStorage
关键词：持久化、无过期时间、键值对存储。
描述：localStorage 允许在用户的浏览器中保存数据，这些数据在页面会话期间以及随后的访问中都是可用的，直到主动清除为止。它非常适合于需要长期保存的数据，如用户的设置和偏好。
示例代码：
javascript
// 保存数据
localStorage.setItem('userSetting', 'darkMode');
// 获取数据
var mode = localStorage.getItem('userSetting');
console.log(mode); // 输出 "darkMode"
2. sessionStorage
关键词：会话级、窗口关闭后消失、键值对存储。
描述：sessionStorage 与 localStorage 类似，但它存储的数据在浏览器窗口或标签页关闭时会被清除。它适合于临时数据的存储，如从上一个页面传递到当前页面的信息。
示例代码：
javascript
// 保存数据到 sessionStorage
sessionStorage.setItem('temporaryData', 'This will be cleared when the tab is closed');
// 获取数据
var data = sessionStorage.getItem('temporaryData');
console.log(data); // 输出 "This will be cleared when the tab is closed"
3. IndexedDB
关键词：数据库、事务、索引、增删改查。
描述：IndexedDB 是一个低级API，提供了类似于SQL的数据库功能，允许开发者存储大量结构化数据并执行复杂的查询。它非常适合需要高效查询和事务管理的应用。
示例代码（简化版）：
javascript
var request = window.indexedDB.open("MyDatabase", 1); // 创建或打开数据库
request.onerror = function(event) { console.error(event.target.errorCode); }; // 错误处理
request.onsuccess = function(event) { console.log("Database opened successfully"); }; // 成功处理
4. Web SQL Database
关键词：SQL、事务、数据库查询。
描述：尽管 Web SQL Database API 已逐渐被废弃（现代浏览器更推荐使用 IndexedDB），它仍然允许使用SQL语法进行数据操作，包括创建表、插入数据、查询和更新等操作。这对于熟悉SQL的开发者来说可能更直观。然而，其使用和支持程度正在逐渐减少。
5. Cookies
关键词：轻量级、文本文件、跨请求、过期时间。
描述：Cookies 主要用于跟踪用户会话和保存少量数据（如用户偏好）。每个cookie最多可保存4KB的数据，且每个站点的cookie数量有限制。它们具有过期时间属性，允许开发者控制数据的生命周期。尽管不提供像 IndexedDB 或 Web SQL Database 那样的复杂功能，但cookies 在处理身份验证和会话管理时仍然非常有用。
示例代码：设置一个具有过期时间的cookie：
javascript
document.cookie = "user=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/"; // 设置cookie，3个月后过期
