localstorage是bom中web storage api的一部分，通过window.localstorage操作，仅支持字符串存储，复杂类型需json序列化，容量约5–10mb、同源限制、无过期机制，常用于页面状态持久化。

JavaScript 中 BOM 本身不直接提供“存储”功能，localStorage 是浏览器提供的 Web Storage API，属于 BOM 的一部分，通过 window.localStorage（可省略 window）访问，用于在浏览器中持久化保存字符串数据。

localStorage 基本用法

它只接受字符串作为值，所以存对象、数组等复杂类型时需配合 JSON.stringify() 和 JSON.parse()。

• 存数据：使用 setItem(key, value)，key 和 value 都必须是字符串
  localStorage.setItem('username', 'Alice')
localStorage.setItem('scores', JSON.stringify([85, 92, 78]))
• 取数据：用 getItem(key)，返回字符串或 null
const name = localStorage.getItem('username')
const arr = JSON.parse(localStorage.getItem('scores') || '[]')
• 删单个：用 removeItem(key)
localStorage.removeItem('username')
• 清空全部：用 clear()
localStorage.clear()

在浏览器中查看和调试

打开开发者工具（F12）→ Application（应用）选项卡 → 左侧选中 “Local Storage” → 右侧显示当前域名下的所有键值对。修改或删除可直接右键操作。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

注意事项与常见坑

localStorage 虽方便，但有几处关键限制需留意：

• 容量通常为 5–10 MB（因浏览器而异），超限会抛出 QuotaExceededError
• 仅支持同源（协议+域名+端口完全一致）访问，跨域无法读写
• 数据永久保存，除非手动清除或代码调用 clear()/removeItem()，关闭浏览器也不丢失
• 不参与网络请求，不会像 Cookie 那样自动发给服务器
• 没有过期机制，如需时效控制，得自己存时间戳并读取时校验

结合 BOM 其他对象的典型场景

比如用 location 搭配 localStorage 实现页面状态记忆：

• 用户从 /list 页面跳转到 /detail?id=123，返回时自动滚动到之前位置：
  存： localStorage.setItem('listScrollTop', String(window.pageYOffset))
  取：页面加载后 setTimeout(() => window.scrollTo(0, parseInt(localStorage.getItem('listScrollTop') || '0')), 0)
• 用 history.pushState() 改变 URL 后，把筛选条件存进 localStorage，避免刷新丢失

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南