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


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 相关文章推荐
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
JS实现复制功能
Mar 01 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 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
php实现网站插件机制的方法
2009/11/10 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
用javascript操作xml
2006/11/04 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
Python urlopen()函数 示例分享
2014/06/12 Python
Python自动登录126邮箱的方法
2015/07/10 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
Python3 翻转二叉树的实现
2019/09/30 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
董事长职责范文
2013/11/08 职场文书
门店业绩提升方案
2014/06/08 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
新郎结婚感言
2015/07/31 职场文书
健康教育主题班会
2015/08/14 职场文书
2016大学军训心得体会
2016/01/11 职场文书
二年级作文之动物作文
2019/11/13 职场文书
windows安装python超详细图文教程
2021/05/21 Python
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL