微信小程序之數(shù)據(jù)緩存的實例詳解
更新時間：2017年09月29日 11:45:21 作者：king-w
這篇文章主要介紹了微信小程序之數(shù)據(jù)緩存的實例詳解的相關資料,希望通過本文能幫助到大家，讓大家掌握這部分內(nèi)容，需要的朋友可以參考下
微信小程序之數(shù)據(jù)緩存的實例詳解
前言：
在H5之前，緩存一般都是用cookie，但是cookie的存儲空間太小。于是，H5增加了新的緩存機制，即localstorage 和 sessionstorage，具體的介紹就不在多說。在微信小程序中，數(shù)據(jù)緩存其實就和localstorage 的原理差不多，所以理解起來并不難。下面我們來一起實現(xiàn)一下。
效果圖展示：
我們在index頁面存入數(shù)字11，然后在跳轉到新頁面，在將緩存中的11取出渲染到當前頁面。具體代碼如下：
index頁面：
<span style="font-size:24px;"> <view class="btn-area"> <navigator url="../navigator/navigator?title=我是navi">跳轉到新的頁面post情求</navigator> <navigator url="../redirect/redirect?title=我是red" redirect>跳轉到當前頁面</navigator> </view> </span> <view> <input style="border:2rpx solid red" placeholder="輸入信息" bindinput="getInput" /> <button style="border:2rpx solid yellow" 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>從存儲中得到的數(shù)據(jù):{{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
})
}
})
}
})
如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
這篇文章主要介紹了layui.js實現(xiàn)的表單驗證功能,結合實例形式分析了基于layui.js的事件監(jiān)聽、驗證、判定等相關操作技巧,需要的朋友可以參考下2017-11-11
二分查找在我們學習算法中是很重要的一部分，而且面試的時候會經(jīng)常的讓我們手寫一些算法。所以這篇文章將通過三個場景帶大家深入了解二分查找算法2023-03-03
JavaScript實現(xiàn)仿windows文件名稱排序
在JavaScript中,數(shù)組排序是一個常見的操作,本文將通過一個具體的代碼示例,解釋如何實現(xiàn)一個仿windows文件名稱的排序算法,需要的可以參考下2024-12-12
今天小編就為大家分享一篇layui 彈出層值回傳解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了微信小程序 下拉列表的實現(xiàn)實例代碼的相關資料,需要的朋友可以參考下2017-03-03
左側是表頭的JS表格大家有木有遇到過呀，實在是沒有發(fā)現(xiàn)，于是自己動手豐衣足食，特獻上實現(xiàn)代碼與大家共享，有類似需求的朋友可以參考下哈2013-06-06
css靜態(tài)濾鏡 + A:Hover 效果...2007-05-05
Javascript做面向對象開發(fā)的時候，總是會用到很多模擬面向對象特性的方法，這些方法就構成了支撐面向對象Javascript的核心代碼2012-05-05
使用TextRange獲取輸入框中光標的位置的代碼...2007-03-03
這篇文章介紹了ExtJS實現(xiàn)文件下載的方法實例，有需要的朋友可以參考一下2013-11-11