微信小程序中如何实现离线缓存？

随着微信小程序的普及，越来越多的企业和开发者挑选在微信小程序中公布自己的产品。离线内存对于小程序来说就是非常关键的，不但可以提高用户体验，也能够减少服务器压力。本文将了解微信小程序中如何同时实现离线内存，包含以下问题：

1. 什么就是离线内存？

2. 为什么须要离线内存？

3. 如何同时实现离线内存？

1. 什么就是离线内存？

离线内存就是所指在用户设备上缓存数据以便用户在没网络连接的情况下也能够采用应用程序。在微信小程序中，可以内存应用程序的 HTML、CSS 和 JavaScript 文件，在离线状态时采用。

2. 为什么须要离线内存？

在实际应用领域中，用户不一定总是处在相连接网络的状态。当用户处在没网络的状态时，应用程序无法获取数据，这就可以给用户增添不当体验和负面影响。对于小程序来说，离线内存可以提高用户体验，并增加服务器压力，因为当用户采用小程序的时候，部分数据已经内存在本地，小程序就无须频密地命令服务器获取数据，增加服务器压力，提升系统的性能和稳定性。

3. 如何同时实现离线内存？

同时实现离线内存的方法存有很多种，下面了解几种常用的方法。

3.1 采用微信小程序自带的离线机制

微信小程序提供更多了一种离线机制，采用这种机制可以将小程序的部分数据内存至用户设备中。当微信小程序处在在线状态时，可以命令服务器获取数据，将数据留存至本地，当下次步入小程序时，就可以从本地以获取已内存过的数据，提升读取速度。

采用微信小程序自带的离线机制，须要在小程序的配置文件app.json中展开布局。只须要在app.json文件中减少window属性即可，如下右图：

```

{

"window": {

"backgroundTextStyle": "dark",

"navigationBarBackgroundColor": "#f5f5f5",

"navigationBarTitleText": "微信小程序",

"navigationBarTextStyle": "black",

"enablePullDownRefresh": true,

"pageOrientation": "portrait",

"networkTimeout": {

"request": 5000,

"downloadFile": 10000

},

"disableScroll": true,

"onReachBottomDistance": 50,

"usingComponents": {}

}

}

```

其中，networkTimeout用作设置小程序内的网络超时时间，单位为毫秒。如果在规定的时间内没以获取至服务器的数据，超时后将自动中止查阅操作方式。

除了在app.json中展开布局，还须要在小程序中采用wx.startPullDownRefresh方法打开下拉创下功能，wx.stopPullDownRefresh方法暂停下拉创下功能。在下拉创下时，可以实时更新本地内存中的数据，提升数据的实时性和质量。

须要特别注意的就是，采用微信小程序自带的离线机制就可以内存大的静态数据，如HTML、CSS和JavaScript等，无法内存小的动态数据。因此，在实际研发中，须要融合其他技术手段同时实现完备的离线内存。

3.2 采用LocalStorage

LocalStorage就是HTML5中提供更多的一种能力，可以将数据留存至本地中，在下次步入小程序时可以从本地以获取已留存的数据。LocalStorage与Cookies、SessionStorage等有所不同，它可以存储更大的数据（通常积极支持5MB），并且数据不能随着命令发送到服务器，只在本地存储。在离线状态下，可以从LocalStorage中以获取内存的数据，提升用户采用小程序时的读取速度。

在微信小程序中采用LocalStorage可以采用wx.setStorageSync和wx.getStorageSync方法，分别用作设置和以获取本地缓存数据。以下就是示例代码：

```

// 存储数据至LocalStorage

wx.setStorageSync('key', 'value');

// 从LocalStorage中获取数据

wx.getStorageSync('key');

```

须要特别注意的就是，LocalStorage只积极支持存储字符串类型的数据，如果须要留存其他类型的数据，须要展开切换。另外，在某些情况下，LocalStorage存储数据时会受系统设置的影响，如IOS系统中当设备存储空间严重不足时，LocalStorage中的数据可能会被自动清扫掉。

3.3 采用IndexDB

IndexDB就是HTML5中提供更多的一种客户端数据存储API，它可以存储比LocalStorage更大的数据，并且积极支持更繁杂的数据结构，例如键值对、关系型数据等等。采用IndexDB可以将数据内存出来，提升应用程序的读取速度和数据出访效率。

在微信小程序中采用IndexDB须要采用wx.request方法以获取服务器数据，并采用wx.request的success反弹中将数据内存至IndexDB中。以下就是示例代码：

```

// 定义关上IndexDB的方法

var openDB = function() {

var req = indexedDB.open('mydb', 1);

req.onsuccess = function(e) {

db = e.target.result;

};

req.onerror = function(e) {

console.log('error opening db');

};

req.onupgradeneeded = function(e) {

var db = e.target.result;

db.createObjectStore('mystore');

};

}

// 采用wx.request以获取服务器数据，将数据留存至IndexDB中

wx.request({

url: 'http://example.com/data.json',

success: function(res) {

if (res && res.data) {

var data = res.data;

var tx = db.transaction('mystore', 'readwrite');

var store = tx.objectStore('mystore');

store.put({id:1, data:data});

}

}

});

```

须要特别注意的就是，采用IndexDB在存储和查阅数据时须要展开事务操作方式（即IndexDB中的transaction），否则可能会引致数据冲突和错误。同时，IndexDB在采用前须要先关上数据库，可以采用indexedDB.open方法关上数据库，也可以采用第三方库来PCBIndexedDB操作方式。

3.4 融合微信小程序自带离线机制、LocalStorage和IndexDB

综合采用以上三种方法可以同时实现一个完备的离线内存方案。在采用微信小程序自带的离线机制内存静态数据的同时，采用LocalStorage内存基本数据例如用户名、用户信息等数据，采用IndexDB内存小的部分数据例如图片、视频等资源，提升应用程序的读取速度和数据出访效率，同时进一步增强系统的稳定性和性能。

须要特别注意的就是，采用离线内存方案时须要考量数据内存的时间和空间，以免数据过期或挤占过多的设备存储空间。同时，须要根据实际业务市场需求调整内存的数据和数据类型，以获得最佳性能和用户体验。

总结

离线内存就是小程序开发中非常关键的一部分，能提升用户体验，增加服务器压力，同时进一步增强系统的稳定性和性能。在同时实现离线内存时，可以采用微信小程序自带的离线机制、LocalStorage、IndexDB等技术手段，综合采用相同的方案可以获得最佳性能和用户体验。须要特别注意的就是，在实际应用领域中须要融合业务市场需求和设备性能等因素展开挑选和调整，以达至最优的效果。