Storage存储-正则表达式(coderwhy版本)

(掌握)Storage-Storage的基本使用和应用

认识Storage

WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式：

localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留(cookie)
sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除；

const token = "xiaoyu666"
const name = "xiaoyu"
const password = 123456
localStorage.setItem("token",token)
localStorage.setItem("name",name)
localStorage.setItem("password",password)
//成功保存token信息，这是将 内容 保存在本地

但实际中通常是会进行判断本地是否有信息的，没有的话再去服务器获取

//获取本地的token
let token = localStorage.getItem("token")
if(!token){//判断本地是否有token
  console.log("没有token，从服务器获取");
  token = "token"
  //将服务器上的token放入本地
  localStorage.setItem("token",token)
}
//获取本地的账号密码
let username = localStorage.getItem("username")
let password = localStorage.getItem("password")
//判断本地是否有账号密码
if(!username || !password){
  console.log("让用户输入账号密码");
  //服务器获取账号密码
  username = "xiaoyu"
  password = "123456"
  //将服务器上的账号设置到本地
  localStorage.setItem("username",username)
  localStorage.setItem("password",password)
}

(掌握)Storage-local和session的使用

localStorage和sessionStorage的区别

我们会发现localStorage和sessionStorage看起来非常的相似
那么它们有什么区别呢？

验证一：关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除
验证二：在页面内实现跳转，localStorage会保留，sessionStorage也会保留(就是不会开启新的页面)，这个适合使用sessionStorage，而不是永久性存储
验证三：在页面外实现跳转（打开新的网页），localStorage会保留，sessionStorage不会被保留

(掌握)Storage-Storage的常见方法补充

Storage常见的方法和属性(本地存储跟会话存储都有的)

Storage有如下的属性和方法：
属性：

Storage.length：只读属性
√返回一个整数，表示存储在Storage对象中的数据项数量

console.log(Storage.length)

方法：

Storage.key(index)：该方法接受一个数值n作为参数，返回存储中的第n个key名称
Storage.getItem()：该方法接受一个key作为参数，并且返回key对应的value
Storage.setItem()：该方法接受一个key和value，并且将会把key和value添加到存储中

√如果key存储，则更新其对应的值

Storage.removeItem()：该方法接受一个key作为参数，并把该key从存储中删除
Storage.clear()：该方法的作用是清空存储中的所有key

//如果有一个需要一直固定的数值在两个地方及以上的地方用到了，我们最好将这个数值抽取到一个常量里面，防止不小心没注意修改掉导致不一致
//(这里以本地存储为例子，会话存储也是一样的)
const ACCESS_TOKEN = "token"//抽取出来的常量一般大写
//常见的方法
localStorage.setItem(access_token,"xiaoyuToken");
console.log(localStorage.getItem(access_token));
//获取本地存储按索引顺序的key值
console.log(localStorage.key(0));
console.log(localStorage.key(1));
//删掉不需要的key
localStorage.removeItem(access_token)
//清空所有key
localStorage.clear()

(掌握)Storage-Cache类存储工具的封装

在进行这类操作的时候，我们会统一进行封装在一个文件里面，然后进行引用或者export导出、import导入

//文件1
class Cache {
  setCache(key,value){
    localStorage.setItem(key,value)
  }
  getCache(key){
    return localStorage.getItem(key)
  }
  removeCache(key){
    localStorage.removeItem(key)
  }
  clear(){
    localStorage.clear()
  }
}
const localCache = new Cache()

//文件2引入文件1
localCache.setCache("xiaoyu",666)

此时我们可能会觉得多此一举，为什么要这么做？直接用不好吗

但storage有个特点，那就是不能直接存储对象类型(复杂类型)，但是我们又想要存对象类型，那这不就得自己来处理了吗

const userInfo = {//如果非要存的话，拿到的value也只是个类型
  name:"小余",
  nickname:"2002XiaoYu",
  level:20
}
localStorage.setItem("userInfo",userInfo)
console.log(first);

