Javascript - BOM 对象

短命女 2021-11-14 00:10 522阅读 0赞

浏览器相关的对象。获取浏览器相关的信息，可以设置和修改浏览器属性。

## 0. web-app 版 TodoList 小程序 ##

用以下内容可以自己手写一个 TodoList 小程序，再添加几行代码就可以用手机浏览器保存在桌面变成一个 web-app 使用！我自己写的托管在 GitHub，感兴趣的可以看看源码给个 star！~

GitHub 项目地址：[项目地址][Link 1]

小程序入口（推荐用手机打开）：[程序入口][Link 2]

## 1. window ##

### 1.1 延迟函数 ###

延迟一段时间执行某个函数，setTimeout 有返回值，这个返回值即是 setTimeout 的 id 值。

> 注意：延迟函数是异步执行的。具体的执行方式是，在设定的时间过后，将函数重新放到 script 的末尾等待执行。

语法:

*  `setTimeout(函数对象，延迟多少毫秒执行)`
 *  `setTimeout(函数对象，延迟时间，后面的参数皆为函数对象的参数)`

清除延迟函数：

`clearTimeout(延迟函数的ID)`

### 1.2 间隔函数 ###

每隔一段时间执行一次，第一次执行也会延迟。间隔函数也是异步执行函数，会将间隔执行的函数对象，放置到内存的事件队列里，到了时间点，就会从事件队列拿到主线程进行执行，主线程会根据在空闲时间点执行事件。

语法同 setTimeout 类似，有 `setInterval` 和 `clearInterval` 这两个方法用于创建和删除。

### 1.3 其它方法和属性 ###

*  `fetch`：未来学习ajax的时候可以用到的方法
 *  `open`：打开一个新的页面
 *  `outerHeight`：浏览器的高度
 *  `outerWidth`：浏览器的宽度
 *  `alert`：仅仅只是一个弹框，只有一个确定按钮
 *  `comfirm`：有确定和取消按钮的弹框，返回值分别为true和false
 *  `prompt`：这是一个可以让用户输入内容的弹框。（不建议使用）
 *  `scrollto`：设置滚动条，滚动到什么位置，语法：scrollTo(水平位置，垂直位置)

## 2 location ##

*  `hash: "#hotspotmining"` \--->页面锚点的位置
 *  `host: "baike.baidu.com"`\--->主机域名
 *  `hostname: "baike.baidu.com"`\--->主机名称
 *  `href: "https://baike.baidu.com/item/%E8%BF%90%E5%8A%A8/2134938#hotspotmining"` \--->这个页面链接地址
 *  `origin: "https://baike.baidu.com"`\--->来源的域名
 *  `pathname: "/item/%E8%BF%90%E5%8A%A8/2134938"` \--->服务器页面的项目路径
 *  `port: ""`\--->端口号，没有写就是根据协议，默认的端口号
 *  `protocol: "https:"`\--->协议,一般是http或者是https
 *  `location.href = "http://www.taobao.com"` \--->可以修改路径，跳转至相对应的页面
 *  `location.assign("http://www.qq.com")` \--->跳转页面：
 *  `location.reload()` \--->重新加载页面
 *  `location.replace('http://www.qq.com')` \--->替换掉当前页面

> 注意：assign和replace是有区别的。assign相当于跳转到下一个页面，所以会有返回键。replace是替换掉当前页面，所以不能返回之前的页面。

## 3 navigator ##

Navigator可以获取浏览器和系统相关的信息。

一般通过 userAgent 来获取浏览器的信息，并且根据浏览器信息，发送相对于的页面，例如是发送 PC 页面还是移动端页面。

//通过navigator来判断访问的浏览器 var userAgent = navigator.userAgent if(userAgent.indexOf("iPhone")!=-1 || userAgent.indexOf("Android")!=-1 || userAgent.indexOf("iPad")!=-1){ console.log("你是移动端") //location.assign("http://m.taobao.com") }else{ console.log("你是pc端") //location.assign("http://www.taobao.com") }

## 4 history ##

只能对页面前进后退，不能真正获取用户的浏览记录。

*  `history.back()`：后退1个页面
 *  `history.forward()`：前进1个页面
 *  `history.go()`：history.go(前进或后退的数)
    
    > 正数是前进，负数是后退。

## 5 localStorage ##

永久性保存数据，只要你不删除数据，数据就会永久保留。

### 5.1 使用localstorage进行增删改查 ###

**增、改**

localStorage.xx = 赋值内容 localStorage.setItem("username","隔壁老王") localStorage["like"] = "c唱t跳rRapl篮球

**删除**

localStorage.removeItem("like") delete localStorage.like

**获取**

console.log(localStorage.username) console.log(localStorage['username']) console.log(localStorage.getItem('username'))

**删除所有**

localStorage.clear()

## 6 sessionStorage ##

和 localStorage 类似，但仅在当次绘画有效，当关闭页面后，则丢失数据。

## 7 JSON ##

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。

> 可以实现对象和文本的相互转换

var obj = { name:"蔡徐坤", like:["唱","跳","rap","打代码"] } //将js对象转换成json格式的字符串 var strJson = JSON.stringify(obj) console.log(strJson) //json字符串转换成js对象 var jsonObj = JSON.parse(strJson) console.log(jsonObj)

转载于:https://www.cnblogs.com/carlosouyang/p/10967623.html

[Link 1]: https://link.zhihu.com/?target=https%3A//github.com/mingtingouyang/TodoList
[Link 2]: https://link.zhihu.com/?target=https%3A//mingtingouyang.github.io/TodoList/