JavaScript可直接调用浏览器Web API；本地存储有localStorage（持久化）、sessionStorage（会话级）和IndexedDB（结构化数据库）三种方式，各适用于不同场景。
JavaScript 通过浏览器提供的全局对象（如 window、navigator、document、localStorage 等）直接调用 Web API，无需额外引入。本地存储主要有三种常用方式：localStorage、sessionStorage 和 IndexedDB，适用场景各不相同。
常见的浏览器 API 交互方式
JavaScript 运行在浏览器环境中，天然可访问大量 Web API：
-
DOM 操作：用
document.querySelector()获取元素，element.addEventListener()绑定事件，element.innerHTML = ...更新内容； -
网络请求：用
fetch()发起 HTTP 请求，支持 Promise 和 async/await； -
地理位置：调用
navigator.geolocation.getCurrentPosition()获取用户位置； -
通知权限：用
Notification.requestPermission()申请弹窗通知权限； -
历史记录：用
history.pushState()或history.replaceState()修改 URL 而不刷新页面。
localStorage：持久化键值对存储
适合保存少量字符串数据（如用户偏好、主题设置），关闭浏览器后仍保留，上限通常为 5–10 MB（因浏览器而异）：
- 写入：
localStorage.setItem('theme', 'dark')； - 读取：
localStorage.getItem('theme')； - 删除：
localStorage.removeItem('theme')或localStorage.clear()； - 注意：只能存字符串，对象需先
JSON.stringify()，读取时再JSON.parse()。
sessionStorage：会话级键值对存储
与 localStorage 接口一致，但数据仅在当前标签页生命周期内有效（关闭标签即清空），适合临时状态（如表单草稿、登录态中间值）：
立即学习“Java免费学习笔记（深入）”；
-
sessionStorage.setItem('draft', 'hello world')； - 新开一个标签页无法访问该值，刷新页面则保留；
- 不共享于同源的其他标签页或窗口。
IndexedDB：结构化客户端数据库
适合存储大量结构化数据（如离线邮件、缓存资源），支持索引、事务和二进制（Blob/File）：
- 异步 API，需处理 open、createObjectStore、add、get 等步骤；
- 可用封装库简化使用，如 idb（轻量 Promise 化封装）；
- 例如：打开数据库
idb.openDB('mydb', 1, { upgrade: (db) => db.createObjectStore('users') })； - 比 localStorage 更强大，但也更复杂，非必要时不建议替代简单键值场景。
不复杂但容易忽略：所有本地存储都受同源策略限制，不同协议、域名、端口之间互不可见；敏感信息（如 token）不应仅依赖前端存储，服务端仍需校验与过期控制。
