前言
大家好，用最通俗的話，講最難的知識點是我的座右銘，基礎是進階的前提是我的初心，今天就給大家嘮一下嗑，講一下，怎麼樣使用localStorage、sessionStorage，才能更規範，更高大上，更能讓人眼前一亮。
用處
在平時的開發中，localStorage、sessionStorage的用途是非常的多的，在我們的開發中發揮著非常重要的作用：
- 1、登錄完成後token的存儲
- 2、用戶部分信息的存儲，比如暱稱、頭像、簡介
- 3、一些項目通用參數的存儲，例如某個id、某個參數params
- 4、項目狀態管理的持久化，例如vuex的持久化、redux的持久化
- 5、項目整體的切換狀態存儲，例如主題顏色、icon風格、語言標識
- 6、等等、、、、、、、、、、、、、、、、、、、、、、、、、、
小夥伴們有興趣想了解以下更多相關學習資料請點讚收藏+評論轉發+關注我之後私信我，注意回復【000】即可獲取更多免費資料！
普通使用
那麼，相信我們各位平時使用都是這樣的（拿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互相頂替的現象，也就是互相污染現象：
2、時效性
咱們都知道localStorage、sessionStorage這兩個的生命周期分別是
- localStorage：除非手動清除，否則一直存在
- sessionStorage：生命結束於當前標籤頁的關閉或瀏覽器的關閉
其實平時普通的使用時沒什麼問題的，但是給某些指定緩存加上特定的時效性，是非常重要的！比如某一天：
- 後端：」兄弟，你一登錄我就把token給你「
- 前端：」好呀，那你應該會順便判斷token過期沒吧？「
- 後端：」不行哦，放在你前端判斷過期唄「
- 前端：」行吧。。。。。「
那這時候，因為需要在前端判斷過期，所以咱們就得給token設置一個時效性，或者是1天，或者是7天
3、隱秘性
其實這個好理解，你們想想，當咱們把咱們想緩存的東西，存在localStorage、sessionStorage中，在開發過程中，確實有利於咱們的開發，咱們想看的時候也是一目了然，點擊Application就可以看到。
但是，一旦產品上線了，用戶也是可以看到緩存中的東西的，而咱們肯定是會想：有些東西可以讓用戶看到，但是有些東西我不想讓你看到
或者咱們在做狀態管理持久化時，需要把數據先存在localStorage中，這個時候就很有必要對緩存進行加密了。
解決方案
1、命名規範
我個人的看法是項目名 + 當前環境 + 項目版本 + 緩存key，如果大家有其他規則的
2、expire定時
思路：設置緩存key時，將value包裝成一個對象，對象中有相應的時效時段，當下一次想獲取緩存值時，判斷有無超時，不超時就獲取value，超時就刪除這個緩存
3、crypto加密
加密很簡單，直接使用crypto-js進行對數據的加密，使用這個庫里的encrypt、decrypyt進行加密、解密
實踐
其實實踐的話比較簡單啦，無非就是四步
- 1、與團隊商討一下key的格式
- 2、與團隊商討一下expire的長短
- 3、與團隊商討一下使用哪個庫來對緩存進行加密（個人建議crypto-js）
- 4、代碼實施（不難，我這裡就不寫了）
結語
有人可能覺得沒必要，但是嚴格要求自己其實是很有必要的，平時嚴格要求自己，才能做到每到一個公司都能更好的做到向下兼容難度。