JavaScript入门⑩｜BOM与浏览器对象，localStorage_位置_历史记录

author: 专注前端开发分享JavaScript干货title: JavaScript入门⑩BOM与浏览器对象localStorage_位置_历史记录update: 2026-04-28tags: JavaScript,BOM,localStorage,sessionStorage,location,navigator,history,前端入门作者专注前端开发分享JavaScript干货更新时间2026年4月适合人群掌握DOM操作想了解浏览器对象模型的开发者前言BOM是什么DOM操作网页内容BOMBrowser Object Model操作浏览器本身。BOM包含window、navigator、location、history、screen、localStorage等。一、window 对象window是浏览器窗口的全局对象所有全局变量和函数都是它的属性/方法。// 全局变量实际上是window的属性varname张三;console.log(window.name);// 张三// 常用window方法window.alert(提示);// 弹窗window.confirm(确定删除);// 确认框返回true/falsewindow.prompt(请输入);// 输入框// 窗口尺寸console.log(window.innerWidth);// 可视区宽度不含工具栏console.log(window.innerHeight);// 可视区高度console.log(window.outerWidth);// 整个浏览器宽度console.log(window.outerHeight);// 整个浏览器高度// 窗口操作window.open(https://example.com);// 打开新窗口window.close();// 关闭窗口// 定时器consttimeoutIdsetTimeout(()console.log(1秒后),1000);constintervalIdsetInterval(()console.log(每秒),1000);// 清除定时器clearTimeout(timeoutId);clearInterval(intervalId);二、navigator 对象浏览器信息// 用户代理字符串浏览器识别console.log(navigator.userAgent);// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36...// 浏览器名称和版本console.log(navigator.appName);// Netscapeconsole.log(navigator.appVersion);console.log(navigator.appCodeName);// 操作系统console.log(navigator.platform);// Win32// 语言console.log(navigator.language);// zh-CNconsole.log(navigator.languages);// [zh-CN, zh, en]// 是否联网console.log(navigator.onLine);// 是否启用了Cookieconsole.log(navigator.cookieEnabled);// 检测移动端constisMobile/Android|iPhone|iPad|iPod/i.test(navigator.userAgent);console.log(是否移动端,isMobile);// 剪贴板访问需要用户授权asyncfunctioncopyToClipboard(text){try{awaitnavigator.clipboard.writeText(text);console.log(复制成功);}catch(error){console.error(复制失败,error);}}三、location 对象URL信息// URL解析console.log(location.href);// 完整URLconsole.log(location.protocol);// https:console.log(location.host);// www.example.comconsole.log(location.hostname);// www.example.comconsole.log(location.port);// 8080console.log(location.pathname);// /path/to/pageconsole.log(location.search);// ?id123nametestconsole.log(location.hash);// #section// 解析URL参数constparamsnewURLSearchParams(location.search);console.log(params.get(id));// 123console.log(params.get(name));// test// 修改URL不刷新页面history.pushState(null,,/new-page);// 添加历史记录history.replaceState(null,,/another);// 替换当前记录// 页面跳转location.hrefhttps://example.com;// 跳转产生历史记录location.assign(https://example.com);// 同上location.replace(https://example.com);// 替换不产生历史记录location.reload();// 刷新页面location.reload(true);// 强制从服务器刷新CtrlF5四、history 对象浏览历史// 历史记录数量console.log(history.length);// 前进后退history.back();// 后退一页等同浏览器后退按钮history.forward();// 前进一页history.go(-2);// 后退两页history.go(1);// 前进一页// pushState / replaceState不刷新页面的路由history.pushState({page:1},,/page1);history.pushState({page:2},,/page2);history.pushState({page:3},,/page3);// 监听浏览器前进后退popstate事件window.addEventListener(popstate,(event){console.log(当前state,event.state);// 根据state更新页面内容});五、localStorage 与 sessionStorage5.1 localStorage持久存储// 存储数据键值对值必须是字符串localStorage.setItem(username,张三);localStorage.setItem(age,25);// 数字会自动转字符串// 读取数据constnamelocalStorage.getItem(username);console.log(name);// 张三// 删除数据localStorage.removeItem(username);// 删除单个localStorage.clear();// 清空全部// 存储对象需要序列化constuser{name:张三,age:25};localStorage.setItem(user,JSON.stringify(user));conststoredJSON.parse(localStorage.getItem(user));console.log(stored.name);// 张三// 存储数组constfruits[苹果,香蕉,橙子];localStorage.setItem(fruits,JSON.stringify(fruits));console.log(JSON.parse(localStorage.getItem(fruits)));// [苹果, 香蕉, 橙子]5.2 sessionStorage会话存储// 与localStorage用法完全相同sessionStorage.setItem(temp,临时数据);// 区别sessionStorage在浏览器关闭后自动清除// localStorage 永久保存除非手动清除console.log(sessionStorage.getItem(temp));5.3 存储事件监听跨标签页通信// 当localStorage在别的标签页被修改时触发window.addEventListener(storage,(event){console.log(修改的键,event.key);console.log(旧值,event.oldValue);console.log(新值,event.newValue);console.log(来源,event.url);});六、实战用户偏好设置存储classSettingsStore{constructor(prefixapp_){this.prefixprefix;}set(key,value){constfullKeythis.prefixkey;constdatatypeofvalueobject?JSON.stringify(value):String(value);localStorage.setItem(fullKey,data);}get(key,defaultValuenull){constfullKeythis.prefixkey;constdatalocalStorage.getItem(fullKey);if(datanull)returndefaultValue;try{returnJSON.parse(data);}catch{returndata;}}remove(key){localStorage.removeItem(this.prefixkey);}clear(){constkeysObject.keys(localStorage);keys.forEach(key{if(key.startsWith(this.prefix)){localStorage.removeItem(key);}});}}// 使用conststorenewSettingsStore(user_);// 保存用户设置store.set(theme,dark);store.set(fontSize,16);store.set(userInfo,{name:张三,email:zhangexample.com});// 读取console.log(store.get(theme));// darkconsole.log(store.get(fontSize));// 16console.log(store.get(userInfo));// { name: 张三, email: zhangexample.com }console.log(store.get(notExist,默认值));// 默认值七、知识卡对象作用window浏览器窗口全局对象navigator浏览器信息、在线状态locationURL信息、页面跳转history浏览历史、路由localStorage持久存储不主动清除一直存在sessionStorage会话存储关闭浏览器后清除setTimeout一次性定时器setInterval重复定时器八、课后作业用localStorage实现一个页面访问计数器刷新页面后显示访问次数用sessionStorage实现一个表单草稿保存功能输入内容后刷新页面不丢失用navigator.onLine监听网络状态变化断网时显示提示有问题欢迎评论区留言大家一起讨论标签JavaScript | BOM | localStorage | sessionStorage | location | navigator | history | 前端入门