JavaScript浏览器对象模型BOM
- 1. 浏览器对象模型介绍
- 2. location
- 2.1 常用的属性
- 2.2 常用的方法
- 3. navigator
- 3.1 常用的属性
- 4. history
- 4.1 常用的方法：
- 5. 本地存储
1. 浏览器对象模型介绍
BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。
BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
2. location
location对象包含有关文档当前位置的信息
2.1 常用的属性
href：完整的url地址，对其赋值时用于地址的跳转。search：获取地址中携带的参数，符号？后面的部分。hash：获取地址中哈希值，符号#后面的部分。
<html><style>div {text-align: center;}</style><div>测试location对象</div><div><button class="btn1">点击跳转页面</button><button class="btn2">点击获取url参数</button><button class="btn3">点击获取url哈希值</button></div><script>const btn1 = document.querySelector(".btn1");btn1.addEventListener('click', () => {// 设置新的href，跳转到新的地址网页location.href = "https://blog.csdn.net/wenqi1992?spm=1010.2135.3001.5343"})// 点击前，在浏览器地址栏后面添加一串?XXXXXX，然后刷新页面，最后点击按钮const btn2 = document.querySelector(".btn2");btn2.addEventListener('click', () => {alert(location.search)})// 点击前，在浏览器地址栏后面添加一串#XXXXXX，然后刷新页面，最后点击按钮const btn3 = document.querySelector(".btn3");btn3.addEventListener('click', () => {alert(location.hash)})</script></html>
2.2 常用的方法
reload()：刷新当前页面方法，传入 true 表示强制刷新。replace()：替换当前地址并刷新页面。
3. navigator
navigator对象记录了浏览器自身的相关信息。
3.1 常用的属性
userAgent：浏览器的平台和版本信息。
<html><style>div {text-align: center;}</style><div>测试navigator对象</div><div><button class="btn1">点击查看浏览器的信息</button></div><script>const btn1 = document.querySelector(".btn1");btn1.addEventListener('click', () => {alert(navigator.userAgent)})</script>
</html>
4. history
history对象主要管理历史记录，该对象与浏览器地址栏的操作相对应。
4.1 常用的方法：
back()：后退forward()：前进go()：前进后退，参数大于 0 就是前进，参数小于 0 就是后退。
5. 本地存储
localStorage：本地存储数据，除非手动删除。
sesseionStorage：本地存储数据，会话关闭就删除。
<html><style>div {text-align: center;}</style><div>测试locationStorage和sessionStorage对象</div><div><button class="btn1">点击保存到locationStorage</button><button class="btn2">点击保存到sessionStorage</button></div><script>const btn1 = document.querySelector(".btn1");btn1.addEventListener('click', () => {localStorage.setItem("name", "文大奇Quiin")})const btn2 = document.querySelector(".btn2");btn2.addEventListener('click', () => {sessionStorage.setItem("name", "文大奇Quiin")})</script></html>
复杂数据类型存储，需要先用 JSON.stringify(obj)转换成 JSON 字符串。取回来的 JSON 字符串，可以用 JSON.parse(jsonStr)转换成对象。
