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- 存储限额可能会因不同版本和操作系统而有所不同。
请注意，以上存储限额是根据一般情况下的估计值，具体的存储限额可能会因浏览器版本、操作系统和设备配置等因素而有所不同。开发人员应该在实际应用程序中进行测试，并根据需要采取适当的措施来处理存储限额错误。
我如果存储容量溢出了怎么办？
我们可以使用一个测试网站来看看：
当存储空间已满，尝试通过setItem()方法添加更多数据时，浏览器会抛出一个QuotaExceededError异常。这意味着应用程序无法再向localStorage或sessionStorage中写入任何新数据。
最后一次溢出的字符串是会存储到最大容量停止还是不会存储？
最后一次尝试存储超出容量的字符串，浏览器会拒绝存储，并且不会将该字符串存储到 localStorage 或 sessionStorage 中。在存储空间达到限额后，任何进一步的存储操作都会失败，浏览器不会尝试将超出容量的数据存储到客户端存储中。
下面是一个简单的网页测试，点击按钮会尝试向 localStorage 存储增加 500KB 的数据。测试结果将会显示存储是否成功，以及当前的存储大小。（注意：如果使用相同的键（key）向 localStorage 或 sessionStorage 存储数据，新数据会覆盖掉旧数据。）
总结
对于存储限制，通常情况下，每个域名的localStorage和sessionStorage的总存储空间大约为5MB至10MB，具体大小可能因浏览器而异。当接近或达到这个存储限制时，会发生以下情况：
无法再添加新数据： 当存储空间已满，尝试通过setItem()方法添加更多数据时，浏览器会抛出一个QuotaExceededError异常。这意味着应用程序无法再向localStorage或sessionStorage中写入任何新数据。不会自动覆盖已有数据： 即使存储空间满了，已存储的数据也不会被自动替换或删除。浏览器不会为了腾出空间而清除旧数据，而是直接拒绝新增数据的请求。应用程序需处理异常： 开发者应当在使用localStorage或sessionStorage时考虑到存储限制，并通过捕获QuotaExceededError异常来优雅地处理这种情况。可能的应对措施包括清理不必要的数据、提示用户清理浏览器缓存、切换到其他存储方案（如IndexedDB、服务器端存储等），或者调整应用程序逻辑以减少对本地存储的依赖。
可以访问 web storage blank template来自己测试一下。 MDN有相关的教程