日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告:魔扣目錄網(wǎng)為廣大站長(zhǎng)提供免費(fèi)收錄網(wǎng)站服務(wù),提交前請(qǐng)做好本站友鏈:【 網(wǎng)站目錄:http://www.ylptlb.cn 】, 免友鏈快審服務(wù)(50元/站),

點(diǎn)擊這里在線咨詢客服
新站提交
  • 網(wǎng)站:52000
  • 待審:37
  • 小程序:12
  • 文章:1037587
  • 會(huì)員:756

當(dāng)咱們把咱們想緩存的東西,存在localStorage、sessionStorage中,在開發(fā)過程中,確實(shí)有利于咱們的開發(fā),咱們想看的時(shí)候也是一目了然,點(diǎn)擊Application就可以看到。

前言

大家好,我是林三心,用最通俗的話,講最難的知識(shí)點(diǎn)是我的座右銘,基礎(chǔ)是進(jìn)階的前提是我的初心,今天就給大家嘮一下嗑,講一下,怎么樣使用localStorage、sessionStorage,才能更規(guī)范,更高大上,更能讓人眼前一亮。

用處

在平時(shí)的開發(fā)中,localStorage、sessionStorage的用途是非常的多的,在我們的開發(fā)中發(fā)揮著非常重要的作用:

1、登錄完成后token的存儲(chǔ)

2、用戶部分信息的存儲(chǔ),比如昵稱、頭像、簡(jiǎn)介

3、一些項(xiàng)目通用參數(shù)的存儲(chǔ),例如某個(gè)id、某個(gè)參數(shù)params

4、項(xiàng)目狀態(tài)管理的持久化,例如vuex的持久化、redux的持久化

5、項(xiàng)目整體的切換狀態(tài)存儲(chǔ),例如主題顏色、icon風(fēng)格、語言標(biāo)識(shí)

6、等等、、、、、、、、、、、、、、、、、、、、、、、、、、

普通使用

那么,相信我們各位平時(shí)使用都是這樣的(拿localStorage舉例)

1、基礎(chǔ)變量

// 當(dāng)我們存基本變量時(shí)
localStorage.setItem('基本變量', '這是一個(gè)基本變量')
// 當(dāng)我們?nèi)≈禃r(shí)
localStorage.getItem('基本變量')
// 當(dāng)我們刪除時(shí)
localStorage.removeItem('基本變量')

2、引用變量

// 當(dāng)我們存引用變量時(shí)
localStorage.setItem('引用變量', JSON.stringify(data))
// 當(dāng)我們?nèi)≈禃r(shí)
const data = JSON.parse(localStorage.getItem('引用變量'))
// 當(dāng)我們刪除時(shí)
localStorage.removeItem('引用變量')

3、清空

localStorage.clear()

暴露出什么問題?

1、命名過于簡(jiǎn)單

  • 比如我們存用戶信息會(huì)使用user作為 key 來存儲(chǔ)
  • 存儲(chǔ)主題的時(shí)候用theme 作為 key 來存儲(chǔ)
  • 存儲(chǔ)令牌時(shí)使用token作為 key 來存儲(chǔ) 其實(shí)這是很有問題的,咱們都知道,同源的兩個(gè)項(xiàng)目,它們的localStorage是互通的。

我舉個(gè)例子吧比如我現(xiàn)在有兩個(gè)項(xiàng)目,它們?cè)谕磆ttps://www.sunshine.com下,這兩個(gè)項(xiàng)目都需要往localStorage中存儲(chǔ)一個(gè) key 為name的值,那么這就會(huì)造成兩個(gè)項(xiàng)目的name互相頂替的現(xiàn)象,也就是互相污染現(xiàn)象:

圖片圖片

2、時(shí)效性

咱們都知道localStorage、sessionStorage這兩個(gè)的生命周期分別是

  • localStorage:除非手動(dòng)清除,否則一直存在
  • sessionStorage:生命結(jié)束于當(dāng)前標(biāo)簽頁的關(guān)閉或?yàn)g覽器的關(guān)閉

