Web API(6)

流行奶黄包
131 阅读2分钟

本地存储

一、本地存储特性

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

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key)

删除数据：

localStorage.removeItem(key)
二、存储复杂数据类型存储：

本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地 1.JSON.stringify(复杂数据类型) 将复杂数据转换成JSON字符串 存储 本地存储中 2.JSON.parse(JSON字符串) 将JSON字符串转换成对象 取出 时候使用

三、数组和对象管理比较复杂的数据演示：
   <script>
        // 1.正常定义对象
        const obj={
            name:'靓仔',
            height:100,
            weight:200,
        }
        // 2.有好用的代码，可以帮助我们快速把一个对象转成字符串
        const objStr=JSON.stringify(obj)
        // 3.本地储存 可以存储字符串类型的数据
        localStorage.setItem('obj',objStr)
        // 4.把本地存储的数据重新读取出来
        const newObjStr=localStorage.getItem('obj')
        console.log(newObjStr);
        // 5.重新把字符串解析成原来的对象
        const newObj=JSON.parse(newObjStr)
        console.log(newObj);
    </script>
四、自定义属性

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

<body>
    <a id="nav" href="http://www.baidu.com">百度</a>
    <script>
        // 获取dom元素固有属性 通过点语法来获取
       const a=document.querySelector('a')
        // 获取固有属性
       console.log(a.href);
       console.log(a.id);
        
       //直接修改
        a.href='http://www.qq.com';
        a.id='abc'
    </script>
</body>

2.自定义属性: ①getAttribute('属性名') // 获取自定义属性

<body>
    <a href="http://baidu.com"hello='ok'>百度</a>
    <script>
        const a=document.querySelector('a')
        console.log(a.getAttribute('hello')); //ok
    </script>
</body>

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

<body>
    <a href="http://baidu.com"hello='ok'>百度</a>
    <script>
        const a=document.querySelector('a')
        a.setAttribute('hello','thanks')
    </script>
</body>

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

<body>
    <a href="http://baidu.com"hello='ok'>百度</a>
    <script>
        const a=document.querySelector('a')
        a.removeAttribute('hello')
    </script>
</body>

3.本地存储的技术 sessionStorage

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

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

4..h5建议的自定义属性:

<body>
    <a data-index="0" href="http://baidu.com">百度</a>
    <script>
        const a=document.querySelector('a')
        // 
        // 属性:data-xxx
        // 获取：a.dataset.index=3
        console.log(a.dataset.index);
        // 设置index=2
        a.dataset.index=2
    </script>
</body>

字符串方法演示

    <script>
    //  转大写
     let big='hello'
    console.log(big.toLocaleUpperCase());
    
     // 转小写
    let little='HELLO'
    console.log(little.toLowerCase());
    
    // 字符串转数组
    const str='abcdefg'
    // split('')空字符分割
    console.log(str.split(''));

    const str2='a-b-c-d-e-f-g'
    console.log(str2.split('-'));
    </script>

数组方法演示

    <script>
    // 数组转字符串
    const arr=['a','b','c','d']
    console.log(arr.join('')); //加入
    console.log(arr.join('-'));//a-b-c-d
    
    // 链接 数组和数组之间的链接
    const arr1=['1','2','3']
    const arr2=['a','b','c']
    // 将两个数字合并成一个数组
    console.log(arr1.concat(arr2));

    // 字符串 concat也表示合并
    const str1='123'
    const str2='abc'
    console.log(str1.concat(str2));//少用 123abc
    console.log(str1+str2);//123abcs
    </script>

正则表达式

一.正则表达式是用于匹配字符串中字符组合的模式

二.作用：

1.表单验证（匹配） 2.过滤敏感词（替换） 3.字符串中提取我们想要的部分（提取）

三.定义正则表达式语法：

let 变量名=/表达式/
如:let reg=/前端/
/   /是正则表达式字面量

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

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

 <script>
      /* 
      正则的作用 寻找字符串  检测 这个字符串这有没有我想要的文字
       */
      const str = `我是一只小毛驴`;

      // 判断一下这个字符串中有没有 梦想 两个字

      // 定义规则
      const reg = /小毛驴/;

      // 规则和字符串 匹配  test
      console.log(reg.test(str)); // 有 返回true 没有返回false
    </script>

五.元字符

1.边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）

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

1650046086651.png

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

1650046108005.png

2.量词(修饰符) （表示重复次数）

量词用来 设定某个模式出现的次数

1650046395963.png

1650046444869.png

1650046457927.png

3.字符类(占位符) （比如 \d 表示 0~9）

①[ ] 匹配字符集合 后面的字符串只要包含 abc 中任意一个字符，都返回 true

1650046536799.png

②[ ] 里面加上 - 连字符
使用连字符 - 表示一个范围

<script>
        console.log(/^[a-z]$/.test('c'));//true
 </script>

比如： [a-z] 表示 a 到 z 26个英文字母都可以 [a-zA-Z] 表示大小写都可以 [0-9] 表示 0~9 的数字都可以

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

④预定义：指的是某些常见模式的简写方式。

1650047007087.png

六、替换字符串

  <script>
       let str='足球好看嘛'
       //'字符串'，replace('待替换文字'，'替换成什么')//会返回一个新的字符串
       let newStr=str.replace('足球','篮球')
       console.log(newStr);//'篮球好看吗'
   </script>

七、正则替换

   <script>
       let str='成绩 100'
       
       //将数字代替成*
       //str.replace('支持正则的方式来匹配文字','要替换成什么')
       //+找到一个或者多个数字，然后只替换成一个
       str=str.replace(/\d/g,'*')//'成绩 ***'
       //g属于正则中的 修饰符 表示 全局global 看到一个替换一个
       str=str.replace(/\d+/,'*')//'成绩 *00' 
       console.log(str);


       let English='拜拜 bey'
        // 将英文字母替换成*
        English=English.replace(/[a-zA-Z]/g,'*')//'拜拜 ***'
        // i(ignore)表示忽略大小写
        English=English.replace(/[a-z]/gi,'*')//'拜拜 ***'

        console.log(English);

   </script>
avatar
文章
阅读
粉丝