JS基础 - 8|BOM、Location、History、Cookie、Storage

187 阅读3分钟

上一篇简述了一些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的底层实现逻辑就是基于historypushState()replaceState()方法实现。

Storage、Cookie、IndexedDB

localStoragesessionStorage用于本地存储,方法相同:

  • length 返回存储数量
  • getItem() 获取执行key的值
  • setItem() 设置缓存
  • removeItem() 删除指定缓存
  • clear() 清理所有缓存

localStoragesessionStorage的主要区别:

  • 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有什么区别?
  • 知乎、掘金、简述跳转第三方网站时都会进行提示,此场景实现逻辑?