JS本地存储使用教程

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《JS本地存储怎么用？》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

localStorage和sessionStorage的区别在于数据生命周期和作用域：localStorage持久保存，跨窗口共享；sessionStorage仅在当前会话有效，关闭标签页即清除。需长期存储用户偏好或登录状态时用localStorage；临时保存表单或购物车数据则用sessionStorage。两者均受同源策略限制，容量通常为5-10MB，超限时抛出QuotaExceededError。为防超限，可压缩数据、分块存储或改用IndexedDB。localStorage明文存储，易受XSS攻击，不应存敏感信息，建议加密并配合HTTPS使用。检测支持性需尝试读写操作以判断是否可用。其他前端存储方案包括Cookie（小容量、带宽消耗大）、IndexedDB（大容量、复杂数据）和已废弃的Web SQL。现代应用多结合localStorage与IndexedDB满足不同场景需求。

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 异常。

为了避免超出容量限制，可以采取以下策略：

1. 只存储必要的数据： 避免存储不必要的数据，尽量减少存储的数据量。
2. 压缩数据： 在存储之前对数据进行压缩，例如使用 gzip 或 LZString 算法。
3. 分块存储： 将大数据分割成小块，分别存储到 localStorage 中，并在读取时重新组装。
4. 使用其他存储方式： 如果 localStorage 的容量无法满足需求，可以考虑使用 IndexedDB 或服务器端存储。

比如，你可以用 JSON 字符串来存储复杂的数据结构，并在读取时再解析成 JavaScript 对象。 这样能更有效地利用存储空间，但也要注意 JSON 字符串的长度。

localStorage 存储的数据安全吗？

localStorage 存储的数据是明文存储在用户的浏览器中的，因此存在一定的安全风险。虽然同域名下的 JavaScript 代码可以访问 localStorage，但是如果网站存在跨站脚本攻击（XSS）漏洞，攻击者可以通过 JavaScript 代码窃取 localStorage 中的数据。

为了提高 localStorage 的安全性，可以采取以下措施：

1. 避免存储敏感信息： 不要将用户的密码、信用卡信息等敏感信息存储到 localStorage 中。
2. 对数据进行加密： 在存储之前对数据进行加密，例如使用 AES 或 RSA 算法。
3. 使用 HTTPS： 确保网站使用 HTTPS 协议，防止数据在传输过程中被窃取。
4. 防范 XSS 攻击： 对用户输入进行严格的验证和过滤，防止 XSS 攻击。

需要注意的是，即使采取了这些措施，localStorage 仍然不是一个完全安全的存储方式。对于安全性要求较高的数据，建议使用服务器端存储。

如何检测浏览器是否支持 localStorage？

在使用 localStorage 之前，最好先检测浏览器是否支持 localStorage API。可以使用以下代码进行检测：

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本地存储使用教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！