localstorage和sessionstorage如果存满会怎样？

最新推荐文章于 2025-08-18 16:35:01 发布

原创最新推荐文章于 2025-08-18 16:35:01 发布 · 1.1k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html5

前端同时被 2 个专栏收录

342 篇文章

订阅专栏

项目实战

31 篇文章

订阅专栏

localstorage和sessionstorage如果存满会怎样？

1.示例
2.最后一次溢出的字符串是会存储到最大容量停止还是不会存储？
3.总结
4.如何给localStorage扩容？

关于浏览器的存储知识详细见我写的文章https://blog.youkuaiyun.com/fageaaa/article/details/145643306

1.示例

如果localstorage和sessionstorage存储容量溢出了怎么办？我们可以使用一个测试网站来看看：

<!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中写入任何新数据。

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

最后一次尝试存储超出容量的字符串，浏览器会拒绝存储，并且不会将该字符串存储到 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>

在这里插入图片描述

3.总结

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

无法再添加新数据： 当存储空间已满，尝试通过setItem()方法添加更多数据时，浏览器会抛出一个QuotaExceededError异常。这意味着应用程序无法再向localStorage或sessionStorage中写入任何新数据。
不会自动覆盖已有数据：即使存储空间满了，已存储的数据也不会被自动替换或删除。浏览器不会为了腾出空间而清除旧数据，而是直接拒绝新增数据的请求。