JS高级：storage存储-正则表达式

���录

Storage

localStorage与sessionStorage基本用法与区别

localStorage与sessionStorage区别 

其他常用方法 

 正则表达式

修饰符flag的使用

 匹配内容

 字符量

锚点与词边界 

转义字符

集合与范围

 量词

 贪婪和惰性模式

 捕获组

 常用方法

---

Storage

localStorage与sessionStorage基本用法与区别

 设置localStorage：

    localStorage.setItem('name','zhangsan')    localStorage.setItem('age',17)

 获取localStorage：

    let a =localStorage.getItem('name')    let b =localStorage.getItem('age')    console.log(a,b);

sessionStorage也类似

localStorage与sessionStorage区别 

说一下验证二

  123      localStorage.setItem('name','zhangsan')    sessionStorage.setItem('age',17)  

这种跳转是页面内跳转，也就是把当前网页变成index.html，就会保留

验证三

如果跳转是打开新的页面，sessionStorage就不会保留

  123      localStorage.setItem('name','zhangsan')    sessionStorage.setItem('age',17)

其他常用方法 

 一般在使用存储时，都会新建一个js文件，定义一个类

class Cache{    constructor(islocal = true){        this.storage = islocal?localStorage:sessionStorage    }    setCache(key,value){        if(!value){            throw new error('value为空')        }        else{            this.storage.setItem(key,JSON.stringify(value))        }            }    getCache(key){        let get = this.storage.getItem(key)        if(get){            return JSON.parse(get)        }        else{            throw new error('no key')        }    }    removeCache(key){        this.storage.removeItem(key)    }    clear(){        this.storage.clear()    }}const localCache = new Cache()const sessionCache = new Cache(false)

这里constructor先将参数赋值为true，用于选择this.storage的取值，也就是这里的存储到底是localStorage还是sessionStorage

定义了一些函数，这些函数的好处是，可以将value是对象的情况进行完整保存，因为如果直接用localStorage存储对象，就会出现

 然后自己声明两个对象localCache和sessionCache，以供使用

    let obj = {      name:111,      age:15,      level:777    }    localCache.setCache('obj',obj)

 

 正则表达式

也就是说正则表达式由两部分组成，第一部分是字符串匹配的内容，第二部分是匹配的规则 

 举个例子，找到字符串中的abc（不区分大小写），替换为cba

    let ss = 'asdasdabc Abc ABc  ABC'    let ss1 = ss.replaceAll(/abc/ig,'cba')    console.log(ss1);

abc是匹配的内容，ig是规则，i是不区分大小写，g是全局匹配

 例子2 删除所有数字

    let ss2 = 'asdas216846 asd8465ada asd 96489'    let ss3 = ss2.replaceAll(/\d+/ig,'')    console.log(ss3);

修饰符flag的使用

 

 匹配内容

 字符量

这里需要注意的是，写\d只会匹配一个数字，如果要匹配多个，写\d+，其他类似

 

锚点与词边界 

 给个词边界的例子，匹配时间，\b表示不能有\w表示的字符串

      let ss = 'asdasdabc 12:22  alndkand 22:23 qweq 123:222'    let ss1 = ss.match(/\b\d\d:\d\d\b/ig)    console.log(ss1);  

转义字符

比如我想匹配一个 .  则必须写/.

集合与范围

举个例子，选取第第一个数字是1，第二个数字是3-9的数字

    let ss = [123,124,109,176,147,198,175]    let ss1 = ss.filter(item => /^1[3-9]\d/ig.test(item))    console.log(ss1);

 量词

 例子，得到所有标签

    let ss = `sa
sdada
`    let ss1 = ss.match(//ig)    console.log(ss1);//['', '', '', '
', '
', '']

 贪婪和惰性模式

对于这个例子

    let ss = '    '    let ss1 = ss.match(//ig)    console.log(ss1);

我想得到的结果是ss1数组里面有三个元素，但是结果只有一个

['    ']

也就是说，这里在匹配   >  时，默认的是最后一个  >，所以.+采用的就是贪婪模式

但是如果这么写  // 就是惰性模式，惰性模式用的更多

    let ss = '    '    let ss1 = ss.match(//ig)    console.log(ss1);// ['', '', '']

 捕获组

如果对于上面那个例子，我只想拿到中间的内容，就可以使用（）分组：

    let ss = '    '    let ss1 = ss.matchAll(//ig)    for(let item of ss1){      console.log(item);    }

 需要注意的是，这里匹配只能用matchAll，返回迭代器

这里item是一个数组，第一个元素是全匹配，第二个元素就是  第一个分组了 

所以直接将item看成数组取值就行 

    let ss = '    '    let ss1 = ss.matchAll(//ig)    for(let item of ss1){      console.log(item[1]);    }

 分组也可以用来作为整体，这里我想匹配最少两个abc连起来的字符串，就可以用括号，如果不用分组，那么匹配的是 多个c  而不是多个abc

    let ss = 'asdasdabcabcioiojpjabcabcabckkkkabc'    let ss1 = ss.match(/(abc){2,}/ig)    console.log(ss1);//['abcabc', 'abcabcabc']

 

 常用方法

 test函数，例子，最少输入五个a才能通过

          let ipt = document.querySelector('.ipt')    let ifo = document.querySelector('.ifo')    ipt.addEventListener('input',function(){      if (/aaaaa/ig.test(ipt.value)){        ifo.innerHTML = 'YES'      }      else{        ifo.innerHTML = 'no'      }    })  

match函数，取出符合要求的字符串，形成数组

    let ss = 'asdasdabc Abc ABc  ABC'    let ss1 = ss.match(/abc/ig)    console.log(ss1);

 matchAll函数，返回一个迭代器，前提是正则必须有g 既全局搜索

    let ss = 'asdasdabc Abc ABc  ABC'    let ss1 = ss.matchAll(/abc/ig)    console.log(ss1.next());    console.log(ss1.next());    console.log(ss1.next());