详解小程序设置缓存并且不覆盖原有数据


Posted in Javascript onApril 15, 2019

最近在写小程序的小项目,因为是刚上手小程序,这途中遇到了许多问题,所幸在自己的坚持不懈下基本都得到了解决,今天就记录一下怎么设置缓存数据并且不覆盖吧,如果有错误的地方麻烦大家指正,互相学习一下!

详解小程序设置缓存并且不覆盖原有数据

这是官方的关于缓存的说明,它会覆盖掉之前的内容。我还是直接上源码吧

这是writecomment.js文件

Page({
 /**
  * 页面的初始数据
  */
 data: {
 },
 submit: function (event) {
  var writecomment = event.detail.value.writecomment;
  console.log(event);
  var pages = getCurrentPages();
  /***得到页面有两个,一个是总页面,一个是写的页面,我们需要的是总页面 */
  var page = pages[2];
  var commentlist = page.data.commentlist;
//commentlist是另一个页面设置的数组,这里是取得那个页面定义的commentlist
  /***获取总页面data里面的数组 */
  if (event.detail.value.writecomment != '') {
   commentlist.push(writecomment); /***把新的内容放入数组中去,然后更新 */
   page.setData({
    commentlist: commentlist,
   })
  }
//这是缓存设置
 wx.setStorage({
  key: 'commentStorage',//key的值只是一个名称,可以自己设置
  data: commentlist,
//data指的是我们要放入缓存的数值,如果是固定的数据要用“”括起来,如果是变量就直接放变量的值
 })
  console.log(commentlist);//这是为了更好观察我自己设置的输出语句,可以不用管
  wx.navigateBack({}) /***点击完成后跳转回到上一个页面 */
 },
 
 
 onLoad: function (options) {
 },
})

接下来是writecomment.wxml文件的代码

<!--pages/comment/writecomment/writecomment.wxml-->
<view class='write-group'>
 <form bindsubmit='submit'>
  <!-- 文本输入框 -->
  <view class='textarea-position'>
   <textarea name='writecomment' placeholder='请输入内容!' maxlength='-1' auto-height="true">
   </textarea>
  </view>
  <!-- maxlength='-1'不限制输入字符长度,auto-height="true"输入框可以自动变化大小 -->
  
  <view class='btn-position'>
   <button type='primary' form-type='submit'>完成</button>
  </view>
 </form>
</view>

 还有样式文件也一起放上来吧

//这是对应的样式文件
/* pages/comment/writecomment/writecomment.wxss */
/* 最外层样式 */
.write-group{
 width: 100%;
 height: 1254rpx;
}
/* 输入框层样式 */
.textarea-group{
 padding: 10rpx;
 width: 98%;
 height: 85%;
 overflow: scroll;
}
/* 提交表格样式 */
.form{
 width: 100%;
 height: 100%;
}
textarea {
cursor:auto;
width:95%;
height:150px;
display:block;
position:relative;
padding: 10rpx;
}
 
.chooseImg{
 width:20%;
 height: 70rpx;
}
.image{
 width: 170rpx;
 height: 50rpx;
}
.image-btn-group{
 width: 200rpx;
 height: 50rpx;
 display: flex;
 justify-content: space-between;
}
.image-btn{
 width: 100rpx;
 height: 100rpx;
 display: flex;
 justify-content: space-between;
}
.text{
 font-size: 24rpx;
 height: 50rpx;
 width: 100rpx;
}
.textarea-position{
 overflow: scroll;
 height: 1050rpx;
 width: 100%;
}
.btn-position{
 display: fixed;
 margin-bottom: 5rpx;
}
.title {
 width: 100%;
 height: 96rpx;
 line-height: 96rpx;
 font-size: 28rpx;
 color: #989898;
}
.upload {
 width: 100%;
 margin-bottom: 30rpx;
              
}
.uploadImgBox {
 width: 212rpx;
 height: 144rpx;
 margin-right: 33rpx;
 margin-bottom: 10rpx;
 position: relative;
 background: #fff;
}
.uploadImgBox:nth-child(3n) {
 margin-right: 0;
}
.uploadPhoto {
 width: 212rpx;
 height: 144rpx;
}
.closeImg {
 width: 30rpx;
 height: 30rpx;
 border-radius: 50%;
 position: absolute;
 right: 5rpx;
 top: 5rpx;
}
 
