小程序本地存储之循环写入数组内容

许坏

发布于 2019-07-08 19:51:21

3.4K0

发布于 2019-07-08 19:51:21

文章被收录于专栏：宅机吧

这两天在开发一个一款小程序的历史记录功能需要使用本地存储，特记此文。

wx.setstoragesync和wx.setstorage的区别

以Sync（同步，同时）结尾的都是都是同步缓存，二者的区别是，异步不会阻塞当前任务，同步缓存直到同步方法处理完才能继续往下执行。

通俗点说,异步就是不管保没保存成功,程序都会继续往下执行.同步是等保存成功了,才会执行下面的代码.

使用异步,性能会更好;而使用同步,数据会更安全

小程序官方文档：

https://developers.weixin.qq.com/miniprogram/dev/api/wx.setStorageSync.html

因为存储的是历史记录，在这里只考虑不能影响性能，所以我们全采用异步

需要存储的数据内容：

this.setData({
      data:{
        cover: "https://aweme.snssdk.com/aweme/v1/play/?video_id=v0200f620000bjbquvjbo1i9kj5oo2u0&ratio=1920&line=0"
        url: "https://aweme.snssdk.com/aweme/v1/play/?video_id=v0200f620000bjbquvjbo1i9kj5oo2u0&ratio=1920&line=0"
      }
    })

获取存储内容wx.getStorage。

首次获取，由于存储为空，wx.getStorage返回fail，进行单次存储。

 fail(res) {
//第一次打开时获取为null
      that.setData({
       list_url: {
         url: that.data.data.url,
         cover: that.data.data.url,
        }
      });
var newarr = [that.data.list_url]; //对象转为数组
var newarr =JSON.stringify(newarr);//数组转对象
      wx.setStorage({
        key: 'history',
data: newarr
      })
    }

当再次获取时，wx.getStorage返回success，此时可进行循环存储。

     success(res) {
       var oldarr = JSON.parse(res.data);
      that.setData({
        list_url: {
          url: that.data.data.url,
          cover: that.data.data.url,
        }
      });
       var newarr = [that.data.list_url]; //对象转为数组
       var newarr = newarr.concat(oldarr);//连接数组
       var newarr = JSON.stringify(newarr);//数组转对象
      wx.setStorage({
        key: 'history',
         data: newarr,
      })
    },

完整的dome演示如下：

history:function(){
 var that=this;
  wx.getStorage({
    key: 'history',
    success(res) {
       var oldarr = JSON.parse(res.data);//字符串转数组
      that.setData({
        list_url: {
          url: that.data.data.url,
          cover: that.data.data.url,
        }
      });
       var newarr = [that.data.list_url]; //对象转为数组
       var newarr = newarr.concat(oldarr);//连接数组
       var newarr = JSON.stringify(newarr);//数组转字符串
      wx.setStorage({
        key: 'history',
         data: newarr,
      })
    },
    fail(res) {
       //第一次打开时获取为null
      that.setData({
       list_url: {
         url: that.data.data.url,
         cover: that.data.data.url,
        }
      });
       var newarr = [that.data.list_url]; //对象转为数组
       var newarr =JSON.stringify(newarr);//数组转字符串
      wx.setStorage({
        key: 'history',
         data: newarr,
      })
    }
  });
}

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-05-13，如有侵权请联系 cloudcommunity@tencent.com 删除

存储