其實(shí)平時(shí)普通的使用時(shí)沒什么問題的,但是給某些指定緩存加上特定的時(shí)效性,是非常重要的!比如某一天:

  • 后端:”兄弟,你一登錄我就把token給你“
  • 前端:”好呀,那你應(yīng)該會(huì)順便判斷token過期沒吧?“
  • 后端:”不行哦,放在你前端判斷過期唄“
  • 前端:”行吧。。。。。“

那這時(shí)候,因?yàn)樾枰谇岸伺袛噙^期,所以咱們就得給token設(shè)置一個(gè)時(shí)效性,或者是1天,或者是7天

圖片圖片

3、隱秘性

其實(shí)這個(gè)好理解,你們想想,當(dāng)咱們把咱們想緩存的東西,存在localStorage、sessionStorage中,在開發(fā)過程中,確實(shí)有利于咱們的開發(fā),咱們想看的時(shí)候也是一目了然,點(diǎn)擊Application就可以看到。

但是,一旦產(chǎn)品上線了,用戶也是可以看到緩存中的東西的,而咱們肯定是會(huì)想:有些東西可以讓用戶看到,但是有些東西我不想讓你看到

圖片圖片

或者咱們?cè)谧鰻顟B(tài)管理持久化時(shí),需要把數(shù)據(jù)先存在localStorage中,這個(gè)時(shí)候就很有必要對(duì)緩存進(jìn)行加密了。

解決方案

1、命名規(guī)范

我個(gè)人的看法是項(xiàng)目名 + 當(dāng)前環(huán)境 + 項(xiàng)目版本 + 緩存key,如果大家有其他規(guī)則的,可以評(píng)論區(qū)告訴林三心,讓林三心學(xué)學(xué)

圖片圖片

2、expire定時(shí)

思路:設(shè)置緩存key時(shí),將value包裝成一個(gè)對(duì)象,對(duì)象中有相應(yīng)的時(shí)效時(shí)段,當(dāng)下一次想獲取緩存值時(shí),判斷有無超時(shí),不超時(shí)就獲取value,超時(shí)就刪除這個(gè)緩存

圖片圖片

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

3、crypto加密

加密很簡(jiǎn)單,直接使用crypto-js進(jìn)行對(duì)數(shù)據(jù)的加密,使用這個(gè)庫里的encrypt、decrypyt進(jìn)行加密、解密

圖片圖片

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

實(shí)踐

其實(shí)實(shí)踐的話比較簡(jiǎn)單啦,無非就是四步

  • 與團(tuán)隊(duì)商討一下key的格式
  • 與團(tuán)隊(duì)商討一下expire的長(zhǎng)短
  • 與團(tuán)隊(duì)商討一下使用哪個(gè)庫來對(duì)緩存進(jìn)行加密(個(gè)人建議crypto-js)
  • 代碼實(shí)施(不難,我這里就不寫了)

結(jié)語

有人可能覺得沒必要,但是嚴(yán)格要求自己其實(shí)是很有必要的,平時(shí)嚴(yán)格要求自己,才能做到每到一個(gè)公司都能更好的做到向下兼容難度。

分享到:
標(biāo)簽:前端
用戶無頭像

網(wǎng)友整理

注冊(cè)時(shí)間:

網(wǎng)站:5 個(gè)   小程序:0 個(gè)  文章:12 篇

  • 52000

    網(wǎng)站

  • 12

    小程序

  • 1037587

    文章

  • 756

    會(huì)員

趕快注冊(cè)賬號(hào),推廣您的網(wǎng)站吧!
最新入駐小程序

數(shù)獨(dú)大挑戰(zhàn)2018-06-03

數(shù)獨(dú)一種數(shù)學(xué)游戲,玩家需要根據(jù)9

答題星2018-06-03

您可以通過答題星輕松地創(chuàng)建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學(xué)四六

運(yùn)動(dòng)步數(shù)有氧達(dá)人2018-06-03

記錄運(yùn)動(dòng)步數(shù),積累氧氣值。還可偷

每日養(yǎng)生app2018-06-03

每日養(yǎng)生,天天健康

體育訓(xùn)練成績(jī)?cè)u(píng)定2018-06-03

通用課目體育訓(xùn)練成績(jī)?cè)u(píng)定