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


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 相关文章推荐
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 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
图像替换新技术 状态域方法
2010/01/28 Javascript
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
原装进口全世界:天猫国际
2016/08/03 全球购物
工程班组长岗位职责
2013/12/30 职场文书
英语商务邀请函范文
2014/01/16 职场文书
十岁生日父母答谢词
2014/01/18 职场文书
超市中秋节促销方案
2014/03/21 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
广告宣传策划方案
2014/05/21 职场文书
党员自我剖析材料
2014/08/31 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
2016国庆促销广告语
2016/01/28 职场文书
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python