uniapp实现本地存储，以todolists案例为例

uniapp提供了把数据保存到本地和读取本地数据的api，这个api可以在多个平台的实现方式不同，但是代码是相同的。详见uniapp.dcloud.net.cn/api/storage…

本项目是一个安卓app，所以存储方式是原生的plus.storage, 数据是永久化的

uniapp提供的setStorage API在安卓环境下是通过调用安卓系统提供的SharedPreferences来实现的。

SharedPreferences是安卓系统提供的一种轻量级的存储方式，可以用来保存简单的键值对数据。它提供了一个类似于HashMap的API，可以用来存储、读取和删除键值对数据。

在安卓环境下，uniapp的setStorage API会将数据存储到SharedPreferences中，并且会自动将数据序列化为JSON字符串，以便在读取数据时可以自动反序列化为原有的格式。

因此，如果要使用uniapp的setStorage API在安卓环境下存储数据，只需要调用uni.setStorage方法，并指定要存储的键和值即可。

本项目用到的接口有：

uni.setStorage({
  key: 'storage_key',
  data: 'hello',
  success: function () {
    console.log('success');
  }
});

uni.getStorage({
  key: 'storage_key',
  success: function (res) {
    console.log(res.data);
  }
});

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

先看看最终的效果：

输入两条待办，刷新之后，数据依然存在，这是因为我们已经将数据保存在了本地，每次刷新页面时会调用本地的数据，所以页面上的数据并不会消失。

具体实现分为几个步骤

1. 先写一个存储数据的方法saveData()

methods: {
  saveData() {
    uni.setStorage({
      key: 'todolist',
      data: this.items,
      success: () => {
        console.log("success");
      },

2. 在发布待办和删除待办的时候，调用saveData方法

methods: {
  addItem() {
    if (!this.inputValue) return;

    this.items.push({
      text: this.inputValue,
      done: false
    });
    this.saveData();
    this.inputValue = '';
  },

  deleteItem(index) {
    this.items.splice(index, 1);
    this.saveData();
  },

3. 在生命周期函数onload里调用本地数据，存放到items数组里，items数组会由前端代码渲染到页面上

onLoad() {
  uni.getStorage({
    key: 'todolist',
    success: (res) => {
      console.log(res);
      this.items = res.data;
    }
  })
},

页面完整代码是这样的

<template>
  <view class="todo-lists-page">
    <view class="header">
      <text class="title">To Do Lists</text>
    </view>
    <view class="body">
      <view class="input-area">
        <input class="input" type="text" placeholder="Add a to do item" v-model="inputValue" @keyup.enter="addItem" />
          <button class="addToDo" @click="addItem">Add</button>
        </view>
      <view class="list-area">
        <view class="list-item" v-for="(item, index) in items" :key="index" @click="toggleItem(index)">
          <text class="item-text" :class="{ 'item-done': item.done }">
            {{ item.text }}
          </text>
          <button class="deletToDo" type="default" size="mini" @click="deleteItem(index)">Delete</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        inputValue: '',
        items: []
      };
    },
    onLoad() {
      uni.getStorage({
        key: 'todolist',
        success: (res) => {
          console.log(res);
          this.items = res.data;
        }
      })
    },
    methods: {
      saveData() {
        uni.setStorage({
          key: 'todolist',
          data: this.items,
          success: () => {
            console.log("success");
          },
          fail: () => {
            console.log("fail");
          }
        })
      },
      addItem() {
        if (!this.inputValue) return;

        this.items.push({
          text: this.inputValue,
          done: false
        });
        this.saveData();
        this.inputValue = '';
      },
      toggleItem(index) {
        this.items[index].done = !this.items[index].done;
      },
      deleteItem(index) {
        this.items.splice(index, 1);
        this.saveData();
      },
    }
  };
</script>

<style>
  .todo-lists-page {
    height: 100%;
  }

  .header {
    height: 44px;
    background-color: #00bcd4;
    display: flex;
    align-items: center;
    padding-left: 20px;
  }

  .title {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
  }

  .body {
    flex: 1;
    padding: 20px;
  }

  .input-area {
    margin-bottom: 20px;
  }

  .input {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    outline: none;
  }

  .list-area {
    flex: 1;
  }

  .list-item {
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
  }

  .item-text {
    font-size: 14px;
  }

  .item-done {
    text-decoration: line-through;
    color: #999;
  }
</style>