JavaScript 实现本地存储的核心在于
localStorage和
sessionStorage这两个 Web API。它们允许你在用户的浏览器中存储键值对数据，区别在于
localStorage存储的数据会持久保存，除非用户手动清除或程序删除，而
sessionStorage存储的数据只在当前会话有效，浏览器关闭后数据就会被清除。
使用
localStorage存储数据：
- 存储数据：
localStorage.setItem('key', 'value'); - 获取数据：
localStorage.getItem('key'); - 删除数据：
localStorage.removeItem('key'); - 清除所有数据：
localStorage.clear();
使用
sessionStorage的方法类似，只是将
localStorage替换为
sessionStorage即可。
// 存储数据到 localStorage
localStorage.setItem('username', 'JohnDoe');
// 从 localStorage 获取数据
const username = localStorage.getItem('username');
console.log(username); // 输出: JohnDoe
// 存储数据到 sessionStorage
sessionStorage.setItem('token', 'abcdefg12345');
// 从 sessionStorage 获取数据
const token = sessionStorage.getItem('token');
console.log(token); // 输出: abcdefg12345
// 删除 localStorage 中的 username
localStorage.removeItem('username');
// 清空 localStorage
// localStorage.clear(); localStorage 和 sessionStorage 的区别是什么，什么时候使用哪个？
localStorage和
sessionStorage的主要区别在于数据的生命周期和作用域。
-
生命周期：
localStorage
存储的数据是持久性的，即使关闭浏览器，数据仍然存在，直到被手动删除或者被程序清除。sessionStorage
存储的数据仅在当前会话中有效，当浏览器窗口或标签页关闭时，数据会被自动清除。 -
作用域：
localStorage
在同一域名下的所有窗口和标签页之间共享数据。sessionStorage
的数据仅在创建它的那个窗口或标签页中有效。
选择使用哪个取决于你的需求。如果需要长期保存数据，例如用户的偏好设置、登录状态等，可以使用
localStorage。如果只需要在当前会话中保存数据，例如购物车信息、表单数据等，可以使用
sessionStorage。 举个例子，如果你想记住用户是否选择了“记住我”选项，并下次自动登录，
localStorage就很适合。但是，如果只是临时保存用户在某个页面填写的表单数据，
sessionStorage就能派上用场。
如何处理 localStorage 的容量限制？
localStorage和
sessionStorage都有容量限制，通常为每个域名 5MB 到 10MB 不等，具体取决于浏览器。如果存储的数据超过了容量限制，浏览器会抛出一个
QuotaExceededError异常。
为了避免超出容量限制，可以采取以下策略：
- 只存储必要的数据： 避免存储不必要的数据，尽量减少存储的数据量。
-
压缩数据： 在存储之前对数据进行压缩，例如使用
gzip
或LZString
算法。 -
分块存储： 将大数据分割成小块，分别存储到
localStorage
中，并在读取时重新组装。 -
使用其他存储方式： 如果
localStorage
的容量无法满足需求，可以考虑使用IndexedDB
或服务器端存储。
比如，你可以用 JSON 字符串来存储复杂的数据结构，并在读取时再解析成 JavaScript 对象。 这样能更有效地利用存储空间，但也要注意 JSON 字符串的长度。
localStorage 存储的数据安全吗？
localStorage存储的数据是明文存储在用户的浏览器中的，因此存在一定的安全风险。虽然同域名下的 JavaScript 代码可以访问
localStorage，但是如果网站存在跨站脚本攻击（XSS）漏洞，攻击者可以通过 JavaScript 代码窃取
localStorage中的数据。
为了提高
localStorage的安全性，可以采取以下措施：
-
避免存储敏感信息： 不要将用户的密码、信用卡信息等敏感信息存储到
localStorage
中。 -
对数据进行加密： 在存储之前对数据进行加密，例如使用
AES
或RSA
算法。 - 使用 HTTPS： 确保网站使用 HTTPS 协议，防止数据在传输过程中被窃取。
- 防范 XSS 攻击： 对用户输入进行严格的验证和过滤，防止 XSS 攻击。
需要注意的是，即使采取了这些措施，
localStorage仍然不是一个完全安全的存储方式。对于安全性要求较高的数据，建议使用服务器端存储。
如何检测浏览器是否支持 localStorage？
在使用
localStorage之前，最好先检测浏览器是否支持
localStorageAPI。可以使用以下代码进行检测：
function storageAvailable(type) {
let storage;
try {
storage = window[type];
const x = '__storage_test__';
storage.setItem(x, x);
storage.removeItem(x);
return true;
}
catch(e) {
return e instanceof DOMException && (
// everything except Firefox
e.code === 22 ||
// Firefox
e.code === 1014 ||
// test name field too, because code might not be present
// everything except Firefox
e.name === 'QuotaExceededError' ||
// Firefox
e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
// acknowledge QuotaExceededError only if there's something already stored
(storage && storage.length !== 0);
}
}
if (storageAvailable('localStorage')) {
// localStorage is available
console.log('localStorage is available');
}
else {
// localStorage is not available
console.log('localStorage is not available');
} 这段代码首先尝试访问
window.localStorage对象，如果浏览器不支持
localStorage，会抛出一个异常。然后，代码会捕获这个异常，并判断异常类型是否为
QuotaExceededError，如果是，则说明
localStorage的容量已满。如果不是，则说明浏览器不支持
localStorage。
除了 localStorage 和 sessionStorage，还有哪些前端存储方案？
除了
localStorage和
sessionStorage，前端还有其他一些存储方案，例如：
- Cookie： Cookie 是一种小型的文本文件，由服务器发送到用户的浏览器，并存储在用户的计算机上。Cookie 可以用于存储用户的登录状态、偏好设置等信息。但是，Cookie 的容量较小，通常只有 4KB，而且存在安全风险。
- IndexedDB： IndexedDB 是一种 NoSQL 数据库，可以在用户的浏览器中存储大量结构化数据。IndexedDB 提供了事务、索引等功能，可以用于构建复杂的离线应用。
- Web SQL Database： Web SQL Database 是一种基于 SQLite 的关系型数据库，可以在用户的浏览器中存储结构化数据。但是，Web SQL Database 已经被废弃，不建议使用。
选择哪种存储方案取决于你的需求。如果只需要存储少量数据，可以使用 Cookie。如果需要存储大量结构化数据，可以使用 IndexedDB。
实际上，现在很多现代 Web 应用都倾向于使用 IndexedDB 来处理更复杂的数据存储需求，尤其是在需要离线访问的情况下。 但是，学习曲线相对较陡峭。
以上就是js怎么实现本地存储的详细内容，更多请关注知识资源分享宝库其它相关文章！
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。