想知道一個20k級別前端在專案中是怎麼使用LocalStorage的嗎？

Sunshine_Lin發表於2021-12-10
前端

前言

大家好，我是林三心，用最通俗的話，講最難的知識點是我的座右銘，基礎是進階的前提是我的初心，今天就給大家嘮一下嗑，講一下，怎麼樣使用 localStorage、sessionStorage ，才能更規範，更高大上，更能讓人眼前一亮。

用處

在平時的開發中， localStorage、sessionStorage 的用途是非常的多的，在我們的開發中發揮著非常重要的作用：

  • 1、登入完成後 token 的儲存
  • 2、使用者部分資訊的儲存，比如 暱稱、頭像、簡介
  • 3、一些專案通用引數的儲存，例如 某個id、某個引數params
  • 4、專案狀態管理的持久化，例如 vuex的持久化、redux的持久化
  • 5、專案整體的切換狀態儲存，例如 主題顏色、icon風格、語言標識
  • 6、等等、、、、、、、、、、、、、、、、、、、、、、、、、、

普通使用

那麼，相信我們各位平時使用都是這樣的（拿 localStorage 舉例）

1、基礎變數

// 當我們存基本變數時
localStorage.setItem('基本變數', '這是一個基本變數')
// 當我們取值時
localStorage.getItem('基本變數')
// 當我們刪除時
localStorage.removeItem('基本變數')

2、引用變數

// 當我們存引用變數時
localStorage.setItem('引用變數', JSON.stringify(data))
// 當我們取值時
const data = JSON.parse(localStorage.getItem('引用變數'))
// 當我們刪除時
localStorage.removeItem('引用變數')

3、清空

localStorage.clear()

暴露出什麼問題？

1、命名過於簡單

  • 1、比如我們存使用者資訊會使用 user 作為 key 來儲存
  • 2、儲存主題的時候用 theme 作為 key 來儲存
  • 3、儲存令牌時使用 token 作為 key 來儲存
    其實這是很有問題的，我們們都知道，同源的兩個專案，它們的 localStorage 是互通的。

我舉個例子吧比如我現在有兩個專案，它們在同源 https://www.sunshine.com 下，這兩個專案都需要往 localStorage 中儲存一個 key 為 name 的值，那麼這就會造成兩個專案的 name 互相頂替的現象，也就是 互相汙染現象 ：

截圖2021-11-10 下午10.19.09.png

2、時效性

我們們都知道 localStorage、sessionStorage 這兩個的生命週期分別是

  • localStorage：除非手動清除，否則一直存在
  • sessionStorage：生命結束於當前標籤頁的關閉或瀏覽器的關閉

其實平時普通的使用時沒什麼問題的，但是給某些指定快取加上特定的時效性，是非常重要的！比如某一天：

  • 後端：”兄弟，你一登入我就把token給你“
  • 前端：”好呀，那你應該會順便判斷token過期沒吧？“
  • 後端：”不行哦，放在你前端判斷過期唄“
  • 前端：”行吧。。。。。“

那這時候，因為需要在前端判斷過期，所以我們們就得給 token 設定一個時效性，或者是 1天 ，或者是 7天

截圖2021-11-10 下午10.48.50.png

3、隱祕性

其實這個好理解，你們想想，當我們們把我們們想快取的東西，存在 localStorage、sessionStorage 中，在開發過程中，確實有利於我們們的開發，我們們想看的時候也是一目瞭然，點選 Application 就可以看到。

但是，一旦產品上線了，使用者也是可以看到快取中的東西的，而我們們肯定是會想：有些東西可以讓使用者看到，但是有些東西我不想讓你看到

截圖2021-11-10 下午11.02.24.png

或者我們們在做 狀態管理持久化 時，需要把資料先存在 localStorage 中，這個時候就很有必要對快取進行加密了。

解決方案

1、命名規範

我個人的看法是 專案名 + 當前環境 + 專案版本 + 快取key ，如果大家有其他規則的，可以評論區告訴林三心，讓林三心學學

截圖2021-11-11 下午9.12.32.png

2、expire定時

思路：設定快取 key 時，將 value 包裝成一個物件，物件中有相應的 時效時段 ，當下一次想獲取快取值時，判斷有無超時，不超時就獲取 value ，超時就刪除這個快取

截圖2021-11-11 下午9.33.00.png

3、crypto加密

加密很簡單，直接使用 crypto-js 進行對資料的加密，使用這個庫裡的 encrypt、decrypyt 進行 加密、解密

截圖2021-11-11 下午9.43.16.png

實踐

其實實踐的話比較簡單啦，無非就是四步

  • 1、與團隊商討一下 key 的格式
  • 2、與團隊商討一下 expire 的長短
  • 3、與團隊商討一下使用哪個庫來對快取進行加密（個人建議 crypto-js ）
  • 4、程式碼實施（不難，我這裡就不寫了）

結語

有人可能覺得沒必要，但是嚴格要求自己其實是很有必要的，平時嚴格要求自己，才能做到每到一個公司都能更好的做到向下相容難度。

如果你覺得此文對你有一丁點幫助，點個贊，鼓勵一下林三心哈哈。

**如果你想一起學習前端或者摸魚，那你可以加我，加入我的摸魚學習群

image.png

相關文章