在开发 Web 应用程序时，我们通常需要在用户的浏览器端存储一些数据。LocalStorage 和 SessionStorage 是 HTML5 中提供的两种本地存储方式，它们可以让我们在用户浏览器中存储和检索数据，以便在不同的页面之间进行共享。
LocalStorage
LocalStorage 是一种持久化的本地存储方式，存储在其中的数据会一直保留，直到被用户清除。LocalStorage 的特点如下：
- 存储容量较大：LocalStorage 的存储容量通常在 5MB - 10MB 之间（不同浏览器有所差异），相比之下，Cookie 的存储容量较小。
- 存储的数据为字符串：LocalStorage 只能存储字符串，如果需要存储对象或数组，需要先将其转换为 JSON 字符串。
- 只能通过 JavaScript 访问：LocalStorage 的数据只能通过 JavaScript 进行访问和修改，不能被浏览器插件等其他方式访问。
LocalStorage 的使用非常简单，可以通过 localStorage 对象来进行操作，示例代码如下：
// 存储数据到 LocalStorage
localStorage.setItem('name', 'John');
localStorage.setItem('age', 25);
// 从 LocalStorage 中获取数据
var name = localStorage.getItem('name');
var age = localStorage.getItem('age');
// 删除 LocalStorage 中的数据
localStorage.removeItem('name');
// 清空 LocalStorage
localStorage.clear();
SessionStorage
SessionStorage 是一种会话级别的本地存储方式，存储在其中的数据在会话结束后会被清除。SessionStorage 的特点如下：
- 存储容量较小：SessionStorage 的存储容量与 LocalStorage 相当，但每个浏览器标签页或窗口之间都有独立的 SessionStorage，所以容量相当于 LocalStorage 的一部分。
- 会话级别的存储：SessionStorage 中的数据只在当前会话中有效，当用户关闭浏览器窗口或标签页时，这些数据会被立即清除。
- 存储的数据为字符串：与 LocalStorage 类似，SessionStorage 也只能存储字符串。
SessionStorage 的使用方式与 LocalStorage 类似，示例代码如下：
// 存储数据到 SessionStorage
sessionStorage.setItem('name', 'John');
sessionStorage.setItem('age', '25');
// 从 SessionStorage 中获取数据
var name = sessionStorage.getItem('name');
var age = sessionStorage.getItem('age');
// 删除 SessionStorage 中的数据
sessionStorage.removeItem('name');
// 清空 SessionStorage
sessionStorage.clear();
总结
LocalStorage 和 SessionStorage 是两种常用的本地存储方式，它们可以让我们在用户的浏览器中存储和检索数据。LocalStorage 是一种持久化的本地存储方式，存储的数据在用户的浏览器中一直保留，直到被用户手动清除。SessionStorage 是一种会话级别的本地存储方式，存储的数据在会话结束后会被清除。在使用 LocalStorage 和 SessionStorage 时，需要注意存储容量的限制以及存储的数据类型。同时，对于敏感信息的存储，应考虑使用其他更安全的方式，如加密存储或服务端存储。
本文来自极简博客，作者：甜蜜旋律，转载请注明原文链接：使用 LocalStorage 和 SessionStorage 进行本地存储
