uni-app 之数据缓存

饰演者 發表於 2019-7-5 20:45:00

uni-app 之数据缓存
　　铛铛铛~~~之前有写过一个navagator路由的博客，今天就分享一下关于数据缓存的把
　　1.uni.setStorage(OBJECT) 与 uni.getStorage(OBJECT)    这两个是异步缓存，简单说就是将数据放到本地缓存指定的key中，一个存一个取罢了
　　　　uni.setStorage(OBJECT) ：将数据缓存在本地缓存中指定的key中，会覆盖掉原来该key中的内容，这是一个异步接口。（
　　　　　　　　<code class="ಠhighlight-container">参数名      类型         是否必填    说明</code>
<code class="ಠhighlight-container">　　　　　　　　key        String        是        本地缓存中的指定的 key </code>
<code class="ಠhighlight-container">　　　　　　　　data       Object/String   是        需要存储的内容 </code>
<code class="ಠhighlight-container">　　　　　　　　success     Function       否       接口调用成功的回调函数 </code>
<code class="ಠhighlight-container">　　　　　　　　fail       Function       否       接口调用失败的回调函数 </code>
<code class="ಠhighlight-container">　　　　　　　　complete　　  Function      否        接口调用结束的回调函数（调用成功、失败都会执行）</code>
　　　　　）
　　　　uni.getStorage(OBJECT) : 从本地缓存中异步获取指定key对应的内容（
　　　　              <code class="ಠhighlight-container">参数名       类型       是否必填     说明</code>
<code class="ಠhighlight-container">          key          String      是         本地缓存中的指定的</code><code class="ಠhighlight-container">key </code>
<code class="ಠhighlight-container">          success       Function     是         接口调用的回调函数</code><code class="ಠhighlight-container">res = {data: key对应的内容} </code>
<code class="ಠhighlight-container">          fail         Function     否         接口调用失败的回调函数 </code>
<code class="ಠhighlight-container">          complete       Function     否         接口调用结束的回调函数（调用成功、失败都会执行）</code>
　　　　）
 　　　　那个例子跟大伙说一下，最近公司做项目，涉及到了一个存放地址的，将地址的信息缓存到本地指定的URL 这个key中进行存数据与取数据的操作，废话不多说，上代码~~
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">//这是我定义的url
let url = `/pages/newHouse/NewHouseDetail?id=${id}`

//URL具体数据
console.log(url) ///pages/newHouse/NewHouseDetail?id=43
</pre>
</div>
　下一步进行将数据缓存在本地　
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">//这是我设置的缓存信息将url数据缓存到本地
uni.setStorage({
key: 'url_key',　　　　　　　　　　　　　------ key的名称是 url　　
data: url,　　　　　　　　　　　　　　　　 ------ data中存放的是我的url地址
success: function () {　　　　　　　　　 ------ 成功之后的回调函数 uni.navigateTo我要跳转的页面 　　　　　　　　　　console.log(1111) ------缓存成功打印1111并且跳转页面
// 存储成功后跳转房源详情页
uni.navigateTo({
url
})
}
})
</pre>
</div>
　下一步读取缓存在本地数据
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">uni.getStorage({
key: 'url_key',
success: function (res) {
console.log('这是获取key中的内容',res)
}
}) //这是获取key中的内容 {data: "/pages/newHouse/NewHouseDetail?id=41", errMsg: "getStorage:ok"}
</pre>
</div>
　　绿色标记为我在本地缓存中获取到的数据，res.data 就是我们需要的url地址了，如果需要直接获取就可以了，这一步骤就给大家展示了uni.setStorage(OBJECT) 与 uni.getStorage(OBJECT)  整体过程
2.uni.setStorageStnc(KEY，DATA) 与 uni.getStorage(KEY)    其实这个跟第一个基本上是没有区别的，只不过是一个异步一个同步罢了，参数说明及写法展示给大家
　　uni.setStorageStnc(KEY，DATA)     将data存储在本地缓存中个指定的key中，会覆盖相同key中对应的内容，这是一个同步接口　
<code class="ಠhighlight-container">　　　　　　　　参数名      类型         是否必填    说明</code>
<code class="ಠhighlight-container">　　　　　　　　key        String        是        本地缓存中的指定的 key</code>
<code class="ಠhighlight-container">　　　　　　　　data       Any         是        需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象</code>
　　　　还是以地址url为例，以上个例子为基础来说  
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"> 　　　　uni.setStorageSync('url_key', 'url'); 将我的url信息存放到 url_key 中</pre>
</div>
　　　uni.getStorageStnc(KEY)     从本地缓存中同步获取指定 key 对应的内容。
　　　　　　　　<code class="ಠhighlight-container">参数名      类型         是否必填    说明</code>
<code class="ಠhighlight-container">　　　　　　　　key        String        是        本地缓存中的指定的 key</code>
　　　　获取同步的缓存key中地址信息         
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">　　　　const value = uni.getStorageSync('url_key'); //将我从key中获取的信息赋值给value
</pre>
</div>
3.uni.removeStorage（OBJECT）与 uni.removeStorageSync（KEY）   这两个都是从本地缓存中移除指定的key   与上面的也是一样样样的~~~   前面是异步的后面是同步的     异步为例~~~~
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">uni.getStorage({
key:'url',
success:function(res){
console.log(res)　　　　　　　　　　　　　　　　　　　　------打印异步中获取的信息
uni.removeStorage({
key:'url',
success:function() {
console.log(' 移除成功')　　　　　　-----获取成功后移除key 中的内容
 }
})
}
})
</pre>
</div>
　　<img src="https://img2018.cnblogs.com/blog/1664944/201907/1664944-20190705203747358-1405413795.png">    这是我打印出来的数据   通过了一个点击事件，这是显示我移除成功了，然后的~~~~等等等  等你在点击的时候会发现他并不打印了   也许你会因此疑惑  那是因为我已经将这个key所对应的数据移除了呀，所以当然是什么都不打印的啦~~~
4.uni.clearStorage() 与 uni.clearStorageSync()   这两个都是清理本地数据的缓存    当然啦  还是一个异步一个同步的    这个跟上一个其实是一样的　　就是说这个吧 emmmmm   清除了你所有的本地数据   上一个只是清除了你本地指定key中的内容
        写法就是直接emmmm 写！！！    uni.clearStorage()和uni.clearStorageSync()     哈哈哈哈哈
我要是呢，写的不好，写的不足，还希望大家指出，相信我，我会改正的！！嗯嗯嗯嗯嗯 
来源：https://www.cnblogs.com/gongliying/p/11134499.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 之 数据缓存

uni-app 之数据缓存