uniapp做本地存储显示在页面上，详细代码

可以使用uniapp提供的本地存储API，如下所示：

// 存储数据
uni.setStorageSync('key', 'value');

// 获取数据
let data = uni.getStorageSync('key');

// 在页面上显示数据
<view>{{data}}</view>

需要注意的是，uniapp的本地存储是基于小程序的本地存储实现的，因此存储的数据大小有限制。同时，如果需要存储复杂的数据结构，可以使用JSON.stringify()和JSON.parse()进行序列化和反序列化。

相关问题

uniapp删除本地存储

uniapp删除本地存储可以通过调用`uni.removeStorageSync(key)`方法来实现。在utils.js文件中，定义了一个名为`removeSum`的方法，该方法用于清除本地存储。在该方法中，可以通过调用`uni.removeStorageSync(key)`方法来删除指定的存储键。首先，获取当前已存储的所有键值对，然后根据需要保留的键值对列表和待删除的键值对列表，筛选出需要删除的键值对并进行删除。最后，重置存储的键值对。如果没有传入需要保留的键值对列表，则会清除所有的本地存储。

示例代码如下：

// 清除本地存储
function removeSum(){
  let NO_Sum = ["secret_code2SessionId","secret_personId","secret_personName"]; // 需要保留的存储的键
  let secret_arrSum = uni.getStorageSync('secret_arrSum') || ''; // 当前已存储的键值对
  if(secret_arrSum){
    let remove_Sum = secret_arrSum.filter(item => !NO_Sum.includes(item)); // 需要删除的键值对
    if(remove_Sum.length > 0){
      remove_Sum.forEach(key => {
        uni.removeStorageSync(key); // 删除本地存储对应的键值对
      });
      uni.setStorageSync('secret_arrSum', NO_Sum); // 重置存储的键值对
    }
  }else{
    uni.clearStorageSync(); // 删除本地所有存储
  }
}

module.exports = {
  removeSum
}

在需要清除存储的页面，可以引入`removeSum`方法，并在`onShow`方法中调用`removeSum()`来清除残留缓存。

示例代码如下：

import { removeSum } from '@/utils/utils.js'; // 引入方法

onShow() {
  // 清除残留缓存
  removeSum();
}

uniapp 使用本地数据库步骤与代码

Uniapp 可以使用本地数据库来存储和管理数据。下面是使用本地数据库的步骤和代码示例：

1. 在 uniapp 项目中创建一个本地数据库，可以使用 uniapp 提供的插件 uni-ali-db 或者 uni-app-plus 插件。这里以 uni-ali-db 为例：

npm install uni-ali-db

2. 在 App.vue 中初始化数据库，可以在 onLaunch 钩子中进行：

import db from 'uni-ali-db'

export default {
  onLaunch () {
    db.init({
      database: 'test',
      version: '1.0',
      displayName: 'Test Database',
      maxSize: 50 * 1024 * 1024
    })
  },
}

3. 在需要使用本地数据库的页面中，引入 db 对象，并调用相应的方法进行数据操作：

import db from 'uni-ali-db'

export default {
  data () {
    return {
      todos: []
    }
  },
  onLoad () {
    db.query({
      sql: 'SELECT * FROM todos',
      success: (res) => {
        this.todos = res.rows
      }
    })
  },
  methods: {
    addTodo () {
      db.executeSql({
        sql: 'INSERT INTO todos (title, completed) VALUES (?, ?)',
        args: ['New todo', false],
        success: (res) => {
          const todo = {
            id: res.insertId,
            title: 'New todo',
            completed: false
          }
          this.todos.push(todo)
        }
      })
    }
  },
}

以上就是使用本地数据库的基本步骤和代码示例。需要注意的是，本地数据库的操作和 SQL 语句的编写要遵守相应的规范和安全性要求。