需要将对象转化为字符串类型，然后传入要取出的时候再从字符串转化为对象类型，那这个操作如果要每次使用都写一次的话，就太过繁琐了，而且重复代码量也会提升，最好的当然还是直接封装起来了，也能够额外扩展我们想要的很多操作

const userInfo = {
  name:"小余",
  nickname:"2002XiaoYu",
  level:20
}
localCache.setCache("userInfo",userInfo)//成功封装
console.log(first);

class Cache {
  setCache(key,value){
    if(!value){
      throw new Error("value必须有值")
    }
    if(value){
      localStorage.setItem(key,JSON.stringify(value))//进行转化为字符串
    }
  }
  getCache(key){
    const result = localStorage.getItem(key)
    if(result){//进行严谨判断，不然如果没有获取到值会获取到undefined，undefined进行转化会报错
      return JSON.parse(result)//字符串转化为对象
    }
  }
  removeCache(key){
    localStorage.removeItem(key)
  }
  clear(){
    localStorage.clear()
  }
}
const localCache = new Cache()

进一步修改成我们想要的，让我们自如的切换在local跟session之间

class Cache {
  constructor(isLocal = true){
    //storage不一定就是本地存储，也可能是会话存储，我们可以将控制这个的开关也交给我们把控
    this.storage = isLocal ? localStorage : sessionStorage
  }
  setCache(key,value){
    if(!value){
      throw new Error("value必须有值")
    }
    if(value){
      this.storage.setItem(key,JSON.stringify(value))//进行转化为字符串
    }
  }
  getCache(key){
    const result = this.storage.getItem(key)
    if(result){
      return JSON.parse(result)
    }
  }
  removeCache(key){
    this.storage.removeItem(key)
  }
  clear(){
    this.storage.clear()
  }
}
const localCache = new Cache()
const sessionCache = new Cache(false)

(理解)正则-正则表达式的理解和JS创建

什么是正则表达式？

我们先来看一下维基百科对正则表达式的解释：

正则表达式（英语：Regular Expression，常简写为regex、regexp或RE），又称正则表示式、正则表示法、规则表达式、常规表示法，是计算机科学的一个概念
正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串
许多程序设计语言都支持利用正则表达式进行字符串操作

简单概况：正则表达式是一种字符串匹配利器，可以帮助我们搜索、获取、替代字符串；
在JavaScript中，正则表达式使用RegExp类来创建，也有对应的字面量的方式：

正则表达式主要由两部分组成：模式（patterns）和修饰符（flags），也就是我们传入的两个参数

//1.匹配的规则pattern，填入RegExp第一个参数
//2.匹配的修饰符flags，填入RegExp第二个参数
const re1 = new RegExp("hello","i")//语法糖形式
const re2 = new /规则/修饰
const re2 = new /hello/i//字面量形式的正则

(理解)正则-正则表达式和普通字符串用法的对比

正则表达式的使用方法

有了正则表达式我们要如何使用它呢？

JavaScript中的正则表达式被用于 RegExp 的 exec 和 test 方法；
也包括 String 的 match、matchAll、replace、search 和 split 方法；

方法	描述
exec	一个在字符串中执行查找匹配的 RegExp 方法，它返回一个数组（未匹配到则返回 null）	RegExp实例方法
test	一个在字符串中测试是否匹配的 RegExp 方法，它返回 true 或 false	RegExp实例方法
match	一个在字符串中执行查找匹配的 String 方法，它返回一个数组，在未匹配到时会返回 null	字符串的方法
matchAll	一个在字符串中执行查找所有匹配的 String 方法，它返回一个迭代器（iterator）	字符串的方法
search	一个在字符串中测试匹配的 String 方法，它返回匹配到的位置索引，或者在失败时返回-1	字符串的方法
replace	一个在字符串中执行查找匹配的 String 方法，并且使用替换字符串替换掉匹配到的子字符串	字符串的方法
split	一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的 String 方法	字符串的方法

