对html的Storage的理解与使用

Storage作为Web Storage API 的接口，提供了访问特定域名下的会话存储(session storage)或本地存储(local storage)的功能，可以添加、修改、删除存储的数据项

storage 相关方法

1.storage.clear() 清空存储对象里所有键值

2.storage.getItem(keyName) 获取对应键名的键值

3.storage.setItem(keyName, keyValue) 设置对应键名的键值

4.storage.removeItem() 清空对应键名的键值

5.storage.key(n) 获取存储对象中第N个数据项键名

定义设置、获取以及清空本地存储数据项的对象方法

const storage = {
  // storage.get为方法名，key为方法接收的参数
  get: key => {
    // 以js对象形式返回想要获取的数据项的值
    // JSON.parse() 用于将一个JSON字符串转换为js对象
    return JSON.parse(localStorage.getItem(key)) || null
  },
  set: (key,val) => {
    // 以JSON字符串形式存储数据项
    // JSON.stringify() 用于将js值转换为JSON字符串
    return localStorage.setItem(key, JSON.stringify(val))
  },
  remove: key => {
    localStorage.removeItem(key)
  },
  clear: () => {
    localStorage.clear()
  }
}

export default storage

调用storage方法

import storage from 'storage'
// 页面加载后先判断缓存里有没有所需数据，如果有就直接使用缓存数据项，如果没有再请求接口数据
if (storage.get('proctInfo')) {
  this.rate = proctInfo.rate
} else {
  queryProduct().then((res) => {
    storage.set('proctInfo', res)
  }).catch((err) => {
    alert(err)
  })
}