storage.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view class="page-scroll-view">
  <!-- #endif -->
    <view>
      <page-head :title="title"></page-head>
      <view class="uni-common-mt">
        <view class="uni-list">
          <view class="uni-list-cell uni-list-cell-line">
            <view class="uni-list-cell-left">
              <view class="uni-label">key</view>
            </view>
            <view class="uni-list-cell-db">
              <input class="uni-input" type="text" placeholder="请输入key" name="key" :value="key" @input="keyChange" />
            </view>
          </view>
          <view class="uni-list-cell">
            <view class="uni-list-cell-left">
              <view class="uni-label">value</view>
            </view>
            <view class="uni-list-cell-db">
              <input class="uni-input" type="text" placeholder="请输入value" name="data"
                :value="typeof data === 'string' ? data : JSON.stringify(data)" @input="dataChange" />
            </view>
          </view>
        </view>
        <view class="uni-padding-wrap">
          <view class="uni-btn-v">
            <button class="uni-btn btn-getStorageInfoASync" type="primary" @tap="getStorageInfo">
              获取存储概述信息-异步
            </button>
            <button class="uni-btn btn-getStorageInfoSync" @tap="getStorageInfoSync">
              获取存储概述信息-同步
            </button>
          </view>
          <text>{{ storageInfo }}</text>
          <view class="uni-flex uni-row">
            <button type="default" style="width:50%" @tap="strMock">
              填充字符串
            </button>
            <button type="default" style="width:50%" @tap="complexMock">
              填充复杂对象
            </button>
          </view>
          <view class="uni-flex uni-row">
            <button type="default" style="width:50%" @tap="numberMock">
              填充整型
            </button>
            <button type="default" style="width:50%" @tap="floatMock">
              填充浮点型
            </button>

          </view>
          <view class="uni-flex uni-row">
            <button type="default" style="width:100%" @tap="jsonLikeMock">
              填充符合json格式的字符串
            </button>
          </view>
        </view>
        <view class="uni-padding-wrap">
          <view class="uni-btn-v">
            <button type="primary" class="uni-btn btn-setstorageAsync" @tap="setStorage">
              存储数据-异步
            </button>
            <button class="uni-btn btn-getstorageAsync" @tap="getStorage">读取数据-异步</button>
            <button class="uni-btn btn-removeStorageInfoASync" @tap="removeStorage">移除数据-异步</button>
            <button class="uni-btn btn-clearStorageInfoASync" @tap="clearStorage">清理数据-异步</button>
          </view>

          <view class="uni-btn-v">
            <button type="primary" class="uni-btn btn-setstorageSync" @tap="setStorageSync">
              存储数据-同步
            </button>
            <button class="uni-btn btn-getstorageSync" @tap="getStorageSync">读取数据-同步</button>
            <button class="uni-btn btn-removeStorageInfoSync" @tap="removeStorageSync">
              移除数据-同步
            </button>
            <button class="uni-btn btn-clearStorageInfoSync" @tap="clearStorageSync">
              清理数据-同步
            </button>
          </view>
        </view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  export default {
    data() {
      return {
        title: 'get/set/clearStorage',
        key: '',
        data: '' as any,
        apiGetData: '' as any | null,
        storageInfo: '',
      }
    },
    methods: {
      getStorageInfo() {
        uni.getStorageInfo({
          success: (res) => {
            this.apiGetData = res
            this.storageInfo = JSON.stringify(res)
          },
        })
      },
      getStorageInfoSync() {
        try {
          const res = uni.getStorageInfoSync()
          this.apiGetData = res
          this.storageInfo = JSON.stringify(res)
        } catch (e) {
          // error
          console.log(e)
        }
      },
      jsonLikeMock() {
        this.key = 'key_' + Math.random()
        this.data = JSON.stringify({
          name: "james",
          age: 12,
          from: "american"
        });
      },
      strMock() {
        this.key = 'key_' + Math.random()
        this.data = '测试字符串数据，长度为16个字符'
      },
      complexMock() {
        this.key = 'key_' + Math.random()
        let jsonObj = {
          name: '张三',
          age: 12,
          classMate: [
            {
              id: 1001,
              name: '李四',
            },
            {
              id: 1002,
              name: 'jack ma',
            },
          ],
        }
        this.data = jsonObj
      },
      numberMock() {
        this.key = 'key_' + Math.random()
        this.data = 10011
      },
      floatMock() {
        this.key = 'key_' + Math.random()
        this.data = 3.1415926535893384626
      },

      keyChange: function (e : InputEvent) {
        this.key = e.detail.value
      },
      dataChange: function (e : InputEvent) {
        this.data = e.detail.value
      },
      getStorage: function () {
        var key = this.key
        if (key.length == 0) {
          uni.showModal({
            title: '读取数据失败',
            content: 'key 不能为空',
            showCancel: false,
          })
        } else {
          let that = this
          uni.getStorage({
            key: key,
            success: (res) => {

              that.apiGetData = res.data
              let desc : string = typeof this.apiGetData
              if ("object" == desc) {
                desc = desc + ": " + JSON.stringify(this.apiGetData)
              } else {
                desc = desc + ": " + this.apiGetData
              }

              uni.showModal({
                title: '读取数据成功',
                content: desc,
                showCancel: false,
              })
            },
            fail: () => {
              uni.showModal({
                title: '读取数据失败',
                content: '找不到 key 对应的数据',
                showCancel: false,
              })
            },
          })
        }
      },
      getStorageSync: function () {
        var key = this.key
        if (key.length == 0) {
          uni.showModal({
            title: '读取数据失败',
            content: 'key 不能为空',
            showCancel: false,
          })
        } else {
          this.apiGetData = uni.getStorageSync(key)

          let desc : string = typeof this.apiGetData
          if ("object" == desc) {
            desc = desc + ": " + JSON.stringify(this.apiGetData)
          } else {
            desc = desc + ": " + this.apiGetData
          }

          uni.showModal({
            title: '读取数据成功',
            content: desc,
            showCancel: false,
          })
        }
      },
      setStorage: function () {
        var key = this.key
        var data = this.data
        if (key.length == 0) {
          uni.showModal({
            title: '保存数据失败',
            content: 'key 不能为空',
            showCancel: false,
          })
        } else {
          uni.setStorage({
            key: key,
            data: data,
            success: () => {
              uni.showModal({
                title: '存储数据成功',
                showCancel: false,
              })
            },
            fail: () => {
              uni.showModal({
                title: '储存数据失败!',
                showCancel: false,
              })
            },
          })
        }
      },
      setStorageSync: function () {
        var key = this.key
        var data = this.data
        if (key.length == 0) {
          uni.showModal({
            title: '保存数据失败',
            content: 'key 不能为空',
            showCancel: false,
          })
        } else {
          uni.setStorageSync(key, data)
          uni.showModal({
            title: '存储数据成功',
            showCancel: false,
          })
        }
      },
      removeStorage: function () {
        uni.removeStorage({
          key: this.key,
          success: () => {
            uni.showModal({
              title: '移除数据成功',
              showCancel: false,
            })
          },
          fail: () => {
            uni.showModal({
              title: '移除数据失败',
              showCancel: false,
            })
          },
        })
      },
      removeStorageSync: function () {
        uni.removeStorageSync(this.key)
        uni.showModal({
          title: '移除数据成功',
          showCancel: false,
        })
      },
      clearStorage: function () {
        this.key = ''
        this.data = ''
        uni.clearStorage({
          success: function (_) {
            uni.showModal({
              title: '清除数据成功',
              showCancel: false,
            })
          },
          fail: function (_) {
            uni.showModal({
              title: '清除数据失败',
              showCancel: false,
            })
          },
        })
      },
      clearStorageSync: function () {
        this.key = ''
        this.data = ''
        uni.clearStorageSync()
        uni.showModal({
          title: '清除数据成功',
          content: ' ',
          showCancel: false,
        })
      },
    },
  }
</script>

<style>
</style>