webApi第9天本地存储作用：页面刷新了数据还在 localStorage 永久存在除非手动删除本地存储存储数

本地存储

作用：页面刷新了数据还在

localStorage 永久存在除非手动删除

本地存储存储数据类型不管你传入什么类型都好，最终都被它转换成字符串类型
本地存储存储复杂类型引用类型的数据会出现数据丢失的问题固定规则来着
本地存储无法存放复杂类型的数据
复杂类型的数据通过JSON对象字符串相互之间的转换
生命周期永久生效，除非手动删除否则关闭页面也会存在
可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用 存储数据：localStorage.setItem(key, value)

获取数据：localStorage.getItem(key)

删除数据：localStorage.removeItem(key)

清空所有: clear()

sessionStorage 关闭浏览器数据丢失

本地存储的技术 sessionStorage  会话（打开页面到关闭页面之间过程 一次会话  ajax node）存储

      登录的时候 

      它的用法和 localStorage 用法一样 

      区别只有一个 

      sessionStorage 关闭页面后 数据就丢失 

      localStorage 除非是用户主动删除 否则一直存在 直到天荒地老

元素属性

固有属性

id href src标签自带有

自定义属性

获取dom.getAttribute('hello)

设置dom.setAttribute('hello',456)

删除dom.removeAttribute('hello')

h5建议的自定义属性

<a data-index ='1'>

dom.dataset.index

const a = document.querySelector('a');

      // 获取固有属性

      // console.log(a.href);

      // console.log(a.id);


      // 直接修改

      // a.href="http://www.qq.com";

      // a.id="top";


      // 自定义属性 不能直接通过点语法来获取和设置

      // 获取 getAttribute("属性名")

      // console.log(a.hello);

      // console.log(a.aa);

      // console.log( a.getAttribute("hello") );

      // console.log( a.getAttribute("aa") );



      // 设置 setAttribute(key,value)

      // a.setAttribute("hello","123");


      // 删除掉属性 removeAttribute(key)

      // a.removeAttribute("hello");


      //  自定义属性 -> h5建议的 自定义属性

      // 属性的时候 data-xxx 开头

      //  获取的时候  a.dataset.xxx

      //  设置  a.dataset.index = 3;


      // console.log(a.dataset.index);

      // a.dataset.index = 3;

      /* 

      小结 

      标签的属性 有两种分为

      1 固有属性  比如 id href src     点语法的方式获取和设置 方便

      2 自定义属性

        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 >

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

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

主要修改了外观颜色字体颜色等性能损耗比较低

最理想的情况 不要出现重排重绘出现重绘不要出现重排
定义重绘不一定会出现重排重排一定会出现重绘

事件

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

addEventListener可以绑定多个同名事件

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

匿名函数的方式绑定事件无法取消

// const btn = document.querySelector('button');

      // // 普通函数

      // function func() {

      //   console.log('2022-04-15 14:32:26');

      // }

      // function func2() {

      //   console.log("func2");

      // }


      // // 绑定事件

      // btn.addEventListener('click', func);


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

      // btn.addEventListener('click', func2);

      // setTimeout(function () {

      //   // 取消这个事件绑定

      //   btn.removeEventListener('click', func);

      // }, 5000);

      /* 

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

      2 removeEventListener 可以取消对应的事件类型和事件处理函数

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

       const btn=document.querySelector("button");


       btn.addEventListener("click",function () {

         console.log("你好");

       })


      //  想要取消 这个 输出你好的行为

      btn.removeEventListener("click",???);

事件三个阶段

捕获
目标-点击了最底层的标签处在目标阶段
冒泡

字符串方法

1. 转大写 toUpperCase()

2. 转小写toLowerCase()

3. 转数组 split('')

4. 拼接字符串 concat()或+

数组

1. 转字符串join()

2. 数组拼接concat()

正则

作用主要寻找字符串

判断是否有符合规则的字符串：

test() 用来查看正则表达式与指定的字符串是否匹配 regObj.test(被检测的字符串)

字符类

（.）点匹配除换行符之外的任何单个字符

想要表示点（.）本身加一个反斜杠

console.log(/\./.test('.'));// true