2.2 缓存本地数据

通常，首次进入小程序应用时，会展示全屏图片滑动，第二次进入时则不再展示，本节就来实现这个功能。

2.2.1 使用wx.setStorage接口

接口wx.setStorage用于从本地缓存中异步获取指定key所对应的内容。其与接口wx.getStorage相对应。

在文档树中打开app.json文件，将pages/douban/index调整为首页。

打开pages/index/index.js源码，修改onLoad函数，代码如下：

    onLoad(options) {
        wx.getStorage({
            key: 'has_shown_splash',
            fail: err => {
                wx.redirectTo({
                    url: '/pages/douban/splash',
                })
            }
        })
    }

其中，wx.redirectTo是页面跳转接口，用于从当前页面跳转至pages/douban/splash页面。

打开pages/douban/splash.js源码，在onLoad末尾添加如下代码：

    wx.setStorage({
        key: "has_shown_splash",
        data: true
    })

这里的has_shown_splash是键名，必须与pages/index/index.js中的代码保持一致。

2.2.2 使用Storage面板

按<Command+B>组合键（或<Ctrl+B>组合键）刷新项目，程序首先会进入pages/douban/index，随后会跳转到pages/douban/splash页面。再次刷新，本地已有记忆，因此不会再看到splash页面。那么该功能是如何实现的呢？下面一起来看一下。

在调试工具区域，打开Storage面板，如图2-12所示。

从这个面板中可以看到本地缓存中保存的所有数据，包括保存在pages/douban/splash页面的has_shown_splash变量，这就是本地已有的记忆数据。

若单击“删除”按钮，再按<Command+B>组合键（或<Ctrl+B>组合键）刷新项目，就又可以看到splash全屏图片滑动的效果了。

has_shown_splash变量上面的一行是quick start项目默认生成的代码所记录的缓存，相关代码在pages/logs/logs.js中。

2.2.3 省略function关键字

在快捷方法自动生成的页面js代码中，onLoad函数默认是这样的：

    onLoad: function (options) {
    }

而笔者声明的onLoad是这样的：

    onLoad(options) {
    }

两者的不同之处在于，笔者的声明没有使用function关键字。

笔者使用的是ES6语法，使用ES6语法不仅可以减少键盘作业，还可以在匿名函数内部使用this关键字。如下所示，方法then接受的参数即为匿名函数：

    app.request("https://api.douban.com/v2/movie/coming_soon? start=0&count=3").then(
        data => {
            this.setData({ subjects: data.subjects })
        }
    )

其中，data => {}是一个ES6语法声明的匿名函数。data是匿名函数的形参。旧式写法是这样的：

    onLoad(options) {
        let app = getApp()
        let that = this
        app. request("https://api.douban.com/v2/movie/coming_soon? start=0&count=3").
            then(
            function(data) {
                that.setData({ subjects: data.subjects })
            }
        )
    }

如上述代码所示，如果不使用ES6语法，则需要先于匿名函数之外声明一个that变量指向this，才能在匿名函数内部访问真正的this对象。

在匿名函数内部直接使用this对象，将无法调用其setData方法。匿名函数内部的this对象，并不是当前页面的Page对象。读者可以自行测试一下。