zoukankan      html  css  js  c++  java
  • uni-app 之 数据缓存

    uni-app 之 数据缓存

      铛铛铛~~~之前有写过一个navagator路由的博客,今天就分享一下关于数据缓存的把

      1.uni.setStorage(OBJECT) 与 uni.getStorage(OBJECT)    这两个是异步缓存,简单说就是将数据放到本地缓存指定的key中,一个存一个取罢了

        uni.setStorage(OBJECT) :将数据缓存在本地缓存中指定的key中,会覆盖掉原来该key中的内容,这是一个异步接口。(

            参数名      类型         是否必填    说明

            key        String        是        本地缓存中的指定的 key

            data       Object/String   是        需要存储的内容

            success     Function       否       接口调用成功的回调函数

            fail       Function       否       接口调用失败的回调函数

            complete    Function      否        接口调用结束的回调函数(调用成功、失败都会执行)

         )

        uni.getStorage(OBJECT) : 从本地缓存中异步获取指定key对应的内容(

                      参数名       类型       是否必填     说明

              key          String      是         本地缓存中的指定的key

              success       Function     是         接口调用的回调函数res = {data: key对应的内容}

              fail         Function     否         接口调用失败的回调函数

              complete       Function     否         接口调用结束的回调函数(调用成功、失败都会执行)

        )

         那个例子跟大伙说一下,最近公司做项目,涉及到了一个存放地址的, 将地址的信息缓存到本地指定的URL 这个key中 进行存数据与取数据的操作,废话不多说,上代码~~

    //这是我定义的url    
    let url = `/pages/newHouse/NewHouseDetail?id=${id}`
    
    //URL具体数据
    console.log(url)      //  /pages/newHouse/NewHouseDetail?id=43
    

     下一步进行将数据缓存在本地 

    //这是我设置的缓存信息    将url数据缓存到本地
    uni.setStorage({
    	key: 'url_key',             ------ key的名称是 url  
    	data: url,                 ------ data中存放的是我的url地址
    	success: function () {          ------ 成功之后的回调函数   uni.navigateTo我要跳转的页面

              console.log(1111) ------ 缓存成功 打印1111并且跳转页面 // 存储成功后跳转房源详情页 uni.navigateTo({ url }) } })

     下一步读取缓存在本地数据

    uni.getStorage({
    	key: 'url_key',
    	success: function (res) {
    		console.log('这是获取key中的内容',res)	
    	}
    })                         //这是获取key中的内容 {data: "/pages/newHouse/NewHouseDetail?id=41", errMsg: "getStorage:ok"}
    

      绿色标记为我在本地缓存中获取到的数据,res.data 就是我们需要的url地址了,如果需要直接获取就可以了,这一步骤就给大家展示了uni.setStorage(OBJECT) 与 uni.getStorage(OBJECT)  整体过程

    2.uni.setStorageStnc(KEY,DATA) 与 uni.getStorage(KEY)    其实这个跟第一个基本上是没有区别的,只不过是一个异步一个同步罢了,参数说明及写法展示给大家

      uni.setStorageStnc(KEY,DATA)     将data存储在本地缓存中个指定的key中,会覆盖相同key中对应的内容,这是一个同步接口 

            参数名      类型         是否必填    说明

            key        String        是        本地缓存中的指定的 key

            data       Any         是        需要存储的内容,只支持原生类型、及能够通过 JSON.stringify 序列化的对象

        还是以地址url为例,以上个例子为基础来说  

         uni.setStorageSync('url_key', 'url');     将我的url信息存放到 url_key 中

       uni.getStorageStnc(KEY)     从本地缓存中同步获取指定 key 对应的内容。

            参数名      类型         是否必填    说明

            key        String        是        本地缓存中的指定的 key

        获取同步的缓存key中地址信息         

        const value = uni.getStorageSync('url_key');    //将我从key中获取的信息赋值给value
    

    3.uni.removeStorage(OBJECT) 与 uni.removeStorageSync(KEY)   这两个都是从本地缓存中移除指定的key   与上面的也是一样样样的~~~   前面是异步的后面是同步的     异步为例~~~~

    uni.getStorage({
    	key:'url',
    	success:function(res){
    		console.log(res)                    ------打印异步中获取的信息
    		uni.removeStorage({
    			key:'url',
    			success:function() {
    				console.log(' 移除成功')      -----获取成功后移除key 中的内容
    		        }
    		})
    	}
    })        
    

          这是我打印出来的数据   通过了一个点击事件,这是显示我移除成功了,然后的~~~~等等等  等你在点击的时候会发现他并不打印了   也许你会因此疑惑  那是因为我已经将这个key所对应的数据移除了呀,所以当然是什么都不打印的啦~~~

    4.uni.clearStorage() 与 uni.clearStorageSync()   这两个都是清理本地数据的缓存    当然啦  还是一个异步一个同步的    这个跟上一个其实是一样的   就是说这个吧 emmmmm   清除了你所有的本地数据   上一个只是清除了你本地指定key中的内容

            写法就是直接emmmm 写!!!    uni.clearStorage()和uni.clearStorageSync()     哈哈哈哈哈

    我要是呢,写的不好,写的不足,还希望大家指出,相信我,我会改正的 !!嗯嗯嗯嗯嗯

  • 相关阅读:
    IOS Charles(代理服务器软件,可以用来拦截网络请求)
    Javascript中addEventListener和attachEvent的区别
    MVC中实现Area几种方法
    Entity Framework Code First 中使用 Fluent API 笔记。
    自定义JsonResult解决 序列化类型 System.Data.Entity.DynamicProxies 的对象时检测到循环引用
    序列化类型 System.Data.Entity.DynamicProxies 的对象时检测到循环引用
    An entity object cannot be referenced by multiple instances of IEntityChangeTracker 的解决方案
    Code First :使用Entity. Framework编程(8) ----转发 收藏
    Code First :使用Entity. Framework编程(6) ----转发 收藏
    Code First :使用Entity. Framework编程(5) ----转发 收藏
  • 原文地址:https://www.cnblogs.com/gongliying/p/11134499.html
Copyright © 2011-2022 走看看