精华内容
下载资源
问答
  • 微信小程序 数据缓存

    2021-03-12 14:46:57
    数据存储在本地缓存中指定的 key 。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。 ...

    数据本地存储

    官方文档 wx.getStorage......

    wx.setStorageSync和wx.setStorage   以Sync结尾的是同步的方法,其它的是异步的方法  举几个异步的方法为例

    wx.setStorage

    将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。

      onLoad: function (options) {
        wx.setStorage({
          key: 'name',
          data: '张三'
        })
        wx.setStorage({
          key: 'age',
          data: '20'
        })
      },

    获取存储的本地数据

    <button class="btn" bindtap="getStorage">获取数据name</button>
    <button class="btn" bindtap="removeStorage">移除数据name</button>
    <button class="btn" bindtap="clearStorage">清除全部数据</button>
    <button class="btn" bindtap="getAge">获取数据age</button>

    wx.getStorage

    从本地缓存中异步获取指定 key 的内容

     getStorage:function(){
        wx.getStorage({
          key: 'name',
          success:function(res){
            console.log(res.data)
          }
        })
      },
     getAge:function(){
        wx.getStorage({
          key: 'age',
          success:function(res){
            console.log(res.data)
          }
        })
      },

    wx.removeStorage

    从本地缓存中移除指定 key。

    removeStorage:function(){
        wx.removeStorage({
          key: 'name',
          success:function(res){
            console.log(res)
          }
        })
      },

    wx.clearStorage

    clearStorage:function(){
        wx.clearStorage({
          success: (res) => {
            console.log(res)
          }
        })
      },

    数据存储结合项目

    • 先判断本地存储中是否有存储好的数据

    • 没有存储好的数据 就发送请求 有存储好的数据就直接使用本地数据

      onLoad: function (options) {
        // 判断本地是否存储了 当前数据
        var as = wx.getStorageSync('arrs')
        if(!as){ 
          //如果本地没存储   发送AJAX请求
          console.log(11111)
          wx.request({
            url: 'http://106.75.79.117:3000/aslide',
            success:(res) => {
              console.log(res.data)
              var arrs = res.data
              wx.setStorageSync('arrs', arrs)
              this.setData({
                aslideLeftTit:arrs,
                children:arrs[0].children,
                title:arrs[0].name
              })
            }
          })
        }else{
          console.log(2222)
          this.setData({
            aslideLeftTit:as,
            children:as[0].children,
            title:as[0].name
          })
        }
      },

     

    展开全文
  • 其实很简单,就是使用js的splice方法,就可以//删除起始下标为1,长度为1的一个值(len设置1,如果为0,则数组不变)...需要先获取团队成员的数据2.将团队成员数据的id和数组的下标相等3.获取点击的成员数据id4.使用s...

    其实很简单,就是使用js的splice方法,就可以

    //删除起始下标为1,长度为1的一个值(len设置1,如果为0,则数组不变)

    var arr = ['a','b','c','d'];

    arr.splice(1,1);

    console.log(arr);

    //['a','d'];

    以下是我自己的项目案例:

    1.需要先获取团队成员的数据

    2.将团队成员数据的id和数组的下标相等

    3.获取点击的成员数据id

    4.使用splice方法删除数组中对应的数据

    5.在将将数据存到缓存里边

    6.获取缓存数据,给data设置值

    splice的用法:

    例:

    memberList.splice(id,1);

    member是一个数组,id为数组的索引,这个方法就是从索引id开始,删除一个数组

    // 删除团队成员

    onTapDelMember: function (e) {

    // 获取团队成员

    var memberList = wx.getStorageSync('memberList');

    console.log(memberList)

    // 获取团队成员id

    var id = e.currentTarget.dataset.memberid;

    console.log(id)

    // 删除对应的索引

    var memberLists = memberList.splice(id,1);

    // 存入缓存

    var kaka = wx.setStorageSync('memberList',memberList);

    var getKaka = wx.getStorageSync('memberList');

    this.setData({

    memberList: getKaka

    });

    // console.log(memberList)

    },

    总结

    如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

    本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

    展开全文
  • 和小编一起来看看删除微信小程序缓存的方法吧。一些小程序可能会内置缓存清理功能,使用这种清除缓存功能,小程序可以安全地将已在服务器数据进行清除,达到减少小程序占用存储、加快小程序运行速度的目的。但...

    微信小程序上线之后,关注的小程序越多,哪么将占用的手机空间就越大,这些程序会产生一定的缓存,那么怎么清理小程序缓存呢?微信小程序内的缓存到底如何清除?和小编一起来看看删除微信小程序缓存的方法吧。

    一些小程序可能会内置缓存清理功能,使用这种清除缓存功能,小程序可以安全地将已在服务器中的数据进行清除,达到减少小程序占用存储、加快小程序运行速度的目的。

    但有些小程序暂时还没有缓存清理的机制,这时我们可以直接删除小程序,达到缓存清理的目的。

    具体的删除方法是:

    iOS 微信:进入微信中的「发现」-「小程序」,将不想要的小程序从右往左划动,然后点击红色的「删除」按钮即可。

    c36d92aa047c30e115db5566e9db1d10.png

    Android 微信:进入微信中的「发现」-「小程序」,长按不想要的小程序,然后点击「删除」按钮即可。

    29caaea235ccc4a3b4caee6e51494335.png

    需要注意的是,删除小程序,会将对应小程序的本体、本地数据以及权限偏好删除,但不会删除小程序服务器上的数据。

    也就是说,删除小程序后,你将永久丢失小程序中未备份、未上传的数据。在删除小程序之前,记得做好备份工作哦~

    删除之后,如果想再次使用这个小程序,只需重新搜索、扫码,再打开小程序,就可以啦。

    总结

    以上所述是小编给大家介绍的微信小程序缓存删除的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    展开全文
  • 微信小程序 api 缓存方案 背景 为了应对用户流量大,减轻服务器的压力,减少网络请求次数,加快数据的显示,以及提高用户体验。...所以就需要基于微信小程序提供的这套数据缓存接口来实现我们的 api 缓存

    背景

    为了应对用户流量大,减轻服务器的压力,减少网络请求次数,加快数据的显示,以及提高用户体验。我们现在需要把一些公共请求进行本地缓存,并且提供不同的更新策略给开发者选择。

    前言

    与 web 端不同的是,微信小程序并没有cookielocalStoragesessionStorageindexedDBWeb SQL(已废弃),service worker这些花里胡哨的东西。只有一套已经封装好的接口。所以就需要基于微信小程序提供的这套数据缓存接口来实现我们的 api 缓存方案。

    缓存方案(更新策略)

    这里我们提供三种缓存方案。灵感来源于一次service workerpwa应用实践。方案如下:

    • 第一种方案:有缓存数据并且没有过期的情况下,直接返回缓存数据,不进行网络请求获取数据;没有缓存数据或者是有缓存数据,但是缓存数据的有效时间过期的情况下,发送网络请求,等待数据返回,然后存储到本地,并且设置过期时间,最后在把数据返回给前端;数据存储到本地的时候,大家最好设置一个过期时间,否则这个缓存数据就永远无法得到更新,因为有数据并且没有过期的情况下是直接返回缓存数据的,不会进行网络请求获取数据,除非用户手动清除缓存。这个方案最大的优点就是减少了网络请求的次数,加快数据的响应速度(有数据的情况下不用等待网络请求的时间),缺点就是数据不能得到及时的更新。在应对一些高并发,用户流量大的情况下,这个方案会比较好。因为这种情况下,后台会有属于自己的缓存方案,比如 CDN 缓存,nginx 缓存,这些缓存都会有一个缓存时间的,我们只要在本地的缓存数据中设置一个大于后台缓存时间的有效时间即可。这样既可以保证数据能够被更新,又能减少网络请求的次数。比方说后台的缓存时间是 5 分钟,前端可以设置过期时间是 6 分钟,前端不设置 5 分钟是因为后台缓存的时间并不一定是一个准确数,你在第五分钟获取的数据可能还是旧的数据,所以时间上要略大一点。
    • 第二种方案:有缓存数据并且没有过期的情况下,直接返回缓存数据,同时继续发送网络请求,请求的数据回来之后对缓存数据进行更新;没有缓存数据或者有缓存数据,但是缓存数据已经过期的情况下,发送网络请求,然后存储到本地,并且设置过期时间,最后再把数据返回给前端;这个方案每次都是需要发送请求的,然后在更新缓存数据的。这里我建议大家也设置一个过期时间,这样可以防止数据太旧了,比方说我现在请求了一次网络数据,然后退出了小程序,五天后再打开小程序,如果缓存数据没有设置过期的情况下,那么我们看见的将会是五天前的数据。这个方案的优点就是数据能够及时更新(每次看见的数据都是上一次请求回来的数据),加快数据的响应时间(有数据的情况下不用等待网络请求的时间),缺点就是不能减少网络请求的的次数。这个方案适用于一些要求数据及时性比较高或者网络情况比较差的情景,比如网络比较慢的时候,一个请求需要 5 秒时间,在有缓存数据的情况下,会直接返回缓存数据,由于网络请求是异步的,5 秒后请求回来之后会自动更新缓存数据,这并不影响后面的代码运行。
    • 第三种方案:当没有网络或者请求报错,并且有缓存数据的情况下,就返回缓存数据,没有缓存数据就返回空。这种方案每次请求都会对缓存数据进行更新。优点就是提高系统的健壮性和可用性,不至于没有网络或者后台报错的时候什么数据都没有,前端页面一片空白,这样就可以大大的提高用户的体验。缺点就是你需要区分哪些数据是成功请求返回来的,哪些数据是失败请求返回来的,因为失败的请求还需要给个提示用户那里出错了。
    • 第四种方案:不进行缓存,并不是所有的接口都需要缓存,有些需要保证前端和后台的数据保持一致性的,不然可能会导致数据库的修改丢失。比方说我修改用户名,张三改成李四,但是由于缓存的原因,我再次修改的时候显示的还是张三,然后直接点击保存,数据库保存的又变回张三了,张三改成李四这个修改的操作就会丢失了。

    缓存那些接口

    缓存方案有了,那么我们需要缓存那些接口呢。一般来说,我们的接口会分为三种类型:public,my,protect。

    • public:一般是公共接口,用于公共页面的,就是那些游客可以看见的就是公共页面,通常来说是列表接口来的。请求方法是get,后台会有缓存。
    • protect:一般来说是需要用户登录之后才能调用的接口,接口需要根据用户的信息才能出数据的,还有就是这些接口是需要权限的。通常就是用于只有登录会后才能看见的一些页面。请求方法是post,因为需要带上 token。protect 类型的接口后台也会进行缓存
    • my:一般用于个人空间那些模块,就是需要编辑,删除或者新增的模块,这些操作都需要数据及时更新,后台不会进行缓存,直接走数据库。

    上面有三种类型的接口,我们只缓存public类型的接口;my类型的接口由于要求数据的及时性比较高,所以不做缓存;至于protect类型的接口也不做缓存,因为接口数据是跟用户信息(token)有关的,不同的用户调用同样的接口,返回的数据是不一样的,并且缓存数据的时候我们都是根据接口 url+请求参数作为key值。当然,如果想要缓存protect类型的接口也是可以的,我们给接口加上对应的标识(userId 等,最好不要用 token 这些,因为会经常变化,导致命中不了缓存),标识这个接口对应的是哪个用户就可以了,这就要求我们实现的缓存工具类需要有一个可以自定义缓存的key值的功能,让开发者自己去定义key值。

    Storage 缓存工具类

    基于上面的描述,我们首先需要封装一个操作缓存数据的工具类,需要有如下核心功能:

    1、获取数据

    get(key:string,def?:any)
    

    根据传入的key值获取数据,def是没有数据的时候默认返回来的数据。获取数据的时候还需要判断这个数据有没有过期,过期就需要删除数据,并且返回null或者def

    2、设置数据

    set(key:string, val:any, options?:Object)
    

    按照key-val的形式存储数据,options是其他一些配置参数,比如设置有效期时长

    3、删除最近最少使用的项的缓存对象

    我们需要考虑的一个问题就是,缓存的数据量可能会比较多,但是存储的空间不够(微信小程序最大可以缓存 10MB 数据,这种情况一般不会发生)或者只想缓存 10 条请求,超出的部分需要首先淘汰掉一部分已经存储起来的数据,然后再把超出的部分存储进去。淘汰算法使用最近最少使用的。思路如下:

    • 新建一个数组,用来保存缓存数据的key
    • get获取数据的时候,将数组中对应的key值放到最后一位,这样可以保证最近使用过的在最后一位,最近最少使用的就放在首位。
    • set设置数据的时候,首先检查数组中是否已经包含了对应的key值,包含就删除。最后把key值放置到数组中最后一位。

    实现:

    class Storage {
      // 设置值
      set(key, val, options) {
        //   将用户传入的配置和默认配置进行合并
        const config = Object.assign({}, defaultConfig, options || {});
        // 判断是否超出储存长度,超出则删除最近最少使用的项的缓存对象
        isOverLimitSize(this.maxSize);
        // 将需要存储的数据转化为我们需要的格式
        const data = initData(val, config);
        // 存储数据
        wx.setStorageSync(key, data);
        // 保存key值到数组中
        addCacheKey(key);
        return val;
      }
    
      // 获取值
      get(key, def) {
        //   根据key值获取value值
        const val = wx.getStorageSync(key);
        if (isNotDefine(val)) {
          // 如果是空值则返回默认值
          return def;
        }
        // 检查格式是否正确,因为有些数据不是通过这个工具类存储的
        if (isFlag(val)) {
          // 检查数据有效期
          const isExpire = checkExpire(val);
          if (!isExpire) {
            // 没过期,修改key值的存储位置
            addCacheKey(key);
            return val.data;
          }
          // 过期,则删除缓存数据
          this.remove(key);
    
          return def;
        }
        // 修改key值的位置
        addCacheKey(key);
        return val;
      }
    
      // 根据key移除缓存
      remove(key) {
        //   将key值从数组中删除
        deleteCacheKey(key);
        return wx.removeStorageSync(key);
      }
    
      // ...  其他功能
    }
    

    ApiCache 类实现

    配置

    我们需要有一些配置给用户选择,比如选择什么缓存方案,那些接口需要缓存等

    • cache:false 就是禁止进行缓存。1 就是上述的第一种缓存方案。2 就是上述第二种缓存方案。默认是 1。
    • cacheKey:函数,缓存数据的key值,该函数会有 2 个参数,一个是请求配置,一个是缓存配置。默认返回接口 url+请求参数。
    • shouldCache:函数,判断接口是否需要进行缓存,返回 true 就是缓存,false 就是不缓存。该函数会有 2 个参数,一个是请求配置,一个是缓存配置。默认缓存get请求。

    封装 request 请求

    这里使用的请求库是我自己封装的一个基于Promise的 Http 请求库,参考了axios源码的设计思想。有兴趣的同学可以点击这里。这里封装 request 请求就是基于这个库,然后加一层缓存下去的。

    实现:

    let defaultCacheConfig = {
      // cache: false-不缓存;1-本地有数据就使用本地数据,不请求;2-本地有数据就返回本地数据,然后请求数据回来之后更新缓存
      cache: 1,
      cacheKey(requestConfig, cacheOptions) {
        return requestConfig.url+queryString(requestConfig.data);
      },
      shouldCache(requestConfig, cacheOptions) {
        return requestConfig.method === 'get';
      }
    };
    
    function ApiCache() {}
    
    ApiCache.prototype.request = function (method, url, config, cacheOptions) {
      // 合并请求配置
      const requestConfig = Object.assign({}, config || {}, {
        method,
        url,
      });
      //   合并缓存配置
      const cacheConfig = Object.assign({}, defaultCacheConfig, cacheOptions);
      if (
        cacheConfig.cache &&
        cacheConfig.shouldCache(requestConfig, cacheOptions)
      ) {
        // 开启缓存
        const cacheKey = cacheConfig.cacheKey(requestConfig, cacheOptions);
        const cacheValue = storage.get(cacheKey);
        if (cacheValue) {
          //   有缓存值得时候
          if (cacheConfig.cache === 2) {
            //   方案2需要发送请求更新缓存数据
            request
              .request(requestConfig)
              .then((res) => {
                storage.set(cacheKey, res, cacheConfig);
              })
              .catch(() => {});
          }
    
          return Promise.resolve(cacheValue);
        } else {
          //   不存在缓存值得时候,通过请求获取数据
          return request
            .request(requestConfig)
            .then((res) => {
              storage.set(cacheKey, res, cacheConfig);
              return Promise.resolve(res);
            })
            .catch((error) => {
              return Promise.reject(error);
            });
        }
      } else {
        //   没有开始缓存的
        return request.request(requestConfig);
      }
    };
    

    总结

    到此,微信小程序 api 缓存方案已经实现完毕了。实现起来并不是很难,难点就在于缓存方案的设计上面,怎么做到快速响应数据,怎么更新数据,那些接口需要缓存,那些接口不需要缓存等等这些都是需要我们去考虑的。当然这套方案不仅可以用于微信小程序中,也可以用在web端的,实现起来大同小异。如果有兴趣想了解一下这方面的知识,可以关注我的开源项目微信小程序组件库,里面包含了一些扩展功能,用来解决一些微信小程序的业务场景。

    欢迎扫码体验
    二维码

    展开全文
  • 微信小程序数据缓存

    2021-03-30 13:43:01
    wx.setStorageSync(string key, any data) 设置本地缓存数据,只支持原生类型、date以及可以使用JSON.stringify进行序列化的对象 JSON.stringify(object) 将对象转换为字符串, JSON.parse(string) 将字符串转换为...
  • 在onload ... //利用缓存技术来提高性能,先判断本地存储有没有旧数据,有就使用本地的没有就发送新请求 const Cates = wx.getStorageSync("cates") if(!Cates){//不存在就发送请求 this.getCates() }
  • 本篇文章给大家带来的内容是关于微信小程序中多条数据缓存的代码实例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。查看历史记录点击保存{{item}}Page({data: {history:[]},inputcon: function...
  • 小程序wxml页面: <view> <button bindtap="clear">退出登录</button> </view> 小程序js页面 //清除缓存 clear:function(){ wx.clearStorageSync();//清除缓存 wx.showToast({ ...
  • 小程序开发有时候会遇到明明服务器里面的资源文件(比如图片、声音、视频之类)已经更新了,但微信里面还是会显示以前的内容的情况。这是微信为优化用户体验,采用了缓存的原因,对于相同的资源地址,会返回以前的...
  • 微信小程序中,将数据存入本地缓存是必不可少的操作,在操作其缓存中的数组,在缓存数组的基础上追加一条新的数据,最常见的操作就是使用数组的push方法。但是直接使用数据的push方法就会出现以下结果: 测试场景:...
  • //2判断商品对象是否存在于购物车数组 let index = cart.findIndex((item)=>item.goods_id === goodsObj.goods_id) if(index === -1){ //index不存在,说明第一次添加 goodsObj.num = 1; cart.push(goodsObj) }...
  • 我们微信小程序开发工具本地是可以正常显示的,这就排除了代码有误的猜想; 新用户(第一次访问该小程序的用户)是可以正常访问的,这就排除了配置有误的猜想; 那么看来肯定是跟缓存有关的,因为上次访问过小程序有...
  • Page({ /** * 页面的初始数据 */ data: { ... * --------如果请求的数据比较多,很占资源,可以利用小程序缓存--------------------- * 1.判断本地存储有没有旧数据(有没有过期,time:Date.no.
  • 今天在开发的时候遇到这样一个问题,服务器上面的图片已经上传完毕了,打开相应的网址也可以看到对应的图片,可是更换到小程序里面一直都没有反应,自己也没有动过相应的代码,猜测就是缓存的原因。试了很久,终于...
  • 微信小程序的本地缓存跟H5的localStorage非常类似,是前端的数据库,以下用三种异步函数来实现本地缓存值的获取。 es5标准:通过回调函数获取 //设置缓存值 wx.setStorageSync('token', '123') //异步获取缓存 ...
  • 这篇文章主要介绍了关于微信小程序中数据缓存的解析,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下每个微信小程序都可以有自己的本地缓存,本篇文章主要介绍了微信小程序-详解数据缓存,可以通过...
  • 这篇文章主要介绍了微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解的相关资料,需要的朋友可以参考下微信小程序 缓存关于本地缓存1.wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx....
  • 2、wx.getStorage/wx.getStorageSync:根据key获取缓存,有一个success(res)回调函数,res就是数据 3、wx.clearStorage/wx.clearStorageSync:清除全部的缓存 4、wx.removeStorage/wx.removeStorageSync:删除根据...
  • 插入 wx.setStorage wx.setStorageSync ...获取缓存信息 wx.getStorageInfo wx.getStorageInfoSync 以Sync结尾都是同步方法。同步方法和异步方法的区别是: 同步方法会堵塞当前任务,直到...
  • 对于缓存数据,上一节只是针对一个key,缓存一条数据(一个字符串),而面对一个key存储多条数据的情况下,则key对应一个数组则可以满足我们的需求。index.wxmlSaveData本地缓存数据{{item}}index.js//index.js//获取...
  • 微信小程序缓存

    2021-06-04 13:35:26
    1.我们在页面生命周期函数写上这么几行代码 wx.setStorage({ key: 'token', data: '123456', success: function (res) { }, ...2.我们在另外一个页面上写上获取缓存数据的方法 wx.getStorage({ key: 'token',
  • 比如传统的session及cookie等等,在微信小程序中,并没有cookie机制,但有本地缓存。小程序官方文档对本地缓存的介绍如下:每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync)、wx....
  • 干掉微信小程序-避免多次点击,重复触发事件 干掉微信小程序-避免多次点击,重复触发事件# ...所以,接下来说说,在微信小程序中避免多次点击,重复触发事件的两种思路。 解决方法一:# 使用 wx.showLoading 在请求
  • 示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下(示例): import numpy as np import pandas as pd import matplotlib.pyplot a
  • 微信小程序中数据和Vue一样是响应式,即数据的更改会驱动页面进行数据的刷新。 具体操作 首先找到组件的js文件,在js文件的data属性定义数据源。 在对应的wxml文件需要使用数据的位置通过{{}}去绑定数据源 ...
  • 【未经作者本人同意,请勿以任何形式转载】目前,微信给每个小程序提供了10M的本地缓存空间(哎哟妈呀好大)有了本地缓存,你的小程序可以做到:离线应用(已测试在无网络的情况下,可以操作缓存数据)流畅的用户体验...
  • 直接上代码:微信小程序js wx.request({url: 'https://yffice.com/wx/sendmail2.php',data: {name:'e.detail.value.name',phonenumber:'e.detail.value.phonenumber'},header: {'content-type': 'application/json'}...
  • 这篇文章主要介绍了微信小程序 用户数据解密详细介绍的相关资料,需要的朋友可以参考下微信小程序 用户数据解密官方指引图:引导图一步一步操作1、获取codeonLoad: function (options) {// 页面初始化 options为页面...
  • 小程序界面传值父级界面:A界面子级界面:B界面一、url传值详细的配置参数可以查看组件导航:navigator,这里不再做过多的解释。1. 正向传值:A界面 –>B界面用 navigator标签或 wx.navigator传值,A界面向B界面传...
  • 很高兴能为您解答, 在微信小程序中数据缓存其实就和localstorage 的原理差不多,所以理解起来并不难。下面我们来一起实现一下。效果图展示:我们在index页面存入数字11,然后在跳转到新页面,在将缓存中的11取出...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,880
精华内容 16,752
关键字:

微信小程序中缓存数据

微信小程序 订阅