uni-app数据缓存

首先uni-app提供的数据缓存Storage分四种模式:
一种是set(用于存储数据)、一种是get(用于获取数据)、一种是remove
(用于移除指定数据)、最后一种是clear(清除缓存数据)

然后区分:带Sync字段是同步的,没有带的是异步。

查看缓存数据的界面面板:

谷歌浏览器--开发者工具--Application--Storage--Local Storage


上面这个面板就是进行查看数据缓存相关信息的。


下面进行异步数据缓存展示,就是没带Sync字段的,顺序:先有set模式-->get模式-->remove模式-->clear模式(一般很少用)


首先准备三个按钮,分别对应上面的三个功能:存储数据、获取数据、移除数据

<view class="" >
            <button type="default" @tap="setStorage()">存储数据</button>
            <button type="primary" @tap="getStorage()">获取数据</button>
            <button type="warn" @tap="removeStorage()">移除数据</button>
</view>

方法定义:

methods: {
            setStorage:function(){//存储数据
                
            },
            getStorage:function(){//获取数据
                
            },
            removeStorage:function(){//移除数据
            
            }   
        }

功能实现:
(1)存储数据
uni.setStorage(OBJECT)

这个对象里面传入一个key和一个data,你可以理解为键值对的形式,然后一个回调函数success

setStorage:function(){//存储数据
                uni.setStorage({
                    key:"student",
                    data:{
                        name:'覃覃',
                        stu_id:1903010331,
                        class:'19计应3-3班',
                        age:22,
                        school:'sziit'
                    },
                    success:function(){
                        console.log('数据存储成功!')
                    }
                })
            },

当我们点击“存储数据”的这个按钮时,我们来到面板就会看到数据已经缓存成功呈现在面板上。而key为键,data为值。


(2)获取数据
uni.getStorage() 用于获取缓存的数据

这里的key对应setStorage的key,然后再success回调函数里面接受res返回数据的结果,控制台输出。

getStorage:function(){//获取数据
                uni.getStorage({
                    key:"student",
                    success:function(res){
                        console.log('获取数据成功',res)
                    }
                })
            },

(3)移除数据
一般用于移除整个数据。

removeStorage:function(){//移除数据
                uni.removeStorage({
                    key:'student',
                    success:function(){
                        console.log('移除数据成功!')
                    }
                })
            }

回到数据缓存的面板查看,发现key为"student"的字段已经完整移除。



同步和异步相比,同步操作数据更为方便,语句更为简洁,更为灵活。

带Sync的,不需要指定特定的键(key)和值(data)。

以setStorageSync(key,value)为例子,同步可以直接接受参数,第一个参时就是key键,第二个参数为value值。


将上面的例子改成同步,效果是一样的。

setStorage:function(){//存储数据
    const obj = {'name':'qfb','age':22}
    uni.setStorageSync('student',obj)
},

getStorage:function(){//获取数据
    const res = uni.getStorageSync('student')
    console.log(res)
},
removeStorage:function(){//移除数据
    uni.removeStorageSync('student')
}   

数据缓存:



获取数据:


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • uni-app 之 数据缓存 铛铛铛~~~之前有写过一个navagator路由的博客,今天就分享一下关于数据缓存的...
    家乡_a6ce阅读 4,332评论 0 0
  • uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...
    Neo_duan阅读 2,168评论 1 1
  • uniapp生命周期函数 应用生命周期: 页面生命周期: 设tabBar首页为A,tabBar其余两个页面为B,C...
    吃肉肉不吃肉肉阅读 1,067评论 1 1
  • 一、项目结构介绍 pages.json:配置页面路由、导航条、选项卡等页面类信息,详见。manifest.json...
    移动端_小刚哥阅读 2,956评论 0 4
  • 夜莺2517阅读 127,753评论 1 9