uniapp本地存储

小鱼儿 2023-02-26 10:22 19阅读 0赞

# uniapp本地存储 #

> vue的本地存储方式, 小程序在浏览器测试时也可以实现, 但是在真机运行时不能实现

### 文章目录 ###

*  uniapp本地存储
 *   *  一. 存储
     *  二. 获取
     *  三. 移除

## 一. 存储 ##

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>

*  示例

uni.setStorage({ 
        key:"token",
        data:'123456789',
        success: function (){ 
            console.log("存储成功")
        }
    })

1.  uni.setStorageSync(KEY, DATA)

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

try{ 
        uni.setStorageSync('token', '123456')
    } catch (e){ 
        //错误
    }

## 二. 获取 ##

1.  uni.getStorage(OBJECT)

> 从本地存储中异步获取对应可以对应的内容

uni.getStorage({ 
        key:"token",
        success: function(res){ 
            console.log(res.data); //123456789
        }
    })

1.  uni.getStorageSync(KEY)

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

try { 
        const value = uni.getStorageSync("token");
        if(value) { 
            console.log(value)
        }
    } catch(e){ 
        //错误
    }

1.  uni.getStorageInfo(OBJECT)

> 异步获取当前Storage的相关信息

*  success 返回参数说明

<table> 
 <thead> 
  <tr> 
   <th align="left">参数</th> 
   <th align="left">类型</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">keys</td> 
   <td align="left">Array＜String＞</td> 
   <td align="left">当前 storage 中所有的 key</td> 
  </tr> 
  <tr> 
   <td align="left">currentSize</td> 
   <td align="left">Number</td> 
   <td align="left">当前占用的空间大小, 单位：kb</td> 
  </tr> 
  <tr> 
   <td align="left">limitSize</td> 
   <td align="left">Number</td> 
   <td align="left">限制的空间大小, 单位：kb</td> 
  </tr> 
 </tbody> 
</table>

uni.getStorageInfo({ 
        success: function(res) { 
            console.log(res.keys);
            console.log(res.currentSize);
            console.log(res.limitSize);
        }
    })

1.  uni.getStorageInfoSync()

> 同步获取当前storage的相关信息

try { 
        const res = uni.getStorageInfoSync();
        console.log(res.keys);
        console.log(res.currentSize);
        console.log(res.limitSize);
    } catch (e) { 
        // 错误
    }

## 三. 移除 ##

1.  uni.removeStorage(OBJECT)

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

uni.removeStorage({ 
        key:'token',
        success: function(res){ 
            console.log('删除成功')
        }
    })

1.  uni.removeStorageSync(KEY)

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

try { 
        uni.removeStorageSync('storage_key')
    } catch(e){ 
        //错误
    }

1.  uni.clearStorage()

> 清除本地缓存

uni.clearStorage();

1.  uni.clearStorageSync()

> 同步清理本地数据缓存