影子伴我久孤独念我深 發表於 2023-12-17 23:50:00

【UniApp】-uni-app-数据缓存

<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231203181913926-1645304642.png" alt="" loading="lazy"></p>
<h1 id="前言">前言</h1>
<ul>
<li>好，经过上个章节的介绍完毕之后，给大家补充了一下 uni-app-数据传递的内容</li>
<li>那么补充了 uni-app-数据传递的内容之后，这篇文章来给大家介绍一下 uni-app-数据缓存</li>
</ul>
<h1 id="搭建项目">搭建项目</h1>
<ul>
<li>首先我们还是要先搭建一个项目，这里我就不多说了，大家可以参考上一篇文章</li>
<li>搭建好项目之后，我们就可以开始我们的正文了</li>
</ul>
<h1 id="步入正题">步入正题</h1>
<ul>
<li>首先我们先来看一下 uni-app-数据缓存的 API</li>
<li>官方文档：https://uniapp.dcloud.net.cn/api/storage/storage.html</li>
<li>介绍方向大致就是新增，获取，删除，清空，清空所有（分为异步与同步操作）</li>
</ul>
<h2 id="新增">新增</h2>
<ul>
<li>新增的话，我们可以通过 <code>uni.setStorage(OBJECT)</code> 来进行新增</li>
<li>新增的话，我们可以通过 <code>uni.setStorageSync(KEY,DATA)</code> 来进行新增</li>
<li>两者的区别就是一个是异步，一个是同步，带有 <code>Sync</code> 的就是同步的，不带有 <code>Sync</code> 的就是异步的</li>
<li>两者的参数不一样，一个是传递一个对象，一个是传递两个参数</li>
</ul>
<p>好了，下面我们来看一下具体的使用, 首先看同步，代码如下：</p>
<pre><code class="language-vue">&lt;template&gt;
        &lt;view&gt;
                &lt;text&gt;{{ name }}&lt;/text&gt;
                &lt;button type="primary" @click="add"&gt;新增&lt;/button&gt;
        &lt;/view&gt;
&lt;/template&gt;

&lt;script&gt;
        export default {
                data() {
                        return {
                                name: "BNTang"
                        }
                },
                onLoad() {},
                methods: {
                        add() {
                                try {
                                        uni.setStorageSync('name', 'king');
                                } catch (e) {
                                        // error
                                }
                        }
                }
        }
&lt;/script&gt;
</code></pre>
<p>运行测试效果：</p>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231217110540929-778854770.png" alt="" loading="lazy"></p>
<p>好了，下面我们来看一下异步，代码如下：</p>
<pre><code class="language-vue">add() {
    uni.setStorage({
      key: 'name',
      data: 'hello BNTang',
      success: function() {
            console.log('success');
      }
    });
}
</code></pre>
<p>运行测试效果：</p>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231217110707462-44653216.png" alt="" loading="lazy"></p>
<h2 id="获取">获取</h2>
<ul>
<li>获取的话，我们可以通过 <code>uni.getStorage(OBJECT)</code> 来进行获取</li>
<li>获取的话，我们可以通过 <code>uni.getStorageSync(KEY)</code> 来进行获取</li>
</ul>
<p>看一下具体的使用, 首先看同步，代码如下：</p>
<pre><code class="language-vue">&lt;button type="primary" @click="get"&gt;获取&lt;/button&gt;
</code></pre>
<pre><code class="language-vue">get() {
    try {
      this.name = uni.getStorageSync('name');
    } catch (e) {
      // error
    }
}
</code></pre>
<p>运行测试效果：</p>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231217111105955-1940036919.png" alt="" loading="lazy"></p>
<p>来看一下异步，代码如下：</p>
<pre><code class="language-vue">get() {
    const that = this
    uni.getStorage({
      key: 'name',
      success: function(res) {
            that.name = res.data
      }
    });
}
</code></pre>
<p>运行测试效果：</p>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231217111105955-1940036919.png" alt="" loading="lazy"></p>
<h2 id="删除">删除</h2>
<ul>
<li>删除的话，我们可以通过 <code>uni.removeStorage(OBJECT)</code> 来进行删除</li>
<li>删除的话，我们可以通过 <code>uni.removeStorageSync(KEY)</code> 来进行删除</li>
</ul>
<p>看一下具体的使用, 首先看同步，代码如下：</p>
<pre><code class="language-vue">&lt;button type="primary" @click="del"&gt;删除&lt;/button&gt;
</code></pre>
<pre><code class="language-vue">del() {
    try {
      uni.removeStorageSync('name');
    } catch (e) {
      // error
    }
}
</code></pre>
<p>运行测试效果：</p>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231217111632187-1005677547.png" alt="" loading="lazy"></p>
<p>点击删除按钮之后：</p>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231217111701886-1303511816.png" alt="" loading="lazy"></p>
<p>异步略过，大家可以自己去试一下。</p>
<h2 id="清空">清空</h2>
<ul>
<li>清空的话，我们可以通过 <code>uni.clearStorage()</code> 来进行清空</li>
<li>清空的话，我们可以通过 <code>uni.clearStorageSync()</code> 来进行清空</li>
</ul>
<p>看一下具体的使用, 首先看同步，代码如下：</p>
<pre><code class="language-vue">&lt;button type="primary" @click="clear"&gt;清空&lt;/button&gt;
</code></pre>
<pre><code class="language-vue">clear() {
    try {
      uni.clearStorageSync();
    } catch (e) {
      // error
    }
}
</code></pre>
<ul>
<li>运行测试效果，记得存储点进去之后，再点击清空按钮，这个就不上图片了，大家自己去试一下</li>
<li>异步略过，大家可以自己去试一下</li>
</ul>
<h1 id="getstorageinfo">getStorageInfo</h1>
<p>再给大家补充一个，getStorageInfo，这个 API 可以获取当前 storage 的相关信息，代码如下：</p>
<pre><code class="language-vue">&lt;button type="primary" @click="getStorageInfoFn"&gt;getStorageInfo&lt;/button&gt;
</code></pre>
<pre><code class="language-vue">getStorageInfoFn() {
    try {
      const res = uni.getStorageInfoSync();
      
      console.log(res);
      console.log(res.keys);
      console.log(res.currentSize);
      console.log(res.limitSize);
    } catch (e) {
      // error
    }
}
</code></pre>
<p>运行输出结果：</p>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231217112357913-180535410.png" alt="" loading="lazy"></p>
<ul>
<li>keys：当前 storage 中所有的 key</li>
<li>currentSize：当前占用的空间大小, 单位 kb</li>
<li>limitSize：限制的空间大小, 单位 kb</li>
<li>异步略过，大家可以自己去试一下</li>
</ul>
<blockquote>
<p>和 HTML5 的数据缓存是一样的都是放到 Storage 里面的</p>
</blockquote>
<h1 id="end">End</h1>
<ul>
<li>如果你有任何问题或建议，欢迎在下方留言，我会尽快回复</li>
<li>如果你觉得本文对你有帮助，欢迎点赞、收藏，你的支持是我写作的最大动力</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202311/2105804-20231129232539490-1458223711.png" alt="" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/BNTang/p/17910123.html
頁: [1]
查看完整版本: 【UniApp】-uni-app-数据缓存