js怎么实现本地存储-js教程-PHP中文网

js怎么实现本地存储

小老鼠

发布： 2025-08-17 11:44:01

原创

892人浏览过

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

js怎么实现本地存储

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

登录后复制

之前，最好先检测浏览器是否支持

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怎么实现本地存储的详细内容，更多请关注php中文网其它相关文章！