vue的快取有幾種實作方式

vue快取資料有4種方式：1、利用localStorage，語法「localStorage.setItem(key,value)」；2、利用sessionStorage，語法「sessionStorage.setItem(key,value)」；3、安裝並引用storage.js插件，利用該插件進行快取；4、利用vuex，它是一個專為Vue.js應用程式開發的狀態管理模式。

本教學操作環境：windows7系統、vue3版，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 global
#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.js教學###》】###

以上是vue的快取有幾種實作方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！