uniapp - 数据缓存

痛定思痛。 2021-07-25 11:37 622阅读 0赞

### uniapp 中的数据缓存 ###

*  一. 将数据存储在本地缓存
 *   *  1. uni.setStorage(OBJECT)
     *  2. uni.setStorageSync(KEY,DATA)
 *  二. 获取本地缓存方法
 *   *  1. uni.getStorage(OBJECT)
     *  2. uni.getStorageSync(KEY)
 *  三. 移除本地缓存数据
 *   *  1. uni.removeStorage(OBJECT)
     *  2. uni.removeStorageSync(KEY)

> 数据缓存推荐使用 `Sync` 同步缓存，更多缓存方法请查看 uniapp 官网：[https://uniapp.dcloud.io/api/storage/storage?id=setstorage][https_uniapp.dcloud.io_api_storage_storage_id_setstorage]

# 一. 将数据存储在本地缓存 #

## 1. uni.setStorage(OBJECT) ##

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

**OBJECT 参数说明**

<table> 
 <thead> 
  <tr> 
   <th align="left">参数名</th> 
   <th align="left">类型</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">key</td> 
   <td align="left">String</td> 
   <td align="left">是</td> 
   <td align="left">本地缓存中的指定的 key</td> 
  </tr> 
  <tr> 
   <td align="left">data</td> 
   <td align="left">Any</td> 
   <td align="left">是</td> 
   <td align="left">需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象</td> 
  </tr> 
  <tr> 
   <td align="left">success</td> 
   <td align="left">Function</td> 
   <td align="left">否</td> 
   <td align="left">接口调用成功的回调函数</td> 
  </tr> 
  <tr> 
   <td align="left">fail</td> 
   <td align="left">Function</td> 
   <td align="left">否</td> 
   <td align="left">接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td align="left">complete</td> 
   <td align="left">Function</td> 
   <td align="left">否</td> 
   <td align="left">接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

**示例：**

<template>
    	<view>
    		<button @click="setStorage">存储数据</button>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { }
    		},
    		methods: { 
    			setStorage() { 
    				uni.setStorage({ 
    					key: 'id',
    					data: 10,
    					success() { 
    						console.log("存储成功")
    					}
    				})
    			}
    		},
    	}
    </script>
    
    <style>
    </style>

## 2. uni.setStorageSync(KEY,DATA) ##

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

**参数说明**

**示例：**

<template>
    	<view>
    		<button @click="setStorage">存储数据</button>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { }
    		},
    		methods: { 
    			setStorage() { 
    				uni.setStorageSync('id',10)
    			}
    		},
    	}
    </script>
    
    <style>
    </style>

# 二. 获取本地缓存方法 #

## 1. uni.getStorage(OBJECT) ##

从本地缓存中异步获取指定 key 对应的内容。

**OBJECT 参数说明**

<table> 
 <thead> 
  <tr> 
   <th align="left">参数名</th> 
   <th align="left">类型</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">key</td> 
   <td align="left">String</td> 
   <td align="left">是</td> 
   <td align="left">本地缓存中的指定的 key</td> 
  </tr> 
  <tr> 
   <td align="left">success</td> 
   <td align="left">Function</td> 
   <td align="left">是</td> 
   <td align="left">接口调用的回调函数，res = {data: key对应的内容}</td> 
  </tr> 
  <tr> 
   <td align="left">fail</td> 
   <td align="left">Function</td> 
   <td align="left">否</td> 
   <td align="left">接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td align="left">complete</td> 
   <td align="left">Function</td> 
   <td align="left">否</td> 
   <td align="left">接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

**success 返回参数说明**

<table> 
 <thead> 
  <tr> 
   <th align="left">参数名</th> 
   <th align="left">类型</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">data</td> 
   <td align="left">Any</td> 
   <td align="left">key 对应的内容</td> 
  </tr> 
 </tbody> 
</table>

**示例**

<template>
    	<view>
    		<button @click="getStorage">获取数据</button>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { }
    		},
    		methods: { 
    			getStorage(){ 
    				uni.getStorage({ 
    					key:'id',
    					success(res){ 
    						console.log('获取成功',res)
    					}
    				})
    			}
    		},
    	}
    </script>
    
    <style>
    </style>

## 2. uni.getStorageSync(KEY) ##

从本地缓存中同步获取指定 key 对应的内容。

**参数说明**

**示例**

<template>
    	<view>
    		<button @click="getStorage">获取数据</button>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { }
    		},
    		methods: { 
    			getStorage(){ 
    				const res = uni.getStorageSync('id')
    				console.log(res)
    			}
    		},
    	}
    </script>
    
    <style>
    </style>

# 三. 移除本地缓存数据 #

## 1. uni.removeStorage(OBJECT) ##

从本地缓存中异步移除指定 key。

**OBJECT 参数说明**

<table> 
 <thead> 
  <tr> 
   <th align="left">参数名</th> 
   <th align="left">类型</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">key</td> 
   <td align="left">String</td> 
   <td align="left">是</td> 
   <td align="left">本地缓存中的指定的 key</td> 
  </tr> 
  <tr> 
   <td align="left">success</td> 
   <td align="left">Function</td> 
   <td align="left">是</td> 
   <td align="left">接口调用的回调函数</td> 
  </tr> 
  <tr> 
   <td align="left">fail</td> 
   <td align="left">Function</td> 
   <td align="left">否</td> 
   <td align="left">接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td align="left">complete</td> 
   <td align="left">Function</td> 
   <td align="left">否</td> 
   <td align="left">接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

**示例**

<template>
    	<view>
    		<button @click="removeStorage">移除数据</button>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { }
    		},
    		methods: { 
    			removeStorage(){ 
    				uni.removeStorage({ 
    					key:'id',
    					success() { 
    						console.log('删除成功')
    					}
    				})
    			}
    		},
    	}
    </script>
    
    <style>
    </style>

## 2. uni.removeStorageSync(KEY) ##

从本地缓存中同步移除指定 key。

**参数说明**

**示例**

<template>
    	<view>
    		<button @click="removeStorage">移除数据</button>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { }
    		},
    		methods: { 
    			removeStorage(){ 
    				uni.removeStorageSync('id')
    			}
    		},
    	}
    </script>
    
    <style>
    </style>

[https_uniapp.dcloud.io_api_storage_storage_id_setstorage]: https://uniapp.dcloud.io/api/storage/storage?id=setstorage