客户端储存(localStorage/sessionStorage)

---

localStorage/sessionStorage

区别（localStorage/sessionStorage储存有效期和作用域）

localStorage：

• 储存数据是永久的（除非web应用可以删除储存的数据，或用户设置浏览器配置）
• 作用域是限定在文档源（用域做隔离）文档源是通过协议、主机名、端口来确定
• 同源的文档间共享localStorage数据

sessionStorage：

• 有效期和做顶层窗口或者浏览器标签一样（一旦窗口或标签页永久关闭，数据也被删除）
• 作用域限定在文档源和localStorage一样
• 作用域限定在窗口中，同源的文档渲染在不同的浏览器标签页中也是不能共享数据的

api

localStorage.setItem(key: string , val)
localStorage.getItem(key: string )
localStorage.removeItem(key: string) //删除单项数据
localStorage.clear() // 清空当前localStorage全部数据

*当储存一个数字时候，会自动转换成字符串，所以记得当获取数据的时候要转换为数字

通过good-storage示例搜索历史本地缓存

之前提到过通过 localStorage/sessionStorage储存的内容都是字符形式，获取的数据最好经过转换，good-storage为我们做了这些处理，我们只要做缓存的写入读取不需要考虑转换

// 安装 'good-storage'并引入

import storage from 'good-storage'

// 搜索历史缓存

// 定义一个缓存关键词
const SEARCH_KEY = '__SEARCH__'
// 设置最大缓存
const SEARCH_MAX_LENGTH = 15

// 设置缓存

function saveSearch(keyWord) {
  let searches = storage.get(SEARCH_KEY, [])
  insertArray(searches, keyWord, (item) => {
    return item === keyWord
  }, SEARCH_MAX_LENGTH)
  storage.set(SEARCH_KEY, searches)
  return searches
}

// 删除单个缓存

function deleteSearch(keyWord) {
  let searches = storage.get(SEARCH_KEY, [])
  deleteFromArray(searches, (item) => {
    return item === keyWord
  })
  storage.set(SEARCH_KEY, searches)
  return searches
}

// 清空缓存

function clearSearch() {
  storage.remove(SEARCH_KEY)
  return []
}

// (读取缓存)从本地获取缓存的方法用于设置state中searchHistory状态的初始值

function loadSearch() {
  return storage.get(SEARCH_KEY, [])
}

// 公用函数

function insertArray(arr, val, compare, maxLen) {
  // 通过findIndex方法判断val是否在arr中
  const index = arr.findIndex(compare)
  if (index === 0) {
    return
  }
  // 如果在则在数组中删除
  if (index > 0) {
    arr.splice(index, 1)
  }
  //  然后把val添加在数组头部
  arr.unshift(val)
  // 如果超过最大储存数则删除最后一个值
  if (maxLen && arr.length > maxLen) {
    arr.pop()
  }
}

function deleteFromArray(arr, compare) {
  const index = arr.findIndex(compare)
  if (index > -1) {
    arr.splice(index, 1)
  }
}