javaScript 09 BOM操作与本地存储localStorage

🥳博       主：初映CY的前说(前端领域)

🌞个人信条：想要变成得到，中间还有做到！

🤘本文核心：BOM中对象的使用、js执行机制、localStorage、map()、join()的使用

目录

一、BOM介绍

        1.1、什么是BOM?

        1.2.BOM作用？

二、js执行机制

同步与异步任务

        1.同步任务

        2.异步任务

三、localStorage本地存储

        1.1特性

        1.2语法

        1.3在浏览器查看本地存储数据：

        2.1下面是本地存储的增删操作

        3.1本地存储-存储复杂数据类型

四、数组map/join方法的基本使用

        1.map

        2.Join

        3. 数组map和join一起使用

---

一、BOM介绍

1.1、什么是BOM?

BOM(Browser Object Model ) 是浏览器对象模型

1.2.BOM作用？

BOM 是将一个浏览器的各个组成部分封装成对象（Browser）供调用使用

总的来说，BOM 对象大致包含五个部分：

window ：浏览器窗口对象

navigator：浏览器对象

screen：浏览器所处客户端的显示器屏幕对象

history：浏览器当前窗口的访问历史记录对象

location：浏览器当前窗口的地址栏对象

每个对象都有对应的属性和方法，通过这些属性和方法我们可以获取浏览器的信息。在这五个部分中，window 对象尤为重要，根据图片的区域划分，可以很清楚的看出， window 对象其中就已经包含了 history、location 对象，还有一个非常重要的 document 对象，但由于其重要性太高，所以我们将其单独区分出来，称为 DOM 对象。

而另外两个：navigator、screen 对象，使用到的次数较少，后面我们对于BOM中的内容主要就涉及 window、history、location 三个对象就可以了。

二、js执行机制

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。

这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉

同步与异步任务

浏览器在解析渲染的时候会优先把同步任务都执行完毕才去执行异步任务

为了解决单线程带来的问题，JS中将任务（需要执行的代码）分成两类：

1.同步任务

• 只有前一个任务执行完毕，才能执行后一个任务
• 程序的执行顺序与任务的书写顺序是一致的。
• 同步任务会有阻塞

2.异步任务

• 异步任务由 JavaScript 委托给宿主环境(浏览器)进行执行
• 当异步任务执行完成后，会通知 JavaScript 主线程执行异步任务的回调函数
• 异步任务不会有阻塞

常见异步任务

1. 事件监听
2. setTimeout setInterval
3. ajax

三、localStorage本地存储

以前我们页面写的数据一刷新页面就没有了，是不是？

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

• 数据存储在用户浏览器中
• 设置、读取方便、甚至页面刷新不丢失数据
• 容量较大，sessionStorage和localStorage约 5M 左右

使用场景：用户刷新浏览器后用户数据还存在浏览器中

1.1特性

可以多窗口（页面）共享（同一浏览器可以共享）

以键值对的形式存储使用

1.2语法

// 存储数据
localStorage.setItem(key, value)
// 获取数据
localStorage.getItem(key)
// 删除数据
localStorage.removeItem(key)

1.3在浏览器查看本地存储数据：

2.1下面是本地存储的增删操作

如何通过localStorage存取删数据？

存：localStorage.setItem(key, value)

取：localStorage.getItem(key)

删：localStorage.removeItem(key)

创建本地仓库

 控制台get到了值

删除

 3.1本地存储-存储复杂数据类型

本地存储只能字符串,无法存储复杂数据类型

解决不能存储发杂数据类型的办法：

JSON.parse(JSON字符串)

当然，转成了字符串类型无法调用数组的方法，我们再用一种方法给转回来数组形式

JSON.parse(JSON字符串)

四、数组map/join方法的基本使用

1.map

数组.map(function(item[,index]){})

参数说明：

• item 表示数组中正在处理的当前元素
• index 可选 数组中正在处理的当前元素的索引

作用：

• 遍历数组
• 对数组的元素加工处理

返回值：

• 加工处理后的一个新数组

举个栗子

2.Join

作用：将数组元素连接成一个字符串并返回这个字符串

参数说明：

• separator 可选 指定一个字符串来分隔数组的每个元素。
• 如果需要，使用指定的分隔符将数组转换为字符串。
• 如果省略，数组元素用逗号（,）分隔。
• 如果 separator 是空字符串（""），则所有元素之间都没有任何字符

返回值：

• 一个所有数组元素连接的字符串。如果 arr.length 为 0，则返回空字符串

 3. 数组map和join一起使用

map遍历后我没加join（）方法

此时我加上了join()方法