微信小程序之数据缓存的实例详解

微信小程序之数据缓存的实例详解

10多年的卢龙网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同，自动调整卢龙建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联公司从事“卢龙网站设计”,“卢龙网站推广”以来，每个客户项目都认真落实执行。

前言：

在H5之前，缓存一般都是用cookie，但是cookie的存储空间太小。于是，H5增加了新的缓存机制，即localstorage 和 sessionstorage，具体的介绍就不在多说。在微信小程序中，数据缓存其实就和localstorage 的原理差不多，所以理解起来并不难。下面我们来一起实现一下。

效果图展示：

微信小程序之数据缓存的实例详解

我们在index页面存入数字11，然后在跳转到新页面，在将缓存中的11取出渲染到当前页面。具体代码如下：

index页面：

<span >
<view class="btn-area">
 <navigator url="../navigator/navigator?title=我是navi">跳转到新的页面post情求</navigator>
 <navigator url="../redirect/redirect?title=我是red" redirect>跳转到当前页面</navigator>
</view>
</span>
<view>
 <input  placeholder="输入信息" bindinput="getInput" />
 <button  bindtap="saveInput">存入</button>
</view>

index的js：

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
  storage:''
 },
 onLoad: function () {
  var that = this

 //获取输入值
 getInput:function(e){
  this.setData({
   storage:e.detail.value
  })
 },
 //存储输入值
 saveInput:function(){
  wx.setStorageSync('storage', this.data.storage)
 }

})

跳转页面：

<view>从存储中得到的数据:{{storage}}</view>

跳转页面的js：

var app = getApp();
var that; 
Page( { 
 data: {  
  storage:''
 }, 
 onLoad: function(options) { 
  that = this; 
  //获取存储信息
  wx.getStorage({
   key: 'storage',
   success: function(res){
    // success
    that.setData({
     storage:res.data
    })
   }
  })
 }

})

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

文章标题：微信小程序之数据缓存的实例详解
当前网址：https://www.cdcxhl.com/article36/pjecsg.html

成都网站建设公司_创新互联，为您提供搜索引擎优化、网站排名、用户体验、关键词优化、响应式网站、网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容