1.认识Storage

image.png

2.localStorage和sessionStorage的区别

image.png

区别一：刷新页面的化，两个都在。关闭页面的化，sessionStorage没有，但是localStorage在。

区别二：一个标签是一个会话，所以页面内跳转，都是同一个标签，两个都在。
两个页面之间相互跳转传送数据，这个时候没必要使用localstorage去做永久存储，使用sessionStorage就可以了。_target是_self。

就是在test.html同一个文件夹写一个about文件，test里面写一个 <a href="./about.html"> about</a>。_target默认是_self，这个时候在test页面设置的session和local，在about页面都是能看到的。

区别三：打开新的页面，_target是_blank,local有，session没有。
一个tab是一个会话，新打开了一个标签tab，就是建立了不同的会话，sessionStorage不会保存。
就是在test.html同一个文件夹写一个about文件，test里面写一个 <a href="./about.html" _target="_blank"> about</a>。在新页面打开about文件，这个时候在test页面设置的session和local，在about页面只能看到local，不能看到session。

同一个ip地址，同一个端口号，就是同一个域。在同一个域里面，就能访问到local storage。
localStorage：在所有同源窗口都是共享的

3.Storage常见的方法和属性

image.png

// 1.setItem
localStorage.setItem("name", "coderwhy")
localStorage.setItem("age", 18)

// 2.length
console.log(localStorage.length)//2
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i)
  console.log(key)//age //name
  console.log(localStorage.getItem(key))//18 //coderwhy
}

// 3.key方法 
//该方法接受一个数值n作为参数，返回存储中的第n个key名称
console.log(localStorage.key(0))//age

// 4.getItem(key)
console.log(localStorage.getItem("age"))//18

// 5.removeItem
localStorage.removeItem("age")

// 6.clear方法
localStorage.clear()//该方法的作用是清空存储中的所有key；

4.封装Storage

class HYCache {
  constructor(isLocal = true) {
    this.storage = isLocal ? localStorage: sessionStorage
  }

  setItem(key, value) {
    if (value) {
      this.storage.setItem(key, JSON.stringify(value))
    }
  }

  getItem(key) {
    let value = this.storage.getItem(key)
    if (value) {
      value = JSON.parse(value)
      return value
    } 
  }

  removeItem(key) {
    this.storage.removeItem(key)
  }

  clear() {
    this.storage.clear()
  }

  key(index) {
    return this.storage.key(index)
  }

  length() {
    return this.storage.length
  }
}

const localCache = new HYCache()
const sessionCac he = new HYCache(false)

export {
  localCache,
  sessionCache
}

ts封装

class HYCache {
  storage: Storage
  constructor(isLocal = true) {
    this.storage = isLocal ? window.localStorage : window.sessionStorage
  }
  setItem(key: string, value: any) {
    this.storage.setItem(key, JSON.stringify(value))
  }
  getItem(key: string) {
    const value = this.storage.getItem(key)
    if (value) {
      return JSON.parse(value)
    }
  }
  dremoveItem(key: string) {
    this.storage.remove(key)
  }
  clearItem() {
    this.storage.clear()
  }
}

const localCache = new HYCache()
const sessionCache = new HYCache(false)

export { localCache, sessionCache }

感谢coderwhy老师的高级js课程，学习到了非常的的东西。