What's a good idea for uniapp page caching?

dr_heqing 注册会员
2023-02-28 13:39

the reference answer GPT ᴼ ᴾ ᴱ ᴺ ᴬ ᴵ < br / > in Uniapp there are many kinds of ways for cached page, here are some might be useful methods:

  1. Using the uni-simple-router plug-in
    uni-simple-router is a lightweight routing plug-in that provides page caching capabilities. Through this plug-in, you can set the page to be cached in the route configuration. After the page is cached, when it is switched to another page and returned, the page will not be reloaded, but read from the cache. To use this plug-in, you need to install and configure it first.

  2. Use vuex for state management
    In Vue.js, Vuex is a state management library that can be used to globally manage the state of an application. Data that needs to be cached can be stored in Vuex and read from Vuex when pages are switched, thus avoiding page reloading problems. Of course, you need to consider the size of the data stored in Vuex and the impact on performance.

  3. Local storage using localStorage
    localStorage is the local storage API provided by the browser. Data can be stored in the browser, and data can be read from localStorage when the application is opened next time. You can serialize the data that needs to be cached and store it in localStorage, and then deserialize the data when you open the application next time. However, the storage capacity of localStorage is limited. If the data stored in Localstorage is too large, performance may be affected.

  4. Using sessionStorage for session storage
    sessionStorage is similar to localStorage, the difference is that the storage time of sessionStorage is the session duration, that is, when the user closes the browser window or TAB, The data will be erased. Therefore, data that needs to be cached can be stored in sessionStorage and read from the sessionStorage when users switch pages. Note, however, that when the user closes the browser window or TAB, the data will be erased.

All in all, the above are several common methods of caching pages, you can choose your own method according to the actual situation.

stvotvcctv 注册会员
2023-02-28 13:39

The following answers are quoted from GPT-3 model, please use them wisely:



// data.js
export default {
  data: {
    pageState: '', // 保存页面状态
    pageData: {} // 保存页面数据

// 页面A
import data from './data.js'

  data: {
    pageState: data.pageState,
    pageData: data.pageData
  onShow() {
    if (data.pageState) {
      // 如果有数据,就直接从data.js中拿出来
    } else {
      // 否则,就去请求接口拿数据

2. In addition, about uni-app page caching, the official also provides some apis, such as encapsulation uni.setStorageSync() method, which is used to cache page status or other data to the local, and then access the data directly from the local, so as to save network overhead. Specific usage can refer to the website document: < br / > < a href = "https://uniapp.dcloud.io/ap" target = "_blank" > < span > https://uniapp.dcloud.io/ap < / span > < / a >

About the Author

Question Info

Publish Time
2023-02-28 13:38
Update Time
2023-02-28 13:38

Related Question

Fortify漏洞:Access Control: Database修复



无法控制。net 6 WinForms应用程序的MSIX更新

aes加密 base格式,解密时报错Malformed UTF-8 data





winform 菜单栏可以调整高度吗?