在开发网页应用时，我们常常需要在浏览器中存储一些数据，以便在用户下次打开网页时能够恢复上一次的状态。而在 JavaScript 中，我们可以通过浏览器提供的 Local Storage 和 Session Storage API 来实现浏览器存储的功能。
Local Storage 和 Session Storage 概述
Local Storage 和 Session Storage 都是浏览器提供的 JavaScript API，并且都可以用来在浏览器中存储数据。它们的区别在于：
- Local Storage 中存储的数据只有在用户手动清除或网站清理时才会被清除。而 Session Storage 中存储的数据则只有在浏览器关闭的情况下才会被清除。
- Local Storage 和 Session Storage 中都存储的是字符串形式的数据，但是 Local Storage 可以存储更大数据量的字符串。
使用 Local Storage API
在 JavaScript 中，我们可以通过标准浏览器全局对象 window 的 localStorage 属性来访问 Local Storage API。下面是 Local Storage API 的常见方法：
setItem(key, value)
用于向 Local Storage 中存储一个键值对，key 表示键，value 表示值。需要注意的是，如果你传入的 value 不是字符串类型，则会先被转换成字符串类型。示例代码：
localStorage.setItem('username', 'Alice');getItem(key)
用于从 Local Storage 中获取一个键对应的值，key 是要获取的键。如果该键不存在于 Local Storage 中，则返回 null。示例代码：
const username = localStorage.getItem('username');
console.log(username); // 如果存在 username，输出 AliceremoveItem(key)
用于从 Local Storage 中删除指定键。示例代码：
localStorage.removeItem('username');如果删除了不存在的键，则不会有任何效果。
clear()
用于清空 Local Storage 中的所有数据。示例代码：
localStorage.clear();
需要注意的是，这个操作会清空整个 Local Storage，而不仅仅是当前网站的数据。
使用 Session Storage API
Session Storage API 和 Local Storage API 的使用方法极为相似，只不过其中的标准浏览器全局对象从 localStorage 改为了 sessionStorage。下面是 Session Storage API 的使用方法：
setItem(key, value)
sessionStorage.setItem('username', 'Alice');getItem(key)
const username = sessionStorage.getItem('username');
console.log(username); // 如果存在 username，输出 AliceremoveItem(key)
sessionStorage.removeItem('username');clear()
sessionStorage.clear();
总结
在开发中，我们可以利用 Local Storage 和 Session Storage 来管理浏览器存储，以便实现用户数据的持久化存储。使用它们时，需要注意以下几点：
- Local Storage 适合存储大量数据。而 Session Storage 适合存储当前会话所需的少量数据。
- 如果数据很重要（如用户的登录凭证等），需要使用加密算法来保证数据安全。
- 不要使用 Local Storage 或 Session Storage 来存储敏感数据，如用户的密码等。
希望这篇文章能够帮助大家更好地理解并使用 Local Storage 和 Session Storage API。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6593bff6eb4cecbf2d8637bc