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


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 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
JS获取IMG图片高宽的简单实例
May 17 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
BootStrap中
Dec 10 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
angular之ng-template模板加载
Nov 09 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 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
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
js三种排序算法分享
2012/08/16 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
微信小程序实现首页弹出广告
2020/12/03 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
python装饰器decorator介绍
2014/11/21 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
利用python开发app实战的方法
2019/07/09 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
DNA基因检测和分析:23andMe
2019/05/01 全球购物
Oracle性能调优原则
2012/05/03 面试题
护士演讲稿范文
2014/01/05 职场文书
护士毕业生自荐信
2014/02/07 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
档案信息化建设方案
2014/05/16 职场文书
物流专业自荐信
2014/05/23 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL