首页 › uni-app论坛 › uni-app 数据缓存

胡笳 發表於 2021-3-17 14:59:00

uni-app 数据缓存

<h2 id="unisetstorageobject">uni.setStorage(OBJECT)</h2>
<p>将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。</p>
<p><strong>OBJECT 参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">参数名</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">key</td>
<td style="text-align: left">String</td>
<td style="text-align: left">是</td>
<td style="text-align: left">本地缓存中的指定的 key</td>
</tr>
<tr>
<td style="text-align: left">data</td>
<td style="text-align: left">Any</td>
<td style="text-align: left">是</td>
<td style="text-align: left">需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象</td>
</tr>
<tr>
<td style="text-align: left">success</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用成功的回调函数</td>
</tr>
<tr>
<td style="text-align: left">fail</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用失败的回调函数</td>
</tr>
<tr>
<td style="text-align: left">complete</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用结束的回调函数（调用成功、失败都会执行）</td>
</tr>
</tbody>
</table>
<p><strong>示例</strong></p>
<pre><code class="language-javascript">uni.setStorage({
    key: 'storage_key',
    data: 'hello',
    success: function () {
      console.log('success');
    }
});
</code></pre>
<h2 id="unisetstoragesynckeydata">uni.setStorageSync(KEY,DATA)</h2>
<p>将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。</p>
<p><strong>参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">参数</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">key</td>
<td style="text-align: left">String</td>
<td style="text-align: left">是</td>
<td style="text-align: left">本地缓存中的指定的 key</td>
</tr>
<tr>
<td style="text-align: left">data</td>
<td style="text-align: left">Any</td>
<td style="text-align: left">是</td>
<td style="text-align: left">需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象</td>
</tr>
</tbody>
</table>
<pre><code class="language-javascript">try {
    uni.setStorageSync('storage_key', 'hello');
} catch (e) {
    // error
}
</code></pre>
<h2 id="unigetstorageobject">uni.getStorage(OBJECT)</h2>
<p>从本地缓存中异步获取指定 key 对应的内容。</p>
<p><strong>OBJECT 参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">参数名</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">key</td>
<td style="text-align: left">String</td>
<td style="text-align: left">是</td>
<td style="text-align: left">本地缓存中的指定的 key</td>
</tr>
<tr>
<td style="text-align: left">success</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">是</td>
<td style="text-align: left">接口调用的回调函数，res =</td>
</tr>
<tr>
<td style="text-align: left">fail</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用失败的回调函数</td>
</tr>
<tr>
<td style="text-align: left">complete</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用结束的回调函数（调用成功、失败都会执行）</td>
</tr>
</tbody>
</table>
<p><strong>success 返回参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">参数</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">data</td>
<td style="text-align: left">Any</td>
<td style="text-align: left">key 对应的内容</td>
</tr>
</tbody>
</table>
<p><strong>示例</strong></p>
<pre><code class="language-javascript">uni.getStorage({
    key: 'storage_key',
    success: function (res) {
      console.log(res.data);
    }
});
</code></pre>
<h2 id="unigetstoragesynckey">uni.getStorageSync(KEY)</h2>
<p>从本地缓存中同步获取指定 key 对应的内容。</p>
<p><strong>参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">参数</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">key</td>
<td style="text-align: left">String</td>
<td style="text-align: left">是</td>
<td style="text-align: left">本地缓存中的指定的 key</td>
</tr>
</tbody>
</table>
<p><strong>示例</strong></p>
<pre><code class="language-javascript">try {
    const value = uni.getStorageSync('storage_key');
    if (value) {
      console.log(value);
    }
} catch (e) {
    // error
}
</code></pre>
<h2 id="unigetstorageinfoobject">uni.getStorageInfo(OBJECT)</h2>
<p>异步获取当前 storage 的相关信息。</p>
<p><strong>平台差异说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: center">App</th>
<th style="text-align: center">H5</th>
<th style="text-align: center">微信小程序</th>
<th style="text-align: center">支付宝小程序</th>
<th style="text-align: center">百度小程序</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">HBuilderX 2.0.3+</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
</tr>
</tbody>
</table>
<p><strong>OBJECT 参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">参数名</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">success</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">是</td>
<td style="text-align: left">接口调用的回调函数，详见返回参数说明</td>
</tr>
<tr>
<td style="text-align: left">fail</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用失败的回调函数</td>
</tr>
<tr>
<td style="text-align: left">complete</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用结束的回调函数（调用成功、失败都会执行）</td>
</tr>
</tbody>
</table>
<p><strong>success 返回参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">参数</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">keys</td>
<td style="text-align: left">Array＜String＞</td>
<td style="text-align: left">当前 storage 中所有的 key</td>
</tr>
<tr>
<td style="text-align: left">currentSize</td>
<td style="text-align: left">Number</td>
<td style="text-align: left">当前占用的空间大小, 单位：kb</td>
</tr>
<tr>
<td style="text-align: left">limitSize</td>
<td style="text-align: left">Number</td>
<td style="text-align: left">限制的空间大小, 单位：kb</td>
</tr>
</tbody>
</table>
<p><strong>示例</strong></p>
<pre><code class="language-javascript">uni.getStorageInfo({
    success: function (res) {
      console.log(res.keys);
      console.log(res.currentSize);
      console.log(res.limitSize);
    }
});
</code></pre>
<h2 id="unigetstorageinfosync">uni.getStorageInfoSync()</h2>
<p>同步获取当前 storage 的相关信息。</p>
<p><strong>平台差异说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: center">App</th>
<th style="text-align: center">H5</th>
<th style="text-align: center">微信小程序</th>
<th style="text-align: center">支付宝小程序</th>
<th style="text-align: center">百度小程序</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">HBuilderX 2.0.3+</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
<td style="text-align: center">√</td>
</tr>
</tbody>
</table>
<p><strong>示例</strong></p>
<pre><code class="language-javascript">try {
    const res = uni.getStorageInfoSync();
    console.log(res.keys);
    console.log(res.currentSize);
    console.log(res.limitSize);
} catch (e) {
    // error
}
</code></pre>
<h2 id="uniremovestorageobject">uni.removeStorage(OBJECT)</h2>
<p>从本地缓存中异步移除指定 key。</p>
<p><strong>OBJECT 参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">参数名</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">key</td>
<td style="text-align: left">String</td>
<td style="text-align: left">是</td>
<td style="text-align: left">本地缓存中的指定的 key</td>
</tr>
<tr>
<td style="text-align: left">success</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">是</td>
<td style="text-align: left">接口调用的回调函数</td>
</tr>
<tr>
<td style="text-align: left">fail</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用失败的回调函数</td>
</tr>
<tr>
<td style="text-align: left">complete</td>
<td style="text-align: left">Function</td>
<td style="text-align: left">否</td>
<td style="text-align: left">接口调用结束的回调函数（调用成功、失败都会执行）</td>
</tr>
</tbody>
</table>
<p><strong>示例</strong></p>
<pre><code class="language-javascript">uni.removeStorage({
    key: 'storage_key',
    success: function (res) {
      console.log('success');
    }
});
</code></pre>
<h2 id="uniremovestoragesynckey">uni.removeStorageSync(KEY)</h2>
<p>从本地缓存中同步移除指定 key。</p>
<p><strong>参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">参数名</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">key</td>
<td style="text-align: left">String</td>
<td style="text-align: left">是</td>
<td style="text-align: left">本地缓存中的指定的 key</td>
</tr>
</tbody>
</table>
<p><strong>示例</strong></p>
<pre><code class="language-javascript">try {
    uni.removeStorageSync('storage_key');
} catch (e) {
    // error
}
</code></pre>
<h2 id="uniclearstorage">uni.clearStorage()</h2>
<p>清理本地数据缓存。</p>
<p><strong>示例</strong></p>
<pre><code class="language-javascript">uni.clearStorage();
</code></pre>
<h2 id="uniclearstoragesync">uni.clearStorageSync()</h2>
<p>同步清理本地数据缓存。</p>
<p><strong>示例</strong></p>
<pre><code class="language-javascript">try {
    uni.clearStorageSync();
} catch (e) {
    // error
}
</code></pre>
<p><strong>注意</strong></p>
<p>uni-app的Storage在不同端的实现不同：</p>
<ul>
<li>H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理</li>
<li>App端为原生的plus.storage，无大小限制，不是缓存，是持久化的</li>
<li>各个小程序端为其自带的storage api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。</li>
<li>微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。</li>
<li>支付宝小程序单条数据转换成字符串后，字符串长度最大200*1024。同一个支付宝用户，同一个小程序缓存总上限为10MB。</li>
<li>百度、字节跳动小程序文档未说明大小限制</li>
<li>非App平台清空Storage会导致uni.getSystemInfo获取到的deviceId改变</li>
</ul>
<p>除此之外，其他数据存储方案：</p>
<ul>
<li>H5端还支持websql、indexedDB、sessionStorage</li>
<li>App端还支持SQLite、IO文件等本地存储方案。</li>
</ul>
<h2 id="使用示例存取删">使用示例：存，取，删</h2>
<pre><code>&lt;template&gt;
        &lt;view&gt;
                &lt;button type="primary" @click="setStorage"&gt;存储数据&lt;/button&gt;
                &lt;button type="primary" @click="getStorage"&gt;获取数据&lt;/button&gt;
                &lt;button type="primary" @click="removeId"&gt;移除id&lt;/button&gt;
        &lt;/view&gt;
&lt;/template&gt;

&lt;script&gt;
        export default {
                methods: {
                       
                        setStorage () {
                                //同步
                                /* uni.setStorage({
                                        key: 'id',
                                        data: 80,
                                        success () {
                                                console.log('存储成功')
                                        }
                                }) */
                                //异步
                                uni.setStorageSync('id',100)
                        },
                       
                        getStorage () {
                                //同步
                                /* uni.getStorage({
                                        key: "id",
                                        success(res){
                                                console.log('获取成功',res.data)
                                        }
                                }) */
                                const res = uni.getStorageSync('id')
                                console.log(res)
                        },
                       
                        removeId () {
                                //同步
                                /* uni.removeStorage({
                                        key: 'id',
                                        success(){
                                                console.log('删除成功')
                                        }
                                }) */
                                //异步
                                uni.removeStorageSync('id')
                        }
                }
        }
&lt;/script&gt;
&lt;style&gt;
&lt;/style&gt;
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210317145830385-162789758.png" alt="image-20210317145633274" loading="lazy"></p>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210317145830354-1012608036.png" alt="image-20210317145658448" loading="lazy"></p>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210317145830355-8255934.png" alt="image-20210317145723461" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/makalochen/p/14549408.html

查看完整版本: uni-app 数据缓存