登錄中很關鍵的一個操作就是在本地快取用戶資訊，用來驗證并記錄下用戶的登錄狀態，用來維護用戶的資訊安全，比如設定網頁訪問權限，也有些請求頭需要在authentication帶上相關資訊，以驗證用戶身份，
下面有幾種本地快取的方法，包括HTML5中的localStorage和sessionStorage 以及最常用的cookie，和vue中的vuex，
- localStorage
localStorage屬于HTML中的特性，資料以鍵/值對形式存在，localStorage可以存盤的較大的資料，并且存盤的資料沒有時間限制，直到手動洗掉，另外localStorage在瀏覽器中都以字串形式存盤，而我們又經常會存盤物件（JSON格式）的資料，所以需要轉化，
以下的方法只要寫在html的<script>標簽中就會生效哦，也就是任何框架中都適用，
localStorage.setItem(key,value) //設定localstorage
localStorage.getItem(key,value) //獲取localStorage
localStorage.removeItem(key) //獲取localStorage
JSON.stringify(string) //將物件的轉化為字串
JSON.parse(string) //將字串形式的json格式轉化為物件
如果存取出現問題，可以進開發者工具的Application追蹤一下是什么問題，
- sessionStorage
session是HTML5中web存盤的另一特性，與localStorage不同的是它的生命周期，作為會話級存盤，在關閉瀏覽器后，也就消失了，
sessionStorage.setItem(key,value) //設定Session
sessionStorage.getItem(key,value) //獲取Session
sessionStorage.removeItem(key) //獲取Session
JSON.stringify(string) //將物件的轉化為字串
JSON.parse(string) //將字串形式的json格式轉化為物件
- Cookies
cookie存盤于用戶本地的一段文本資訊，其存盤的形式也是鍵值對，存盤為字串資訊，因此原生js存取cookie操作相比以上兩種要復雜一些，不同的是cookie可以設定expires也就是過期時間，
原生cookies的使用可以參考w3school的cookie介紹
https://www.w3school.com.cn/js/js_cookies.asp
而在開發中為了使用方便，往往會引入cookies插件，比如js-cookie等，而像Jquery這種js開發框架也會自帶cookie，
//js-cookie使用
Cookies.set('name','value',{expires:1, path:"") //設定Cookies
Cookies.get('key') //獲取cookies
Cookies.remove('key') //移除cookies
Cookies.getJson('key') //Json.parse并回傳
- vuex
vuex是在vue中使用的狀態管理工具，當使用vue開發時，若用到了vuex則可以使用vuex-persistedstate來將state持久化，使state不在重繪后消失，達到本地存盤的效果，而且可以存盤為以上三種形式，使得整個狀態更方便管理，
只要在初始化vuex的時候加入組件即可，
//基礎使用
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/295458.html
標籤：其他
上一篇：appium入坑必備--萬字詳解基本操作，為不用手刷抖音打木樁
下一篇：豆瓣評分預測（如何用自己的資料集進行文本分類）——基于pytorch的 BERT中文文本分類，超詳細教程必會！！！