小白轻松掌握多种本地存储机制文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 HTML 的部分

文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 HTML 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

今天瑶琴带大家学习 HTML5 中本地存储的方式。

HTML5 中的本地存储指的是在浏览器中临时或持久地存储数据，以便在用户关闭浏览器后或在不同页面之间保持数据的状态。这些本地存储的方式是为了提供更好的用户体验，使开发者能够在客户端存储数据，而无需依赖服务器。

HTML5 提供了三种主要的本地存储方式：

1.Web Storage（本地存储） ： Web Storage 提供了两个对象，localStorage 和 sessionStorage，它们都允许在浏览器中存储键值对的数据。

localStorage： 数据存储在用户的浏览器中，即使用户关闭浏览器也不会丢失。数据在同一域名下的所有页面中可见。

sessionStorage： 数据也存储在用户的浏览器中，但是当用户关闭浏览器或标签页后，数据会被清除。数据只在同一标签页或窗口中可见。

这两种方式的用法类似，可以使用以下方法来操作数据：

// 存储数据
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');

// 获取数据
const valueFromLocalStorage = localStorage.getItem('key');
const valueFromSessionStorage = sessionStorage.getItem('key');

// 移除数据
localStorage.removeItem('key');
sessionStorage.removeItem('key');

2.IndexedDB（索引数据库）： IndexedDB 是一个更强大的本地数据库，允许存储更复杂的数据结构，如对象和数组。它支持更高级的查询和事务操作，适用于需要大量数据存储和复杂查询的应用。

IndexedDB 使用异步操作来处理数据，需要定义数据库、对象存储空间和索引。这使得它的使用稍微复杂一些。

// 打开数据库
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;
    // 进行数据库操作
};

3.Cookies（Cookie） ：虽然不是 HTML5 新增的特性，但也是一种在客户端存储数据的方式。Cookies 会在请求和响应之间传递，因此可以用于在不同页面和浏览器间共享数据。

使用 document.cookie 可以设置、获取和删除 Cookies。


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

// 获取 Cookie
const cookies = document.cookie;

// 删除 Cookie
document.cookie = 'username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';

选择适当的本地存储方式。如果只需简单的键值对存储，localStorage 和 sessionStorage 可能是较好的选择。如果需要更复杂的数据操作，可以考虑使用 IndexedDB。 Cookies 则更适合小型数据共享和状态跟踪。

以上是 HTML5 中本地存储的内容，其中 localStorage 和 sessionStorage 在平时的开发中用的比较多。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。