localstorage和sessionstorage如果存满会怎样？

么么哒小新

已于 2024-04-10 17:08:03 修改

阅读量814

点赞数 8

分类专栏：前端文章标签： javascript html5 chrome

于 2024-04-10 17:06:12 首次发布

本文链接：https://blog.csdn.net/qq_29473607/article/details/137601282

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

localStorage 和 sessionStorage 都是浏览器提供的客户端存储机制，用于在用户的浏览器中保存少量数据。它们分别具有不同的生命周期和存储限制：

localStorage：
- localStorage 提供了持久化的本地存储功能，存储的数据会一直保存在用户的设备上，除非用户主动清除或通过代码删除。
- 存储的数据以键值对的形式存在，键和值都必须是字符串类型。
- localStorage 中存储的数据在同一域名下的所有页面都可以访问，直到用户清除浏览器缓存或手动删除数据。
sessionStorage：
- sessionStorage 与 localStorage 类似，也提供了本地存储的功能，但是数据仅在当前会话（即浏览器标签页或窗口）有效，关闭标签页或窗口后数据将被清除。
- 存储的数据也以键值对的形式存在，键和值都必须是字符串类型。
- 与 localStorage 不同，sessionStorage 中存储的数据仅在同一浏览器标签页或窗口中共享，无法跨页面共享。

下表列出了 localStorage 和 sessionStorage 在不同浏览器中的存储限额以及其他详细信息：

浏览器	localStorage 最大存储限额	sessionStorage 最大存储限额	其他信息
Chrome	约 5MB	约 5MB	- 存储限额可能会因不同版本和操作系统而有所不同。
Firefox	约 10MB	约 10MB	- 存储限额可能会因不同版本和操作系统而有所不同。
Safari	约 5MB	约 5MB	- 在桌面版本和移动版本的 Safari 中，存储限额可能不同。 - 在 iOS 和 macOS 上，存储限额通常较小。
Edge	约 5MB	约 5MB	- 存储限额可能会因不同版本和操作系统而有所不同。

请注意，以上存储限额是根据一般情况下的估计值，具体的存储限额可能会因浏览器版本、操作系统和设备配置等因素而有所不同。开发人员应该在实际应用程序中进行测试，并根据需要采取适当的措施来处理存储限额错误。

我如果存储容量溢出了怎么办？

我们可以使用一个测试网站来看看：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Storage Limit Test</title>
</head>

<body>
    <script>
        function testStorageLimit(storageType) {
            try {
                const storage = window[storageType];
                const maxStorageSize = 5 * 1024 * 1024; // 5MB
                const testData = 'a'.repeat(maxStorageSize); // 创建一个大小为5MB的测试数据

                storage.setItem('testData', testData);
                console.log(`${storageType} - Data stored successfully.`);

                // 尝试读取存储的数据
                const retrievedData = storage.getItem('testData');
                console.log(`${storageType} - Retrieved data length:`, retrievedData.length);
            } catch (error) {
                console.error(`${storageType} - Storage limit exceeded:`, error);
            }
        }

        // 测试 localStorage 存储空间限额
        console.log('Testing localStorage:');
        testStorageLimit('localStorage');

        // 测试 sessionStorage 存储空间限额
        console.log('\nTesting sessionStorage:');
        testStorageLimit('sessionStorage');
    </script>
</body>

</html>

请添加图片描述

当存储空间已满，尝试通过setItem()方法添加更多数据时，浏览器会抛出一个QuotaExceededError异常。这意味着应用程序无法再向localStorage或sessionStorage中写入任何新数据。

最后一次溢出的字符串是会存储到最大容量停止还是不会存储？

最后一次尝试存储超出容量的字符串，浏览器会拒绝存储，并且不会将该字符串存储到 localStorage 或 sessionStorage 中。在存储空间达到限额后，任何进一步的存储操作都会失败，浏览器不会尝试将超出容量的数据存储到客户端存储中。

下面是一个简单的网页测试，点击按钮会尝试向 localStorage 存储增加 500KB 的数据。测试结果将会显示存储是否成功，以及当前的存储大小。（注意：如果使用相同的键（key）向 localStorage 或 sessionStorage 存储数据，新数据会覆盖掉旧数据。）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Storage Test</title>
        <script>
            function updateStorage() {
                try {
                    const dataSize = 500 * 1024; // 500KB
                    const existingData = localStorage.getItem('testData') || '';
                    const newData = 'a'.repeat(dataSize);
                    const totalSize = (existingData.length + newData.length) / 1024; // 转换为KB

                    localStorage.setItem('testData', existingData + newData);
                    console.log(`存储成功，总共存储了 ${totalSize} KB 的数据。`);
                    document.getElementById(
                        'result',
                    ).innerText += `\n存储成功，总共存储了 ${totalSize} KB 的数据。`;
                } catch (error) {
                    console.error('存储失败:', error);
                    document.getElementById('result').innerText += '\n存储失败: 存储限额已满。';
                }
            }
        </script>
    </head>
    <body>
        <button onclick="updateStorage()">增加500KB的存储</button>
        <div id="result"></div>
    </body>
</html>

请添加图片描述

总结

对于存储限制，通常情况下，每个域名的localStorage和sessionStorage的总存储空间大约为5MB至10MB，具体大小可能因浏览器而异。当接近或达到这个存储限制时，会发生以下情况：

无法再添加新数据：当存储空间已满，尝试通过setItem()方法添加更多数据时，浏览器会抛出一个QuotaExceededError异常。这意味着应用程序无法再向localStorage或sessionStorage中写入任何新数据。
不会自动覆盖已有数据：即使存储空间满了，已存储的数据也不会被自动替换或删除。浏览器不会为了腾出空间而清除旧数据，而是直接拒绝新增数据的请求。
应用程序需处理异常：开发者应当在使用localStorage或sessionStorage时考虑到存储限制，并通过捕获QuotaExceededError异常来优雅地处理这种情况。可能的应对措施包括清理不必要的数据、提示用户清理浏览器缓存、切换到其他存储方案（如IndexedDB、服务器端存储等），或者调整应用程序逻辑以减少对本地存储的依赖。

可以访问 web storage blank template来自己测试一下。
MDN有相关的教程

么么哒小新

关注

8
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
1
评论
localstorage和sessionstorage如果存满会怎样？

对于存储限制，通常情况下，每个域名的和的总存储空间大约为5MB至10MB，具体大小可能因浏览器而异。无法再添加新数据：当存储空间已满，尝试通过setItem()方法添加更多数据时，浏览器会抛出一个异常。这意味着应用程序无法再向或中写入任何新数据。不会自动覆盖已有数据：即使存储空间满了，已存储的数据也不会被自动替换或删除。浏览器不会为了腾出空间而清除旧数据，而是直接拒绝新增数据的请求。应用程序需处理异常：开发者应当在使用或时考虑到存储限制，并通过捕获异常来优雅地处理这种情况。
复制链接

扫一扫