webAPI第八天

本地存储

设置、读取方便、甚至页面刷新不丢失数据

容量较大，sessionStorage 和 localStorage 约 5M 左右

localStorage：

生命周期永久生效，除非手动删除否则关闭页面也会存在

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

以键值对的形式存储使用

存储复杂数据类型存储

本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地

存储数据：
localStorage.setItem(key, value)
获取数据：
localStorage.getItem(key)
删除数据：
localStorage.removeItem(key)
清空所有
clear()

JSON.stringify(复杂数据类型)
将复杂数据转换成JSON字符串    存储 本地存储中
JSON.parse(JSON字符串)
将JSON字符串转换成对象     取出 时候使用

sessionStorage（了解）

在同一个窗口(页面)下数据可以共享，用法跟localStorage 基本相同

元素属性

固有属性:

标签天生自带的属性比如class id title， dom.id dom.href dom.src 等, 可以直接使用点语法操作

自定义属性:

  <a  hello="123" >  

getAttribute('属性名') // 获取自定义属性
setAttribute('属性名', '属性值') // 设置自定义属性
removeAttribute('属性名') // 删除自定义属性

h5 data-自定义属性:

在html5中推出来了专门的data-自定义属性在标签上一律以data-开头

在DOM对象上一律以dataset对象方式获取

dom.dataset.index

高阶函数-了解

什么是高阶函数

a 一个函数可以把另外一个函数b当成参数来接收处理或者返回另外一个新的函数 c

函数a 就是高阶函数

作用：react阶段再次见面

浏览器渲染页面的流程-了解

1 重排

主要修改了元素的大小、位置、定位+浮动

损耗比较多浏览器性能

2 重绘

主要修改了外观颜色字体颜色。。

性能损坏比较低

3 最理想的情况

不要出现重排重绘

出现重绘不要出现重排

4 定义

出现重绘不一定会出现重排

出现重排一定会出现重绘

事件

绑定和取消绑定

addEventListener 来绑定事件，并且使用的是具名函数就可以取消绑定

addEventListener 是可以绑定多个同名事件

取消事件绑定 removeEventListener(事件类型，处理函数)

无法取消 addEventListener 事件对应的匿名函数

事件三个阶段

捕获

目标-点击了最底层的标签处在目标阶段

冒泡

字符串

转大写 toUpperCase()

转小写 toLowerCase

转数组 split("")

拼接字符串 concat()

数组

转成字符串 join()

拼接 concat()

正则表达式

作用：主要寻找字符串

根据规则去查找：找到则返回

test方法用于判断是否有符合规则的字符串，返回的是布尔值找到返回true，否则false

exec方法用于检索（查找）符合规则的字符串，找到返回数组，否则为 null

边界符

开头^

结尾$

如果 ^ 和 $ 在一起，表示必须是精确匹配。

举例：
      const str = `金来123`;
      // const reg = /梦想/; // 只要字符串中 包含有 梦想  返回true

      // 你检测的字符串 必须要以 “梦” 开头  以 “想” 结尾
      // const reg = /^金来$/; // 只能匹配 "金来"
      const reg = /^金来/; // `金来123`;
      // const reg = /金来$/; //  `1234323金来`; 
      // console.log(reg.test(str));