精华内容
下载资源
问答
  • 微信小程序里面的本地缓存 wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync) 可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB。 注意: ...

    微信小程序里面的本地缓存

    wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)

    可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB。

    注意: 如果用户储存空间不足,小程序会清空最近最久未使用的小程序的本地缓存。不建议将关键信息全部存在 localStorage,以防储存空间不足或用户换设备的情况。


    一、同步

    在小程序中Sync结尾的本地缓存中,为同步缓存

    wx.setStorageSync(string key, any data)

    参数object说明:

    string key: 本地缓存中指定的 key

    any data: 需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。

    设置wx.setStorageSync:

     wx.setStorage({
      key: 'key',
      data: 'value'
    })
    try {
      wx.setStorageSync('key', 'value')
    } catch (e) { }
    

    读取wx.getStorageSync:

    wx.getStorage({
      key: 'key',
      success(res) {
        console.log(res.data)
      }
    })
    try {
      const value = wx.getStorageSync('key')
      if (value) {
        // Do something with return value
      }
    } catch (e) {
      // Do something when catch error
    }
    

    二、异步

    在小程序中无Sync结尾的本地缓存中,都为异步缓存

    wx.setStorage(object)

    参数object说明:
    在这里插入图片描述
    设置wx.setStorage:

    wx.setStorage({
        key: "key",
        data: "value",
        success:function(res){
          console.log(res);
        },
        fail:function(log){
          console.log(log);
        },
        complete:function(com){
          console.log(com);
        }
      })
    

    读取wx.getStorage:

    wx.getStorage({
            key: 'number',
            success: function(res) {
              that.setData({
                number: res.data
              })
            },
            fail: function(res) {
              that.setData({
                // number: res.data
              })
            }
     
          })
    

    感谢您的阅读, 如有什么不妥之处,还请赐教,我会继续努力,分享更好的前端代码。
    点赞和在看就是最大的支持❤️

    展开全文
  • 当期刊更换到第一期的时候,更换下一期的按钮会变成禁用,当期刊是最新一期的时候,更换上一期按钮会变成禁用。实现思路:1、首先判断是否是第一期2、判断是否是最新一期首先...此时需要把latestIndex另存入缓存后,...

    406fbeb52feaea7bbc9ef2ef7ef6607d.png

    目的:

    点击下图中的按钮,更换期刊内容。当期刊更换到第一期的时候,更换下一期的按钮会变成禁用,当期刊是最新一期的时候,更换上一期按钮会变成禁用。

    faf374fd528ef3e10c12b378711776e9.png

    实现思路:

    1、首先判断是否是第一期

    f2b752026e94c31332c1e0ee846701dc.png

    2、判断是否是最新一期

    首先发现有获取最新一期的接口,文档中有最近一期的latestIndex。

    点击左侧按钮后,index会变化,同时也会覆盖页面初始化时加载的lastIndex。此时需要把latestIndex另存入缓存后,index与lastestIndex比较,一直即为最新一期。否则就不是。

    (学习视频分享:php视频教程)

    步骤如下:

    1、存入缓存

    2175c3beb255749e7f14ca95664289f7.png

    2、在回调函数中完成缓存的写入,传入最新期刊的index。

    4442457ef3fa6657fbde0d499b4aa8db.png

    3、读取缓存

    25e5d2c454953ce59ea1d3535119c624.png

    4、读取缓存的latestIndex与index比较

    170437b86fbdff5a78c9191473d7fe57.png

    5、latest和first在页面的classic的data中定义了

    6bf7baa8a4780f55d737815843c423a7.png

    在页面按钮的点击事件中更新latest和first。

    d375dec7c5717b11c63a32c2e98d6cdd.png

    展开全文
  • 微信小程序中,将数据存入本地缓存是必不可少的操作,在操作其缓存中的数组,在缓存数组的基础上追加一条新的数据,最常见的操作就是使用数组的push方法。但是直接使用数据的push方法就会出现以下结果: 测试场景:...

    微信小程序中,将数据存入本地缓存是必不可少的操作,在操作其缓存中的数组,在缓存数组的基础上追加一条新的数据,最常见的操作就是使用数组的push方法。但是直接使用数据的push方法就会出现以下结果:

    考察JavaScript基本功的时刻到了…

    数组中的push和concat方法

    push() :向数组的末尾添加一个或更多元素,并返回新的长度
    concat() :连接两个或更多的数组,并返回结果

    测试场景:初始页面是缓存deviceList数组数据,点击go方法操控缓存中的deviceList数组追加新的数据

    index.wxml:

    <view class="container">
    	<view bindtap="go">GO</view>
    </view>
    

    index.js:

    Page({
      onLoad(){
        wx.setStorageSync('deviceList', [{
          id:'id1',
          curTime:'2021-07-14 13:39:10'
        }])
      },
      go(){
        let deviceList = wx.getStorageSync('deviceList')
    
        console.log("deviceList:",deviceList)
        let newDeviceList = deviceList.push({
          id:'id2',
          curTime:'2021-07-14 13:41:06'
        })
    
        console.log("newDeviceList:",newDeviceList)
        wx.setStorageSync('deviceList', newDeviceList)
      }
    })
    

    初始缓存数据结果如下:
    在这里插入图片描述
    点击go方法在deviceList缓存中追加新的数据结果如下:
    在这里插入图片描述
    追加新的数据后,deviceList直接显示的是2,而不是两条对象
    在这里插入图片描述
    解决方法:
    将push方法改用为concat方法去操控数组中的数据

    Page({
      onLoad(){
        wx.setStorageSync('deviceList', [{
          id:'id1',
          curTime:'2021-07-14 13:39:10'
        }])
      },
      go(){
        let newDeviceList = wx.getStorageSync('deviceList').concat({
          id:'id2',
          curTime:'2021-07-14 13:41:06'
        })
        wx.setStorageSync('deviceList', newDeviceList)
      }
    })
    

    在这里插入图片描述

    展开全文
  • Page({ /** * 页面的初始数据 */ data: { ... * --------如果请求的数据比较多,很占资源,可以利用小程序缓存--------------------- * 1.判断本地存储中有没有旧数据(有没有过期,time:Date.no.
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        // 轮播图数组
        swiperList:[]
      },
     
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        /**
         * --------如果请求的数据比较多,很占资源,可以利用小程序的缓存---------------------
         * 1.判断本地存储中有没有旧数据(有没有过期,time:Date.now(),数据,data:[...])
         * 2.如果有旧数据,同时就数据没有过期,就使用本地存储中的旧数据即可
         * 3.如果没有旧数据,则直接发送请求
         */
    
        // 获取本地存储中的数据 
        const swiperList = wx.getStorageSync('swiperList');
        // 判断
        if(!swiperList){
          // 不存储旧数据  调用请求
          this.getSwiperList();
        }else{
          // 存在旧数据,判断时间有没有过期    假如这边设置10s后过期
          // 1000代码1s   1000*10代表10s
          if(DataCue.now() - swiperList.time > 1000*10){
            // 时间过期  重新发送请求
            this.getSwiperList();
          }else{
            // 时间没有过期,可以用旧数据
            this.swiperList = swiperList.data;
            this.setData({
              swiperList
            });
          }
        }
         /**
          * ---------web中的本地存储和小程序中的本地存储的区别--------------
          * 1.写代码的方式不一样
          *       web:
          *           存数据:localStorage.setItem("key","value");
          *           取数据:localStorage.getItem("key");
          *       小程序:
          *           存数据:wx.setStorageSync("key","value");
          *           取数据:wx.getStorageSync("key");
          * 2.存数据的时候,有无类型转换
           *       web:
          *           不管存入的是什么类型的数据,最终都会先调用一下 toString(),把数据转换成字符串,在存进去
          *       小程序:
          *           不会进行类型转换,存什么数据进去,获取到的就是什么类型
          */
      },
    
      /**
       * 获取轮播图列表
       */
      getSwiperList:function(){
        // 发送异步请求获取轮播图数据
        wx.request({
          url: 'https://api.zbztb.cn/api/public/v1/home/swiperdata',
          success: (result) => {
            this.setData({
              swiperList:result.data.message
            });
    
            /**
             * 把接口中的数据存入本地缓存中
             * 这样就可以判断有没有本地缓存
             * 如果有,且时间没有过期,就不在发送请求,
             * 如果没有,则发送请求
             */
            wx.setStorageSync('swiperList',{
              time:DataCue.now(),//存储的请求成功,保持数据时的时间
              data:result.data.message//存储的请求成功时,返回的数据
            })
          }
        })
      }
    })

     

    展开全文
  • 这篇文章主要介绍了微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解的相关资料,需要的朋友可以参考下微信小程序 缓存关于本地缓存1.wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx....
  • 【未经作者本人同意,请勿以任何形式转载】目前,微信给每个小程序提供了10M的本地缓存空间(哎哟妈呀好大)有了本地缓存,你的小程序可以做到:离线应用(已测试在无网络的情况下,可以操作缓存数据)流畅的用户体验...
  • //添加缓存,key为'cart',value是'cart' wx.setStorageSync('cart', cart); //.... //取出缓存cart let cart = wx.getStorageSync('cart')||[]; setStorageSync getStorageSync
  • 小程序数据缓存机制应用

    千次阅读 2021-04-02 07:36:28
    数据缓存缓存数据,从而在小程序退出后再次打开时,可以从缓存读取上次保存的数据,常用的数据缓存API如下表所示: 注意:将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动...
  • 微信小程序 缓存关于本地缓存1.wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB2....
  • 微信小程序读取线上json配置: wx.request({ url: 'xxxxxxx.json', // 线上json文件地址 headers: { 'Content-Type': 'application/json' }, success: function (res) { that.setData({ num: res..
  • 读取 wx.getStorage wx.getStorageSync 删除 wx.removeStorage wx.removeStorageSync 清空 wx.clearStorage wx.clearStorageSync 获取缓存信息 wx.getStorageInfo wx.getStorageInfoSync 以Sync结尾都是同步...
  • 第一时间想到的实现方法就是利用小程序的缓存方法保存在页面B上传的图片的临时地址,然后从A页面回到B页面的时候就会读取缓存,获取地址,赋值给img的src。 用到的知识点 1.小程序的设置缓存、获取缓存、移除缓存、...
  • 微信小程序系列之使用缓存在本地模拟服务器数据库现在将data.js这个文件视作是本地数据库的初始化数据,要做的第一件事就是讲这些初始化数据装进缓存中,以形成数据库的初始化数据整个应用程序的生命周期,类比一下...
  • 关于本地缓存1.wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB2.localStorage 是永久存储...
  • wxml <van-button open-type="getUserInfo" bindgetuserinfo="getInfo"> 登录 </van-button> js //获取用户信息 getInfo(e){ ... // 本地缓存 wx.setStorageSync('user', user) },
  • 为了项目性能等方面的考虑,有时候有必要为用户经常访问的页面...小程序官方文档对本地缓存的介绍如下:每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.ge...
  • 可以通过 wx.setStorage/wx.setStorageSync、wx.getStorage/wx.getStorageSync、wx.clearStorage/wx.clearStorageSync,wx.removeStorage/wx.removeStorageSync 对本地校友录小程序缓存进行读写和清理。 校友会...
  • 点击登录按钮,底部弹出询问授权框,用户点击确认获取用户基本信息,并将用户信息缓存本地,以避免后期进入小程序。再次授权 1。在wxml页面设置登录按钮,并绑定登录事件,同时添加wx:if="{{!userInfo}}"判断登录...
  • 我使用下面的代码来获取Android上所有安装的应用程序的列表,我的问题是如何获得这些应用程序使用的缓存的大小,任何帮助,将不胜感激。public class CacheActivity extends Activity {private ListView lv;// ...
  • 今天做了一下测试,利用Java读取一个大文件 如何达到最大的速度。 资源当然得充分利用,笔者的环境是 联想thinkpad E490
  • setGlobalUserInfo为注入缓存,setStorageSync为同步注入方式,getGlobalUserInfo为读取缓存,getStorageSync为同步读取方式 //app.js App({ serverUrl:"http://127.0.0.1:8081", userInfo:null, ...
  • 周期性更新能够在用户未打开小程序的情况下,也能从服务器提前拉取数据,当用户打开小程序时可以更快地渲染页面,减少用户等待时间,增强在弱网条件下的可用性。 (1)后台配置 开发->开发管理->开发设置->填写...
  • A页面 去login页面 msg : [ 'uniapp行业峰会频频亮相开发者反响热烈', 'DCloud完成B2... 在h5中它是存储在localStorage中的 微信小程序是在Storage中的 原文地址:https://www.cnblogs.com/ishoulgodo/p/12732001.html
  • 前言微信小程序的运行环境不是在浏览器下运行的。所以不能以cookie来维护登录态。下面我就来说说我根据官方给出的方法来写出的维护登录态的方法吧。一、登录态维护通过 wx.login() 获取到用户登录态之后,需要维护...
  • 微信小程序数据存储与取值详解

    千次阅读 2020-12-22 00:29:20
    小程序开发的过程,经常要需要这个页面输入的数据,在下...微信小程序提供了数据存储的API,wx.setStorage(OBJECT) 可以将数据存储在本地缓存中指定的 key 中,如果重复会覆盖掉原来该 key 对应的内容。思路是,在...
  • A页面 去login页面 msg : [ \'uniapp行业峰会频频亮相开发者反响热烈\', \'DCloud完成B2轮融资,uni-app震撼发布\', \'36氪热文榜推荐、CSDN公号推荐 ... 在h5中它是存储在localStorage中的 微信小程序是在Storage中的
  • 最近项目中使用到文件缓存,在文件流使用的时候遇到一点坑,Mark一下。一、Android下创建应用缓存文件目录:File path = context.getDir(String dirName, Context.MODE_PRIVATE);使用Context的getDir()方法,传入:...
  • goods_price:100 } ], } 然后,用这么一个跳转函数,这里设置为触发跳转时(navigateToPage是我自定义的绑定事件名),先将dataList 存入缓存,然后跳转 // 事件处理函数 navigateToPage:function(e) { wx....
  • 这次的问题来源于一个简单的需求,要给某个勾选框加上一个月的缓存有效期,即只要选中了这个勾选框,在接下来的一个月内再次进来都会默认勾选上。 什么?这么简单,用缓存记录一下是否勾选的字段,在用缓存存一下...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 344,675
精华内容 137,870
关键字:

小程序读取缓存