vue的緩存實現方式有哪些

這篇文章主要講解了“vue的緩存實現方式有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue的緩存實現方式有哪些”吧！

vue實現緩存有4種方式：1、利用localStorage；2、利用sessionStorage；3、安裝并引用storage.js插件；4、利用vuex，它是一個專為Vue.js應用程序開發的狀態管理模式

本教程操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

vu中實現緩存的幾種方式：

前兩種

* localStorage

  window.localStorage.setItem(key,value)
  window.localStorage.getItem(key)

* sessionStorage

 window.sessionStorage.setItem(key,value)
  window.sessionStorage.getItem(key)

localStorage和sessionStorage區別

https://blog.csdn.net/qq_31741481/article/details/88054069

第三種（推薦）- storage.js

使用方式：

import storage from 'store'
// Store current user
store.set('user', { name:'Marcus' })

// Get current user
store.get('user')

// Remove current user
store.remove('user')

// Clear all keys
store.clearAll()

// Loop over all stored values
store.each(function(value, key) {
	console.log(key, '==', value)
})

測試得出，默認存儲在localStorage中

store.js包含了各種存儲的解決方案，比如在某些localStorage失效的場景中，可以使用cookieStorage.js。掌握它，基本可以一網打盡緩存解決方案。

• all.js All the storages in one handy place.

• localStorage.js Store values in localStorage. Great for all modern browsers.

• sessionStorage.js Store values in sessionStorage.

• cookieStorage.js Store values in cookies. Useful for Safari Private mode.

• memoryStorage.js Store values in memory. Great fallback to ensure store functionality at all times.

• oldFF-globalStorage.js Store values in globalStorage. Only useful for legacy Firefox 3+.

• oldIE-userDataStorage.js Store values in userData. Only useful for legacy IE 6+.

更多介紹參考官方：store.js（https://github.com/marcuswestin/store.js#readme）

第四種 - vuex

適用構建較為復雜的vue單頁應用。

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

感謝各位的閱讀，以上就是“vue的緩存實現方式有哪些”的內容了，經過本文的學習后，相信大家對vue的緩存實現方式有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！