//1.使用正则对象上的实例方法
let re1 = new RegExp()
let str = "hello world";
console.log(re1.test(str));//true
//2.使用字符串的方法，传入一个正则表达式
let message = "fdabc faBC dfABC AaaBc"
//需求：将所有的abc(忽略大小写)，换成cba
const newMessage1 = message.replaceAll("abc","cba")//有局限性，fdcba faBC dfABC AaaBc
//i = 不区分大小写，g = 全局
const newMessage2 = message.replaceAll(/abc/ig,"cba")//fdcba fcba dfcba Aacba
console.log(newMessage1,newMessage2);
//需求：将字符串中数字全部删除
// `\d`表示数字类型，`+`表示一个或者多个
let num = "105 dd5 a5dfg diff666"
let num1 = num.replaceAll(/\d+/g,"")
console.log(num1);// dd adfg diff

(理解)正则-正则表达式的使用方式和方法

使用正则对象上的实例方法
webpack -> loader -> test：匹配文件名
正则 -> 拿到文件 -> loader操作

//1.1 test方法：检测某一个字符串是否符合正则的规则
const re1 = /abc/ig
const re2 = /^abc$/g
const message = "fdabc fa44BC df5ABC AaaBc66"
//检测某一个字符串是否符合正则的规则
if(re1.test(message)){
    console.log("你符合规则了，里面包含了大小写随意的abc")
}else{
    console.log("你里面没有包含大小写随意的abc")
}
//你符合规则了，里面包含了大小写随意的abc
const message2 = "abc"//可以再尝试一下这些其他的效果
if(re2.test(message)){
    console.log("你符合里面只有abc的规则了")
}else{
    console.log("你不符合里面只能有abc")
}
//你不符合里面只能有abc

正则案例

//让用户输入的账号必须是 不区分大小写的xiaoyu，不能有多余内容
    输入账号：<input type="text">
    <p class="tip"></p>
const inputEl = document.querySelector("input")
const tipEl = document.querySelector(".tip")
inputEl.oninput = function(){
  const value = this.value
  if(/^xiaoyu$/ig.test(value)){
    tipEl.textContent = "账号格式正确"
  }else{
    tipEl.textContent = "输入账号规范不符合，请重新输入"
  }
}

exec方法

使用正则执行一个字符串

const message = "fdabc fa44BC df5ABC AaaBc66"
const re1 = /abc/ig
console.log(re1.exec(message))//index是找到位置开头的索引

Storage存储-正则表达式(coderwhy版本)（二）https://developer.aliyun.com/article/1470356

Storage存储-正则表达式(coderwhy版本)（一）

Storage存储-正则表达式(coderwhy版本)

(掌握)Storage-Storage的基本使用和应用

认识Storage

(掌握)Storage-local和session的使用

localStorage和sessionStorage的区别

(掌握)Storage-Storage的常见方法补充

Storage常见的方法和属性(本地存储跟会话存储都有的)

(掌握)Storage-Cache类存储工具的封装

(理解)正则-正则表达式的理解和JS创建

什么是正则表达式？

(理解)正则-正则表达式和普通字符串用法的对比

正则表达式的使用方法

(理解)正则-正则表达式的使用方式和方法

正则案例

exec方法

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Storage存储-正则表达式(coderwhy版本)（一）

Storage存储-正则表达式(coderwhy版本)

(掌握)Storage-Storage的基本使用和应用

认识Storage

(掌握)Storage-local和session的使用

localStorage和sessionStorage的区别

(掌握)Storage-Storage的常见方法补充

Storage常见的方法和属性(本地存储跟会话存储都有的)

(掌握)Storage-Cache类存储工具的封装

(理解)正则-正则表达式的理解和JS创建

什么是正则表达式？

(理解)正则-正则表达式和普通字符串用法的对比

正则表达式的使用方法

(理解)正则-正则表达式的使用方式和方法

正则案例

exec方法

热门文章

最新文章

相关课程

相关电子书