上一篇简述了一些DOM的相关知识点,本篇是BOM的相关知识点。
DOM和BOM是JS的核心功能,无论什么框架,底层都离不开DOM和BOM
BOM全称浏览器对象模型(Browser Object Model)接下来JS如何操控浏览器。
window
window内置了一些属性和方法用于获取浏览器信息和操控浏览器
window.innerHeight浏览器窗口高度window.innerWidth浏览器窗口宽度widnow.open()打开新窗口window.close()关闭当前窗口window.moveTo()移动当前窗口位置window.resizeTo()重置当前窗口尺寸
Navigator
通过Navigator能拿到浏览器的相关信息,用于区分浏览器
console.log(navigator.userAgent.indexOf("Chrome") > -1);
现在基于Chrome套壳的浏览器很多,如果要细分浏览器,需要更多的细节部分条件判断。
location
通过location对象可以获取当前页面地址信息和重定向等。
location.href地址栏链接,赋值则替换链接location.protocol返回协议,http、https等location.hostname返回域名location.pathname返回路径信息location.search返回携带的参数location.reload()重新加载当前页面location.replace()替换地址栏,原历史记录会从历史栈删除
记得早期区分环境还是通过地址栏的域名进行判断,现在工程化了,都采用环境变量或工程配置了。
history
js操作历史的场景还是很多的,比如返回拦截提示、禁止后退、Vue等框架路由实现等等场景均用到了history的API。
history.length返回历史栈的数量history.back()控制浏览器后退操作history.go()控制浏览器访问历史栈第几个记录history.forward()控制浏览器前进操作history.pushState()向历史栈添加一条记录,不会触发页面刷新history.replaceState()替换历史栈上最新的记录,不会触发页面刷新
Vue-router的底层实现逻辑就是基于history的pushState()和replaceState()方法实现。
Storage、Cookie、IndexedDB
localStorage和sessionStorage用于本地存储,方法相同:
length返回存储数量getItem()获取执行key的值setItem()设置缓存removeItem()删除指定缓存clear()清理所有缓存
localStorage和sessionStorage的主要区别:
- localStorage一直存在,sessionStorage生命周期结束后就删除了。
- sessionStorage跨标签页不可共享,两个标签页是两个生命周期。
cookie和上述两种方式不一样,cookie通过document.cookie进行创建、读取、删除 cookie。
cookie可以通过expires设置过期时间。
cookie可以通过path设置属于什么路径。
删除Cookie只需要将过期时间设置到历史时间即可。
IndexDB是一个事务型数据库系统,用于存储大量的结构化数据,包括文件/二进制大型对象(blobs)
IndexDB在业务中目前很少用,如果需要用到去MDN查阅相关API即可。
需要注意区分Storage、Cookie、IndexedDB的特点,根据场景使用合适的方式。
相关试题
- 本地存储的方式有哪些?它们有什么区别?
- Vue-router路由跳转的原理是什么?
- 如果要阻止用户返回上一页面,该怎么做?
- 如何获取地址栏上的参数,怎么解析成对象?
- session和cookie有什么区别?
- 知乎、掘金、简述跳转第三方网站时都会进行提示,此场景实现逻辑?