微信小程序在使用页面栈保存页面信息时避免数据丢失的方法：

一、使用全局变量存储关键数据：

1. 定义一个全局变量，例如在 app.js 中，用于存储页面的重要信息。
2. 在页面的 onHide 或 onUnload 生命周期中，将需要保存的数据存储到该全局变量。
3. 在页面的 onShow 生命周期中，从全局变量中读取数据并恢复页面状态。

二、使用本地存储（Local Storage）：

1. 在页面的 onHide 或 onUnload 生命周期中，使用 wx.setStorageSync 或 wx.setStorage 将重要数据存储到本地存储。
2. 在页面的 onShow 生命周期中，使用 wx.getStorageSync 或 wx.getStorage 从本地存储中读取数据并恢复页面状态。

三、使用页面栈的 data 属性进行临时存储：

1. 在页面的 onHide 或 onUnload 生命周期中，将重要数据存储到页面栈的 data 属性中。
2. 在页面的 onShow 生命周期中，从页面栈的 data 属性中读取数据并恢复页面状态。

以下是具体的实现示例：

一、使用全局变量存储关键数据：

app.js：

App({globalData: {pageData: {}}
});

页面的 js 文件：

const app = getApp();Page({data: {list: [],inputValue: ''},onLoad: function() {// 模拟生成一些列表数据let tempList = [];for (let i = 0; i < 100; i++) {tempList.push(`Item ${i}`);}this.setData({list: tempList});},onHide: function() {// 存储数据到全局变量let pages = getCurrentPages();let currentPage = pages[pages.length - 1];app.globalData.pageData[currentPage.route] = {inputValue: this.data.inputValue,list: this.data.list};},onShow: function() {// 从全局变量中读取数据let pageData = app.globalData.pageData[this.route];if (pageData) {this.setData({inputValue: pageData.inputValue,list: pageData.list});}},onInput: function(event) {this.setData({inputValue: event.detail.value});}
});

代码解释：

• app.js：
  • 定义了一个 globalData 对象，其中 pageData 用于存储各个页面的数据。
• 页面的 js 文件：
  • onLoad：模拟生成列表数据并更新到 data 中。
  • onHide：将当前页面的输入框值 inputValue 和列表数据 list 存储到 app.js 的全局变量中，使用 currentPage.route 作为存储的键，确保每个页面的数据存储在不同的位置。
  • onShow：从 app.js 的全局变量中根据当前页面的路由读取数据，并更新到当前页面的 data 中。
  • onInput：更新输入框的值到 data 中。

二、使用本地存储（Local Storage）：

页面的 js 文件：

Page({data: {list: [],inputValue: ''},onLoad: function() {// 模拟生成一些列表数据let tempList = [];for (let i = 0; i < 100; i++) {tempList.push(`Item ${i}`);}this.setData({list: tempList});},onHide: function() {// 存储数据到本地存储wx.setStorageSync(this.route, {inputValue: this.data.inputValue,list: this.data.list});},onShow: function() {// 从本地存储中读取数据let pageData = wx.getStorageSync(this.route);if (pageData) {this.setData({inputValue: pageData.inputValue,list: pageData.list});}},onInput: function(event) {this.setData({inputValue: event.detail.value});}
});

代码解释：

• onLoad：模拟生成列表数据并更新到 data 中。
• onHide：使用 wx.setStorageSync 将当前页面的输入框值 inputValue 和列表数据 list 存储到本地存储，以当前页面的路由作为存储的键。
• onShow：使用 wx.getStorageSync 从本地存储中根据当前页面的路由读取数据，并更新到当前页面的 data 中。
• onInput：更新输入框的值到 data 中。

三、使用页面栈的 data 属性进行临时存储：

页面的 js 文件：

Page({data: {list: [],inputValue: ''},onLoad: function() {// 模拟生成一些列表数据let tempList = [];for (let i = 0; i < 100; i++) {tempList.push(`Item ${i}`);}this.setData({list: tempList});},onHide: function() {// 存储数据到页面栈的 data 属性let pages = getCurrentPages();let currentPage = pages[pages.length - 1];currentPage.data.savedData = {inputValue: this.data.inputValue,list: this.data.list};},onShow: function() {// 从页面栈的 data 属性中读取数据let pages = getCurrentPages();let currentPage = pages[pages.length - 1];let savedData = currentPage.data.savedData;if (savedData) {this.setData({inputValue: savedData.inputValue,list: savedData.list});}},onInput: function(event) {this.setData({inputValue: event.detail.value});}
});

代码解释：

• onLoad：模拟生成列表数据并更新到 data 中。
• onHide：将当前页面的输入框值 inputValue 和列表数据 list 存储到页面栈当前页的 data 属性中的 savedData 对象中。
• onShow：从页面栈当前页的 data 属性中读取 savedData，并更新到当前页面的 data 中。
• onInput：更新输入框的值到 data 中。

注意事项：

• 全局变量方法：
  • 适合存储一些全局通用的数据，但如果存储的数据过多，可能会占用较多内存，并且在小程序关闭后数据会丢失。
  • 对于一些轻量级的数据和状态，这种方式较为方便。
• 本地存储方法：
  • 数据存储在本地，即使小程序关闭后也能保存，但存储的数据大小有限制（一般不超过 10MB）。
  • 适合存储需要长期保存的数据，但读取和写入速度相对较慢。
• 页面栈 data 属性方法：
  • 适合临时存储，仅在页面栈存在时有效，小程序关闭后会丢失数据。
  • 适合存储页面切换时的临时状态数据。

你可以根据不同的需求选择合适的存储方式，以确保在使用页面栈保存页面信息时避免数据丢失。同时，在存储和读取数据时要注意数据的结构和键的设置，确保数据的一致性和准确性。