【微信小程序】本地数据缓存

读写本地数据缓存

• wx.setStorage()
• wx.getStorage()
• wx.setStorageSync()
• wx.getStorageSync()

<!-- index.wxml -->
<view class="container">
    <text>hello world</text>
</view>

/* index.wxss */
.container{
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: lightgoldenrodyellow;
}

//app.js
App({
    onLaunch:function(){
        wx.setStorage({
            key:"foo",
            data:"hello",
            success:function(){
                console.log("store data successfully")
            },
            fail:function(){
                console.log("store data failed")
            }
        })
        
        try{
            wx.setStorageSync("bar","world");
            console.log("sync store data successfully");
        }catch(e){
            console.log("sync store data failed");
        }
    }
})

// index.js
Page({
    onLoad:function(){
        wx.getStorage({
            key:"foo",
            success:function(res){
                console.log("get data successfully,the data is '"+res.data+"'");
            },
            fail:function(){
                console.log("get data failed");
            }
        });
        
        try{
            const res = wx.getStorageSync("bar");
            console.log("sync get data successfully,the data is '"+res+"'");
        }catch(e){
            console.log("sync get data failed");
        }
    }
})

小程序的本次缓存保存在当前设备上，每个小程序的缓存空间上限是10M，一旦超过10M，用setStorage写缓存时会触发fail回调。

利用本地缓存提前渲染页面

代码目录

详细代码

前台

<!-- index.wxml -->
<view class="container">
    <view class="list">
        <view class="item" wx:for="{{list}}" wx:key="id">
            <view class="item-icon">
                <image src="{{item.imgUrl}}"/>
            </view>
            <view class="item-detail">
                <view class="title">{{item.title}}</view>
                <view class="description">{{item.description}}</view>
                <view class="price">
                    <text>￥</text><text>{{item.price}}</text><text>元/斤</text>
                </view>
                <view class="sales">
                    <text>已售</text><text>{{item.sales}}</text>
                </view>
            </view>
        </view>
    </view>
</view>

/* index.wxss */
.container{
    margin-top: 10px;
}
.list{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.item{
    display: flex;
    margin: 0 10px 8px 10px;
    align-items: center;
    width: 256px;
}
.item-icon{
    width: 256rpx;
    height: 256rpx;
    background-color: lightgoldenrodyellow;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 10px;
}
.item-icon image{
    width: 128rpx;
    height: 128rpx;
}
.title{
    font-size: 24px;
}
.description{
    font-size: 14px;
    color: gray;
}
.price{
    margin-top: 10px;
}
.price text:nth-of-type(1){
    color: red;
}
.price text:nth-of-type(2){
    font-size: 18px;
    color: red;
}
.price text:nth-of-type(3){
    font-size: 12px;
    margin-left: 3px;
}
.sales{
    margin-top: 10px;
    color: gray;
    font-size: 14px;
}

// index.js
Page({
    onLoad:function(){
        const self = this;
        var list = wx.getStorageSync("list");
        if(list){
            self.setData({
                list:list
            })
        }
        wx.request({
            url:"http://localhost:3000/list",
            success:function(res){
                if(res.statusCode === 200){
                    const {data} = res;
                    list = Object.keys(data).map(key => {
                        let temp = data[key];
                        let imgUrl = "./imgs/"+key+".png";
                        return {
                            id:key,
                            imgUrl:imgUrl,
                            title:temp.title,
                            description:temp.description,
                            price:temp.price,
                            sales:temp.sales
                        }
                    });
                    self.setData({
                        list:list
                    });
                    wx.setStorageSync("list",list);
                }
            }
        })
    }
})

后台

// server.js
const express = require("express");
const server = express();
const request = require("request");
const list = {
    "apple":{
        title:"苹果",
        description:"又大又红的苹果",
        price:7.99,
        sales:"1000+"
    },
    "banana":{
        title:"香蕉",
        description:"好吃又便宜的香蕉",
        price:1.49,
        sales:"2000+"
    },
    "watermelon":{
        title:"西瓜",
        description:"又大又甜的西瓜",
        price:1.99,
        sales:"5000+"
    },
    "orange":{
        title:"橙子",
        description:"汁多肉厚的橙子",
        price:6.99,
        sales:"3000+"
    }
}
server.use("/list",function(req,res){
    res.set("Content-Type","application/json");
    res.end(JSON.stringify(list));

})
server.use("/",function(req,res){
    res.end("<h1>hello world</h1>");
})

server.listen(3000,function(){
    console.log("listening on *:3000");
})

node server.js启动服务器，http://localhost:3000。

好吧，缓存优势不明显，因为图片加载消耗了多个http请求。

利用本地缓存持久化SessionId

通常，用户没有主动退出登录前，SessionId会在内存中保存一段时间，这段时间里用户依然是登录状态，因此再回到小程序时无需输入账号和密码。
如果用户关闭小程序后再重返小程序，这时SessionId已经失效，因此需要重新输入账号和密码。
本次我们使用方案2实现微信登录，并使用本地缓存保存会话密钥，即session_key。

<!-- index.wxml -->
<view>
    <button bind:tap="handleLogin">Login</button>
</view>

//app.js
App({
    onLaunch:function(){
        const sessionKey = wx.getStorageSync("sessionKey");
        console.log(sessionKey);
    }
})

// index.js
const app = getApp();
Page({
    handleLogin:function(){
        wx.login({
            success:function(res){
                const {code} = res;
                wx.request({
                    url:"https://api.weixin.qq.com/sns/jscode2session?appid=**********&secret=**********&js_code="+code,
                    data:{
                        code:code
                    },
                    success:function(res){
                        const {session_key} = res.data;
                        wx.setStorageSync("sessionKey",session_key);
                    }
                })
            }
        })
    }
})