localStorage.length和sessionStorage.length是只读属性，返回当前存储中键值对数量，新增或删除键时自动增减，覆盖键不改变值；Web Storage无原生length监听机制，需通过storage事件（仅其他同源窗口触发）或手动读取实现监控。
HTML5 中没有名为 Length 的属性用于直接监控存储条目数量。真正可用的是 localStorage.length 和 sessionStorage.length，它们是只读属性，返回当前存储对象中键（key）的总数。
localStorage.length 与 sessionStorage.length 的作用
这两个属性反映的是当前存储区域中已设置的键值对数量，不是字节长度，也不是数据内容长度。每次调用都实时返回当前键的数量，无需额外监听机制。
- 注意：它只统计顶层键名数量，不递归计算嵌套对象或数组内部的字段数
- 新增一个键（如
localStorage.setItem('a', '1')），length自动加 1 - 删除一个键（如
localStorage.removeItem('a')），length自动减 1 - 覆盖已有键（如重复
setItem('a', '2')）不会改变length
如何实时监控条目数量变化
Web Storage 本身不提供原生事件来监听 length 变化，但可通过 storage 事件间接感知变更（仅在同源其他窗口/标签页中触发），再配合手动读取 length 获取最新值。
- 在页面中添加监听：
window.addEventListener('storage', () => console.log(localStorage.length)) - 该事件不会在当前操作的窗口触发（避免自循环），只响应其他同源窗口的增删改操作
- 若需本窗口实时响应，需在每次
setItem/removeItem/clear后主动读取length
常见误用提醒
不要混淆以下概念：
-
localStorage.length≠ 存储数据总字节数（无内置方法获取字节大小，需手动JSON.stringify()计算） -
localStorage.key(index)是配合length遍历键名的方法，例如localStorage.key(0)获取第一个键 - 调用
localStorage.clear()后，length立即变为0
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
