localStorage.length 是浏览器自动维护的只读属性，实时返回同源下 localStorage 的键值对总数，每次 setItem、removeItem 或 clear 后同步更新，跨标签页即时生效。

localstorage.length 是浏览器原生提供的只读属性，它会实时返回当前同源（相同协议、域名、端口）下 localstorage 中已存储的键值对总数。无需手动计数或遍历，直接访问即可获得准确值。

为什么 length 能实时反映条目数

localStorage 是一个类数组的存储对象，其 length 属性由浏览器引擎自动维护：每次成功调用 setItem(key, value) 或 removeItem(key) 后，该值会同步更新。清空（clear()）后立即变为 0。

• 新增一个键：localStorage.setItem('a', '1') → localStorage.length 加 1
• 覆盖已有键：localStorage.setItem('a', '2') → length 不变
• 删除一个键：localStorage.removeItem('a') → length 减 1
• 跨标签页操作也生效：A 标签页写入，B 标签页读取 length 会立刻体现变化（需注意事件监听延迟，但属性值本身是实时的）

获取当前同源存储总数的正确写法

直接读取即可，无需额外逻辑：

console.log(localStorage.length); // 输出如：3

若需在页面中动态显示或响应变化，可封装为简单函数：

function getStorageCount() {
  return localStorage.length;
}

注意事项与常见误区

• 不包含 sessionStorage 或 IndexedDB：length 仅统计 localStorage 自身的键，与其他存储机制完全无关
• 同源限制严格：http://a.com 和 https://a.com 视为不同源，各自的 length 互不影响
• 无法区分“有效”与“过期”数据：length 统计所有现存键，不管内容是否已逻辑过期（localStorage 本身无自动过期机制）
• 隐私模式下可能受限：部分浏览器在无痕窗口中会禁用 localStorage，此时访问 length 可能抛错，建议加 try-catch

配合 storage 事件监听变化（可选增强）

如果需要在其他标签页修改后立即响应，可监听 storage 事件，再读取 length：

window.addEventListener('storage', () => {
  console.log('当前存储条目数：', localStorage.length);
});

注意：本页面自身触发的 setItem/removeItem 不会触发自身的 storage 事件，仅响应其他同源窗口的操作。