localStorage/sessionStorage

區(qū)別（localStorage/sessionStorage儲存有效期和作用域）

localStorage：

• 儲存數(shù)據(jù)是永久的（除非web應(yīng)用可以刪除儲存的數(shù)據(jù)，或用戶設(shè)置瀏覽器配置）
• 作用域是限定在文檔源（用域做隔離）文檔源是通過協(xié)議、主機(jī)名、端口來確定
• 同源的文檔間共享localStorage數(shù)據(jù)

sessionStorage：

• 有效期和做頂層窗口或者瀏覽器標(biāo)簽一樣（一旦窗口或標(biāo)簽頁永久關(guān)閉，數(shù)據(jù)也被刪除）
• 作用域限定在文檔源和localStorage一樣
• 作用域限定在窗口中，同源的文檔渲染在不同的瀏覽器標(biāo)簽頁中也是不能共享數(shù)據(jù)的

api

localStorage.setItem(key: string , val)
localStorage.getItem(key: string )
localStorage.removeItem(key: string) //刪除單項(xiàng)數(shù)據(jù)
localStorage.clear() // 清空當(dāng)前l(fā)ocalStorage全部數(shù)據(jù)

*當(dāng)儲存一個(gè)數(shù)字時(shí)候，會自動(dòng)轉(zhuǎn)換成字符串，所以記得當(dāng)獲取數(shù)據(jù)的時(shí)候要轉(zhuǎn)換為數(shù)字

通過good-storage示例搜索歷史本地緩存

之前提到過通過 localStorage/sessionStorage儲存的內(nèi)容都是字符形式，獲取的數(shù)據(jù)最好經(jīng)過轉(zhuǎn)換，good-storage為我們做了這些處理，我們只要做緩存的寫入讀取不需要考慮轉(zhuǎn)換

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

import storage from 'good-storage'

// 搜索歷史緩存

// 定義一個(gè)緩存關(guān)鍵詞
const SEARCH_KEY = '__SEARCH__'
// 設(shè)置最大緩存
const SEARCH_MAX_LENGTH = 15

// 設(shè)置緩存

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
}

// 刪除單個(gè)緩存

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 []
}

// (讀取緩存)從本地獲取緩存的方法用于設(shè)置state中searchHistory狀態(tài)的初始值

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

// 公用函數(shù)

function insertArray(arr, val, compare, maxLen) {
  // 通過findIndex方法判斷val是否在arr中
  const index = arr.findIndex(compare)
  if (index === 0) {
    return
  }
  // 如果在則在數(shù)組中刪除
  if (index > 0) {
    arr.splice(index, 1)
  }
  //  然后把val添加在數(shù)組頭部
  arr.unshift(val)
  // 如果超過最大儲存數(shù)則刪除最后一個(gè)值
  if (maxLen && arr.length > maxLen) {
    arr.pop()
  }
}

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