微信小程序之本地存储

此篇博客主要记录一下把用户记录存储在本地（不推荐，最好存在服务器）的一种方式，方便自己以后查看。

1.在数据文件夹写一个存放数据的js文件

/* pages/data/newsdata.js */

/* pages/data/newsdata.js */

//定义数组 newsdata
var newsdata=[
  {
    "newsid": 0,
    "author_name": "iwen",
    "author_icon": "../../image/icon.png",
    "author_time": "2019/4/28",
    "title": "百度起诉今日头条",
    "article_img": "../../image/bluesky.jpg",
    "news_intro": "4月26日，第一财经记者获悉，今日头条（北京字节跳动科技有限公司）被百度以不正当竞争为由起诉到北京市海淀区人民法院，要求字节跳动立即停止侵权，赔偿相关经济损失及合理支出共计人民币9000万元，并连续30天在其APP及网站首页道歉。除民事起诉外，百度也同时向法院提交了行为禁止保全申请书",
    "article_icon": "../../image/icon.png",
    "like_count": 20,
    "comment_count": 15
  }, 
  {
    ...
  },
    ...
]

//module.exports的作用是导出给其他文件能使用
module.exports={
  //把内部newsdata变量赋给外部newsdata，在外部使用时，相当于直接调用内部newsdata
  newsdata:newsdata
}

2.在需要引用的js文件中引用

// pages/news/newsdetail/newsdetail.js
var newsdata=require("../../data/newsdata.js");

wxml文件，其中collec_article数函数

<!--pages/news/newsdetail/newsdetail.wxml-->
<view>
<button bindtap='collec_article'>收藏</button>
<text wx:if="{{collection}}">成功收藏</text>
<text wx:else>收藏失败</text>
</view>

js文件

// pages/news/newsdetail/newsdetail.js
var newsdata=require("../../data/newsdata.js");

Page({

  /**
   * 页面的初始数据
   */
  data: {
    collection: false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options.id);
    //设置options.id对应的article数据，方便此js文件使用
    this.setData(newsdata.newsdata[options.id]);
    //把id赋值到data中方便此js文件使用
    this.setData({
      article_id: options.id
    })
    //第一次点击收藏时
    //iscollects是存取数据的集合
    var iscollects = wx.getStorageSync("iscollects");
    //若存在本地存储
    if(iscollects)
    {
      //iscollect是单条数据
      var iscollect = iscollects[this.data.article_id];
      this.setData({
        collection:iscollect
      })
    }
    //不存在存储时
    else{
      //第一次进入，不存在数据
      var iscollects={};
      iscollects[this.data.article_id]=false;
      var iscollect = iscollects[this.data.article_id];
      wx.setStorageSync("iscollects", iscollects);
      this.setData({
        collection:iscollect
      })
    }

  },
//此函数用来进行收藏和取消收藏（不是第一次点击）
  collec_article:function(event){
    //iscollects是所有存储数据的集合
    var iscollects = wx.getStorageSync("iscollects");
    //iscollect是单条数据
    var iscollect = iscollects[this.data.article_id];
    //取反，收藏边取消，未收藏变收藏
    iscollect = !iscollect;
    iscollects[this.data.article_id] = iscollect;
    //存到本地存储
    wx.setStorageSync("iscollects", iscollects);
    this.setData({
      collection:iscollect
    })
  },

 

这篇文章主要是微信的的storage系列API的用法，代码除了option.id的部分，其余部分完整，option.id可以参考我的上一篇博客：

https://blog.csdn.net/qq_26658517/article/details/89643078