Web API基础知识六

本地存储（约5M）

localStorage（永久存在除非手动删除）

sessionStorage（关闭浏览器消失不见）

/*本地存储 四个api
1 存 localStorage.setItem(key,value)
2 取 localStorage.getItem(key)
3 删除 localStorage.removeItem(key)
4 清空 localStorage.clear()
*/
用法（两者一致）：
const date=localStorage.getItem("date");
console.log(date）

存储复杂数据类型存储

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

方法：

1.存储JSON.stringify(复杂数据类型)

2.取出JSON.parse(JSON字符串)

const objStr = JSON.stringify(obj)
localStorage.setItem("obj",objStr)
const newObjStr =  localStorage.getItem("obj");
      // // console.log(newObjStr)
      const newObj = JSON.parse(newObjStr);

      console.log(newObj)

元素属性

固有属性

比如 id href src 点语法的方式获取和设置方便

自定义属性

1 随机自己命名

<a  abc="123" >  
            获取 （getAttribute） 设置 setAttribute(key,value)  删除   removeAttribute(key)

2 h5建议 data- xxx

 <a  data-abc="123" >  
            获取（a.dataset.abc）  设置（a.dataset.abc=456）

3 最强大是（getAttribute） setAttribute removeAttribute

上述的这个方式，可以获取到任意的属性（固有属性和h5建议的自定义属性）
            <a data-index="0" id="nav" href="http://www.baidu.com" hello="no" aa="bb" >跳转</a >

高阶函数(了解)

a 一个函数可以把另一个函数b 当成参数来接收处理或者返回另一个新的函数c，那么函数 a就是高阶函数

浏览器渲染页面的流程

1.重绘：主要修改了外观颜色字体颜色（性能损耗比较低）

2.重排：主要修改了元素的大小、位置、定位+浮动（损耗比较多浏览器性能）

注意：出现重绘不一定出现重排，但出现重排就一定出现重绘

事件拓展

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

addEventListener可以绑定多个同名事件

btn.addEventListener('click', func);

addEventListener 可以绑定多个同名事件
btn.addEventListener('click', func2);
btn.removeEventListener('click', func)

取消绑定：removeEventListener（事件类型，处理函数）

匿名函数无法取消绑定

const btn=document.querySelector("button");
       
       btn.addEventListener("click",function () {
         console.log("你好");
       })

      //  想要取消 这个 输出你好的行为
      btn.removeEventListener("click",???)

字符串方法

开发过程中，有很多需求要针对字符串做处理

用js封装字符串的方法：

1.转大写toUpperCase( )

2.转小写toLowerCase( )

3.转数组 split( " " )

let msg = 'abcd'
console.log(msg.toUpperCase())

let msg = 'HELLODFDFDFDFDFD'
console.log(msg.toLowerCase())

const str="abcdefg"; //=> ["a","b","c","d","e","f","g"]
console.log(str.split(""))

数组方法

1.转成字符串

2.拼接concat（）

const arr = ['a', 'b', 'c', 'd'];

 console.log(arr.join('')); // join 数组转字符串
console.log(arr.join('-')); // a-b-c-d 数组转字符串

const str1 = '123';
      const str2 = 'abc';
      console.log(str1.concat(str2));// 很少用  有什么用？ 当你的键盘 + 键坏  使用它

正则表达式

用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象

例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)

//定义正则表达式语法:
	let 变量名 = /表达式/
	其中/ /是正则表达式字面量

用 test( )方法查看正则表达式与指定的字符串是否匹配

regObj.test(被检测的字符串)
ex：
let str = '海贼王,路飞,航海王,海军,索隆'
let reg = /路飞/
let re = reg.test(str)
console.log(re)  //true
//如果字符串匹配，返回true，否则false

元字符

1.边界符

^ ----开头

$ -----结尾

(如果^ 和 $ 在一起,表示必须是精确匹配)

2.量词

3.字符类(占位符)