.service {
 width: 100%;
 height: 208rpx;
 border-top: 1rpx solid #ece9e9;
 border-bottom: 1rpx solid #ece9e9;
 line-height: 30rpx;
 font-size: 26rpx;
 padding-top: 20rpx;
}
.service textarea {
 width: 100%;
 height: 100%;
}

接下来是另一个页面,里面有获取缓存的说明

// pages/comment/commentlist/commentlist.js
Page({
 /**
  * 页面的初始数据
  */
 data: {
  commentlist: [],//设置缓存的那个数组在这里定义的
 },
 writecomment: function (event) {
  wx.navigateTo({
   url: '/pages/comment/writecomment/writecomment',//在页面函数的按钮
  })
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  var that = this;
  var commentlist = that.data.commentlist//取得commentlist 
//获取缓存数据
  wx.getStorage({
   key: 'commentStorage',//这个key值要与writecomment.js里面设置的key一致
   success: function (res) {
    for (let i in res.data) {
     that.data.commentlist.push(res.data[i])//这里是把缓存数据放入到数组commentlist 里面
    };
    that.setData({
     commentlist: commentlist//刷新commentlist 
    })
   },
  })
  that.setData({
   options: options,
  });
 },
 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
 },
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
 },
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
 },
 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {
 },
 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
 },
 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
 },
 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {
 }
})

commentlist.wxml文件

<!--pages/comment/commentlist/commentlist.wxml-->
<view class='p-list-group'>
 <view class='p-list-group-more'>
  <!-- 输出输入页面输入的内容 -->
  <view class='p-list' wx:for='{{commentlist}}' wx:key="{{index}}">{{item}}</view>
 </view>
 
 <!-- 写计划按钮与搜索按钮 -->
 <view class='cardclass'>
  <button class='btn-search' open-type='' bindtap='search' style="background-image:url(/images/plan/icon-search-1.png);"> 搜索</button>
  <!-- 写计划 -->
 <button class='btn-write' open-type='primary' bindtap='writecomment' style="background-image:url(/images/plan/icon-pen-1.png);">评论 </button>
 </view>
</view>

样式文件

/* pages/comment/commentlist/commentlist.wxss */
.p-list-group{
 margin-right: 10rpx;
 margin-left: 10rpx;
 overflow: scroll;
 width:98%;
 right:1rpx;
}
.p-list-group-more{
 right:1rpx;
 overflow: scroll;
 height:1000rpx;
 width:100%;
 margin-top: 10rpx;
}
.p-list{
 text-overflow: ellipsis;/***文本太长显示省略号*/
 overflow: scroll;
 width:99%;
 border: 1px solid #ccc;
 margin-right: 10rpx;
 margin-bottom: 20rpx;
 height: 100rpx;
}
.btn-search{
 position: fixed;
 bottom: 5rpx;
 width: 30%;
 background-size: 45rpx 45rpx;
 background-repeat:no-repeat;
}
.btn-write{
 position: fixed;
 bottom: 5rpx;
 width: 30%;
 background-size: 45rpx 45rpx;
 background-repeat:no-repeat;
 right:10rpx;
}
.cardclass{
 display:flex;
 font-size:18rpx;
 justify-content: space-between;
 bottom: 5rpx;
 height:25rpx;
}
.image-list{
 width:40rpx;
 height:30%;
}

好啦,我做的基本就这样,代码有点多,关键就是wx.setStorage()和wx.getStorage(),为了方便我还是把两个页面完整代码全部放这里了

以上所述是小编给大家介绍的小程序设置缓存并且不覆盖原有数据详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 Javascript
原生小程序封装跑马灯效果
Oct 21 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 #Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 #Javascript
Vuex的actions属性的具体使用
Apr 14 #Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 #Javascript
vue自定义指令之面板拖拽的实现
Apr 14 #Javascript
详解Vue组件之间通信的七种方式
Apr 14 #Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 #Javascript
You might like
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
jQuery参数列表集合
2011/04/06 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
Python 导入文件过程图解
2019/10/15 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
优秀驾驶员先进事迹材料
2014/05/04 职场文书
社区清明节活动总结
2014/07/04 职场文书
生物工程专业求职信
2014/09/03 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
如何写好竞聘报告
2019/04/03 职场文书
感谢信
2019/04/11 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python