js Web Api 09天

本地储存

作用：用于存储数据（字符串 5m ）页面刷新了数据还在

①. localStorage

生命周期永久生效，除非手动删除否则关闭页面也会存在
可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用

<script>
      // 存储日期
      // localStorage.setItem("自定义",值-必须是字符串的格式)
      localStorage.setItem("date","二〇二二年四月十五日 09:06:48")

      // 获取它
      const date=localStorage.getItem("date");
    
    // 删除数据
    //  localStorage.removeItem("date ")
    //  清空所有
    //  clear()
      console.log(date);
    </script>

存储复杂数据类型存储

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

JSON.stringify(复杂数据类型)

》将复杂数据转换成JSON字符串存储本地存储中

JSON.parse(JSON字符串)

》 将JSON字符串转换成对象     **取出**  时候使用

sessionStorage（了解）

生命周期为关闭浏览器窗口
在同一个窗口(页面)下数据可以共享
以键值对的形式存储使用
用法跟localStorage 基本相同

<script>
      /* 
      本地存储的技术 sessionStorage  会话（打开页面到关闭页面之间过程 一次会话  ajax node）存储
      登录的时候 
      它的用法和 localStorage 用法一样 
      区别只有一个 
      sessionStorage 关闭页面后 数据就丢失 
      localStorage 除非是用户主动删除 否则一直存在 直到天荒地老
       */

      //  存数据
      // sessionStorage.setItem("ss",123);
      //  取数据
      // console.log(sessionStorage.getItem("ss"));
      // 删除一个
      // sessionStorage.removeItem("ss")
      // 清空
      // sessionStorage.clear();
    </script>

元素属性

固有属性

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

 <a data-index="0" id="nav" href="http://www.baidu.com" hello="no" aa="bb" >跳转</a >

    <script>
      // 获取 dom元素的固有属性  通过点语法来获取
      const a = document.querySelector('a');
      // 获取固有属性
      // console.log(a.href);
      // console.log(a.id);

      // 直接修改
      // a.href="http://www.qq.com";
      // a.id="top";

      /* 
      

    </script>

自定义属性

由程序员自己添加的属性,在DOM对象中找不到, 无法使用点语法操作,

必须使用专门的API

getAttribute('属性名') // 获取自定义属性

setAttribute('属性名', '属性值') // 设置自定义属性

removeAttribute('属性名') // 删除自定义属性

<div class="box"></div>
    <script>
      let box = document.querySelector('.box')
      box.setAttribute('myid', 10)
      console.log(box.getAttribute('myid'));
        
        
        
        //  自定义属性 -> h5建议的 自定义属性
      // 属性的时候 data-xxx 开头
      //  获取的时候  a.dataset.xxx
      //  设置  a.dataset.index = 3;

      // console.log(a.dataset.index);
      // a.dataset.index = 3;
     
    </script>

data-自定义属性:

传统的自定义属性没有专门的定义规则,开发者随意定值,不够规范,所以

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

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


    <div class="box" data-id="10"></div>
    <script>
      let box = document.querySelector('.box')
      
      console.log(box.dataset.id);
     
    </script>

正则表达式

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象
通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。

语法：

 let str = 'IT培训，前端开发培训，web前端培训，软件测试培训，产品经理培训'
      let reg = /前端/
      let re = reg.test(str)
      console.log(re); // true

元字符

普通字符:

大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。

也就是说普通字符只能够匹配字符串中与它们相同的字符。
元字符(特殊字符）

》比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm…..

》但是换成元字符写法： [a-z]

参考文档：

》MDN：developer.mozilla.org/zh-CN/docs/…

》正则测试工具: tool.oschina.net/regex

①. 边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符

 <script>

      // 边界符
  console.log(/^[a-zA-Z]{3,8}$/.test("111222 abc 333444"));// false
     console.log(/^[a-zA-Z]{3,8}$/.test("abc"));// true

      // 手机号码 验证  知道手机号码的验证规则 不懂去百度
      // 规则 以数字1开头 第二位数字可以是 35789  其他9位数字 （11位数组）
      console.log( /^1[35789]\d{9}$/.test("dd")  );// false
      console.log( /^1[35789]\d{9}$/.test("12345678901")  );// false
      console.log( /^1[35789]\d{9}$/.test("13345678901"));// false
       console.log( /^1[35789]\d{9}$/.test("15345678901"));// false


    </script>

②.量词

③. 字符类

（1）[ ] 里面加上 - 连字符

使用连字符：表示一个范围

比如：

》[a-z] 表示 a 到 z 26个英文字母都可以

》[a-zA-Z] 表示大小写都可以

》[0-9] 表示 0~9 的数字都可以

如：

[ ] 里面加上 ^ 取反符号

比如：

[ ]   里面加上 ^  取反符号  
比如：
[^a-z] 匹配除了小写字母以外的字符
注意要写到中括号里面

④. 修饰符

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等

 <script>
      //  /表达式/修饰符 
     
    //   i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
    //   g 是单词 global 的缩写，匹配所有满足正则表达式的结果
console.log(/a/i.test('a'))  // true
console.log(/a/i.test('A'))  // true

    </script>

替换 replace 替换

<script>
    //  字符串.replace(/正则表达式/, '替换的文本')
   </script>

web api 09天