JavaScript如何调用浏览器API\_本地存储方案有哪些

JavaScript 在浏览器中可直接调用丰富的 Web API（如 DOM 操作、fetch 网络请求、地理位置、通知权限和历史管理），无需额外依赖；本地存储则提供三种核心方案：轻量持久化的 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 接口一致，但数据仅在当前标签页生命周期内有效（关闭标签即清空），适合临时状态（如表单草稿、登录态中间值）：

• 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）不应仅依赖前端存储，服务端仍需校验与过期控制。

好了，本文到此结束，带大家了解了《JavaScript如何调用浏览器API\_本地存储方案有哪些》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！