There are several ways to implement vue's cache

Vue has 4 ways to cache data: 1. Using localStorage, the syntax "localStorage.setItem(key, value)"; 2. Using sessionStorage, the syntax "sessionStorage.setItem(key, value)"; 3. Install and reference the storage.js plug-in, and use the plug-in for caching; 4. Use vuex, which is a state management mode specially developed for Vue.js applications.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

Several ways to implement caching in vu:

The first two

* localStorage

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

* sessionStorage

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

The difference between localStorage and sessionStorage

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

Third method (recommended) - storage.js

Usage method:

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)
})

Tested, the default is stored in localStorage

store.js contains Various storage solutions have been provided. For example, in some scenarios where localStorage fails, cookieStorage.js can be used. Master it and you can basically catch all caching solutions in one go.

• 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 .

For more introduction, please refer to the official ：store.js（https://github.com/marcuswestin/store.js#readme）

The fourth type - vuex

is suitable for building more complex vue single-page applications.

Vuex is a state management pattern developed specifically for Vue.js applications. It uses centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable way. Vuex is also integrated into Vue’s official debugging tool devtools extension, which provides advanced debugging functions such as zero-configuration time-travel debugging, status snapshot import and export, etc.

[Related recommendations: "

vue.js Tutorial"]

The above is the detailed content of There are several ways to implement vue's cache. For more information, please follow other related articles on the PHP Chinese website!