javaScript 09 BOM操作与本地存储localStorage

简介: BOM中对象的使用、js执行机制、localStorage、map()、join()的使用

一、BOM介绍

1.1、什么是BOM?

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

1.2.BOM作用?

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

2ef7721b166de80030ffc725db964c23.png

总的来说,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在浏览器查看本地存储数据:

c815397442bcd0de8d7c8f97978ed39c.jpg

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

如何通过localStorage存取删数据?

存:localStorage.setItem(key, value)

取:localStorage.getItem(key)

删:localStorage.removeItem(key)

创建本地仓库

e85baeb9dc5546b483490041978673e3.png

控制台get到了值

a68755d2e8b645a39656f34ea463c48c.png

删除

172ad1695273478da565f1f8e23e5ac9.png

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

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

23a93610dc074b708e200ead0e2a96e8.png

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

JSON.parse(JSON字符串)

534396c6d18045f6848d0298d696c4be.png

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

JSON.parse(JSON字符串)

a10806c4b3eb4248ae4a502fb3ead6d8.png

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

1.map

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

参数说明:

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

作用:

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

返回值:

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

举个例子

f08760e75be24349a380941d779b6cfc.png

2.Join

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

参数说明:

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

返回值:

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

f99dbe1b9d6e420fac10c42bec4db124.png

3. 数组map和join一起使用

map遍历后我没加join()方法

0da94cbde2fa4be3b8c3d9e7310f6133.png

此时我加上了join()方法

5400b5ca2e4a4c2b859155553fa190c9.png





相关文章
|
3月前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
5月前
|
XML 移动开发 JavaScript
js中BOM和DOM总结(基础篇)
文章总结了JavaScript的BOM和DOM知识点,包括window、screen、location、history、navigator对象,以及消息框、计时器和cookie。同时,介绍了DOM的概念、节点获取和修改方法,以及事件处理。
js中BOM和DOM总结(基础篇)
|
4月前
|
存储 JSON JavaScript
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
173 0
|
4月前
|
JavaScript 前端开发 Java
【前端基础篇】JavaScript之BOM介绍
【前端基础篇】JavaScript之BOM介绍
58 0
|
5月前
|
JavaScript 前端开发 API
Javaweb之javascript的BOM对象的详细解析
BOM为Web开发提供了强大的API,允许开发者与浏览器进行深入的交互。合理使用BOM中的对象和方法,可以极大地增强Web应用的功能性和用户体验。需要注意的是,BOM的某些特征可能会在不同浏览器中表现不一致,因此在开发过程中需要进行仔细的测试和兼容性处理。通过掌握BOM,开发者能够制作出更丰富、更动态、更交互性的JavaWeb应用。
52 1
|
6月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
206 1
|
6月前
|
JavaScript 前端开发
js bom的概念
js bom的概念
48 1
|
6月前
|
JavaScript 前端开发
JavaScript BOM 的概念(浏览器对象模型)
JavaScript BOM 的概念(浏览器对象模型)
67 1
|
6月前
|
存储 前端开发 JavaScript
揭秘!JavaScript本地存储的四大绝技:从Cookie到IndexedDB,让你的Web应用秒变数据存储高手,轻松应对各种挑战!
【8月更文挑战第4天】JavaScript为核心前端技术,提供多样本地存储方案以优化用户体验与减少服务器负载。首先,Cookie虽用于基本数据如登录状态,但受大小限制及安全性影响。接着,Web Storage中的LocalStorage持久存储不变数据,SessionStorage则限于单次会话。更进一步,IndexedDB作为全面数据库解决方案,支持复杂数据操作但使用较复杂。每种方式根据应用需求各有优势。
98 9
|
6月前
|
存储 JavaScript 前端开发
JavaScript 本地存储
JavaScript 本地存储
45 0

热门文章

最新文章

  • 1
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    23
  • 2
    Node.js 中实现多任务下载的并发控制策略
    32
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    【JavaScript】深入理解 let、var 和 const
    48
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    44
  • 6
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    52
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    55
  • 8
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    71
  • 9
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 10
    JavaWeb JavaScript ③ JS的流程控制和函数
    62