React.JS詳細分析token存儲以及提取的方法,其中涉及技術(localStorage、react-cookies、immutable、JSON)

React.JS 中關於localStorage與React Cookies的Immutable映射和JSON解析關系

---

前言由於網上相關知識的文章較少，所以就自己深入分析，把總結的經驗分享出來，希望正在學習的小伙伴們，能夠走少彎路。

• 核心庫內容點： localStorage、react-cookies、immutable、json
• 技術涉及： JavaScript-框架(React)
• 環境：Ubuntu20.4ST
• 測試環境准備：

yarn add react-cookies --dev
yarn add immutable --dev

測試代碼:

import cookie from 'react-cookies' // 導入對應庫
import immutable from 'immutable'

const getStorage = (token)=>{
  const json = {expire: token, data:{...token}} // 准備內容
  window.localStorage.setItem(token, JSON.stringify(json)) // 本地存儲數據，
  cookie.save(token, json) // 臨時存儲數據
  const storage = immutable.fromJS(localStorage.getItem(token)) // 提取數據並轉對象
  const r_cookie = immutable.fromJS(cookie.load(token))
  console.log('storage::',storage)
  console.log('storage JSON stringify:', JSON.stringify(storage))
  console.log('storage JSON parse(...):', JSON.parse(storage))
  //console.log('storage immutable.toJS():', storage.toJS()) //為什么要注釋？ 因為會報錯，為什么要貼上來，為了分析錯誤！
  //console.log('storage immutable.getIn[]:', storage.getIn(['expire']))
  //console.log('storage immutable.get()', storage.get('expire'))
  console.log('r_cookie::',r_cookie)
  console.log('r_cookie JSON stringify:', JSON.stringify(r_cookie))
  console.log('r_cookie JSON parse(...):', JSON.parse(JSON.stringify(r_cookie)))
  console.log('r_cookie immutable.toJS():', r_cookie.toJS())
  console.log('r_cookie immutable.getIn[]:', r_cookie.getIn(['expire']))
  console.log('r_cookie immutable.get()', r_cookie.get('expire'))
  localStorage.clear() // 清理所有數據
  localStorage.removeItem(token) // 清理指定數據
  cookie.remove(token) // 清理指定數據
  console.log('get:',localStorage.getItem(token),cookie.load(token))
}

我想要的結果就是拿到存儲的數據的對象！！！！storage可以看到直接拿到immutable.fromJS()或JSON.stringify(...fromJS)結果都是字符串並不是想要的. 

我們storage的存儲方式如果是對象必須先轉字符串，所以用JSON.stringify轉化后，才能正常提取。否則結果就會丟失數據呈現[object]!!!   也就是說無法存儲對象，

結果得用JSON.parse(JSON.stringify(strongage)) 深度解析字符串，但很多人都叫做深拷貝，但是無論從英文字面翻譯或者實際過程都有差距！

 那為什么要這個immutable? 因為深度解析非常消耗性能，會給計算機帶來高負荷，所以我們要用新的方法去替代！！！下圖可以解釋immutable的優勢

 如果storage無法存儲對象，那如何調用immutable?可以先深解析后再通過immutable轉換：

immutable.fromJS(JSON.parse(storage)) 這樣我們就可以拿到一個immutable處理的好的數據了代碼如下

  const json = {expire: token, data:{...token}} // 准備內容
  window.localStorage.setItem(token, JSON.stringify(json)) // 本地存儲數據，
  const storage = immutable.fromJS(JSON.parse(window.localStorage.getItem(token))) // 提取數據並轉對象
  console.log('storage immutable.toJS():', storage.toJS()) //為什么要注釋？ 因為會報錯，為什么要貼上來，為了分析錯誤！
  console.log('storage immutable.getIn[]:', storage.getIn(['expire']))
  console.log('storage immutable.get()', storage.get('expire'))

 

 這樣也就可以與react-cookies結果一樣，我們可以在瀏覽器中看到實際存儲的token

 這樣基本存儲token方法也就掌握了，但是怎么對比二者？目前我們知道localStorage與cookie區別一個永久存儲一個臨時存儲！

根據上圖我們知道storage只能存儲字符串，如果存儲對象則會報錯！

而cookie能把數據存儲在緩存中，而且會自動添加path與域名。

由此我們可以把數據分類，建議存儲一些重要長期的數據放在storage中，而一些頻繁讀取的數據則放在cookie里！！

 

---

我是玫瑰與屠夫

日期：2021/6/14