Javascript基础知识点整理七：BOM和存储

IFE     2019年03月30日     分类：   前端知识体系     标签：   javascript     浏览量：   3392

1，BOM

ECMAScript是Javascript的语法核心，但如果要在Web中使用JavaScript，必需借助BOM（浏览器对象模型）。BOM提供了很多对象，用于访问浏览器的功能。

BOM的核心的window,表示浏览器的一个实例。它既是通过javascript访问浏览器的一个借口，又是ECMAScript规定的Global对象。因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

常用的BOM对象：

1. navigator

识别客户端浏览器的事实标准

var ua = navigator.userAgent;
var isChrome = ua.indexOf('Chrome');
console.log(isChrome);

2. screen

浏览器窗口外部的显示器的信息，如像素宽度和高度等。

console.log(screen.width);
console.log(screen.height);

3. location

提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。它既是window对象的属性，也是document对象的属性。

console.log(location.href); //当前加载页面的完整url
console.log(location.protocol); //协议 http https
console.log(location.pathname); // 路径
console.log(location.host);  //域名
console.log(location.search); //?号后面的查询字符串参数
console.log(location.hash); //#号后面就是hash

4. history

history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。

history.go(-1); //后退一页
history.go(1); //前进一页
history.back(); //后退一页
history.forward(); //前进一页

2，数据存储

• cookie
  cookie本身用于客户端和服务器端通信，但它有本地存储的功能，于是就被借用.使用doucment.cookie=xx获取和修改即可.
  cookie用于存储的缺点：
  1. 存储量太小，只有4kb;
  2. 所有的http请求都带着，会影响获取资源的效率；
  3. API简单，需要封装才能用
• sessionStorage和localStorage
  HTML5专门为存储而设计， 最大容量5M(因为不用在请求中带着，不会携带到ajax中)， API比较简单，

localStorage.setItem(key,value);
localStorage.getItem(key);

sessionStorage只保存数据到浏览器关闭，而localStorage数据保存到通过JavaScript删除或者用户清除浏览器缓存。

登陆后才可以评论