Frontend-Day18——Storage

Storage

• lcoalStorage:本地存储,提供的是一种永久性存储方法,在关闭掉网页重新打开时,存储的内容依然保留
• sessionStorage:会话存储,提供的是本次会话的存储,在关闭掉会话时,存储的内容会被清除掉

二者区别

• 关闭网页后重新打开,localStorage会保留,sessionStorage会被删除
• 页面内实现跳转,localStorage会保留,sessionStorage也会保留
• 页面外实现跳转(打开新网页),localStorage会保留,sessionStorage不会被保留

let token = localStorage.getItem("token")
if(!token){
    clg("服务器获取token")
    localStorage.setItem("token", token)
}
let username = localStorage.getItem("username")
let password = localStorage.getItem("password")
if(!username || !password){
    console.log("用户输入密码")
    username = "coderwhy"
	password = "12345"
    loaclStorage.setItem("username", username)
	loaclStorage.setItem("password", password)	
}


console.log(token)

常见方法

• setItem()
• key()
• removeItem()\
• clear()

通常来说不是直接使用这些方法,而是封装成一个类来使用.

class Cache {
  constructor(isLocal = true) {
    this.storage = isLocal ? localStorage: sessionStorage
  }
  setCache(key,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)

正则表达式

//创建正则
// 1>匹配的规则 pattern
//2> 匹配的修饰符flags
const re1 = new RegExp("hello","i")
const re2 = /hello/i

运用的方法

• exec,test来自于RegExp的方法
• String中match,matchAll,search,replace,split

防抖和节流函数库(underscore)

防抖debounce

• 事件触发时,相应的响应函数不会立即出发,而是会等待一定时间;

• 当时间密集触发时,函数的触发会被频繁的推迟

• 只有等待了一段时间也没有事件触发,才会真正的执行响应函数

应用场景:

• 输入框频繁的输入内容,搜索或提交信息
• 频繁的点击按钮,触发某个事件
• 监听浏览器滚动事件,完成某些特定操作
• 用户缩放浏览器resize事件

节流(throttle)

• 事件触发时,会执行这个时间的响应函数
• 如果这个事件会被频繁出发,那么节流函数会按照一定频率来执行函数
• 不管在这个中间有多少次触发这个时间,执行函数的频率总是固定的

应用场景:

• 监听页面的滚动事件
• 鼠标移动事件
• 用户频繁点击按钮操作
• 游戏中的设计
  • 飞机大战,空格发射一个子弹,即使按下的频率非常快,子弹也会保持一定的频率来发射.

深浅拷贝

<script>
  const info = {
    name: "why",
    age: 18,
    friend: {
      name: "kobe"
    }
  }

  //1.引用赋值:
  const obj1 = info
  
  //2.浅拷贝
  const obj2 = { ...info }
  // obj2.friend.name = "james"
  console.log(info.friend.name);

  const obj3 = Object.assign({}, info)
  // obj3.friend.name = "curry"
  console.log(info.friend.name);

  //3.深拷贝
  //3.1 JSON方法
  //缺陷:无法处理函数,和Symbol属性,对象的循环引用,也会报错
  const obj4  = JSON.parse(JSON.stringify(info))
  info.friend.name = "curry"
  console.log(obj4.friend.name);
</script> 

深拷贝:基于遍历

function isObject(value) {
  //null -> object
  const valueType = typeof value
  return (value !== null) && (valueType === "object" || valueType === "function")
}

function deepCopy(originValue) {
  //1.是否为原始类型
  if(!isObject(originValue)){
    return originValue
  }

  const newObj = {}
  for (const key in originValue){
    newObj[key] = deepCopy(originValue[key]);
  }
  return newObj
}

const newObj = deepCopy(pers1)
console.log(newObj);

事件总线

跨组件之间进行相应