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)
  }
}