uniapp如何存数据-猿码集

uniapp如何存数据

在uniapp开发过程中，很多时候我们都需要将数据保存在本地，以实现持久化的需求。而在uniapp中，有很多种方式可以实现数据存储，下面将对几种常见的方式进行详细介绍。

1. 本地存储

本地存储是指将数据存储在浏览器或本地文件系统中，通常使用localStorage或sessionStorage来实现。其中，localStorage和sessionStorage的区别在于，前者的数据会一直保留，即使关闭浏览器，数据也会一直存在，而后者只能在当前会话中保留数据，关闭当前会话后，数据会被清除。

localStorage和sessionStorage的操作接口基本相同，可以使用setItem(key, value)、getItem(key)、removeItem(key)等方法对数据进行增删改查操作。例如，下面是将“hello world”存储到localStorage中的代码：


localStorage.setItem('message', 'hello world');

可以使用getItem(key)方法获取存储在localStorage中的数据，例如：


let message = localStorage.getItem('message');
console.log(message); //输出结果为：hello world

需要注意的是，存储在localStorage中的数据只能是字符串类型的，所以需要使用JSON.stringify()方法将数据转化为字符串类型，存储前使用JSON.parse()方法将数据还原为原来的类型。

2. 数据库存储

在uniapp中，可以使用IndexedDB或Web SQL Database来实现数据库存储。其中，IndexedDB是HTML5标准提供的浏览器内部数据库，可以存储大量的结构化数据，支持事务，而Web SQL Database则是使用SQL语言来操作数据库，具有良好的关系模型和查询功能。

以IndexedDB为例，下面是使用IndexedDB存储数据的示例代码：


//打开数据库，如果不存在则创建一个新的数据库
let request = indexedDB.open('test', 1);
//绑定onerror事件，当出现错误时打印错误信息
request.onerror = function(event) {
  console.log('数据库打开失败', event.target.errorCode);
};
//绑定onsuccess事件，当打开数据库成功后执行回调函数
request.onsuccess = function(event) {
  let db = event.target.result;
  console.log('数据库打开成功');
  
  //开启一个事务
  let transaction = db.transaction('users', 'readwrite');
  
  //打开对象存储空间
  let objectStore = transaction.objectStore('users');
  
  //存储一条记录
  let user = {name: '张三', age: 20};
  let request = objectStore.add(user);
  
  //绑定onsuccess事件，当存储成功后执行回调函数
  request.onsuccess = function(event) {
    console.log('数据添加成功');
  };
  
  //关闭数据库连接
  transaction.oncomplete = function() {
    db.close();
  };
};

在上面的代码中，首先使用indexedDB.open()方法打开一个名为“test”的数据库，如果不存在则创建一个新的数据库。接着，开启一个事务，打开名为“users”的对象存储空间，存储一条记录，最后关闭数据库连接。需要注意的是，indexedDB.open()方法使用异步回调的方式返回数据库实例，因此需要使用request.onsuccess来绑定回调函数，而db.transaction()方法也是异步的，需要在transaction对象的oncomplete事件中关闭数据库连接。

3. 存储到文件系统

uniapp也支持将数据存储到文件系统中，可以使用uni.saveFile()和uni.getFileSystemManager()等API实现文件存储。其中，uni.saveFile()用于将数据保存到本地文件系统中，而uni.getFileSystemManager()则用于获取文件系统管理器。

下面是使用uni.saveFile()方法将数据保存到文件系统中的示例代码：


uni.saveFile({
    tempFilePath: '/storage/emulated/0/test.txt',
    success(res) {
        console.log('保存成功', res.savedFilePath);
    },
    fail(err) {
        console.log('保存失败', err);
    }
});

在上面的代码中，tempFilePath参数指定了要保存的文件路径，成功后可以通过调用成功回调函数中的res.savedFilePath获取文件保存的路径。

4. 云存储

云存储是将数据存储在云服务器上，通常使用uniCloud或其他第三方云服务来实现。其中，uniCloud是uniapp官方提供的服务平台，可以实现数据的实时同步和共享。

下面是使用uniCloud将数据存储在云端的示例代码：


//调用uniCloud.login()方法登录云服务
let res = await uniCloud.login({ username: 'admin', password: '123456' });
console.log(res); //输出登录成功的信息
//调用uniCloud.database()方法获取数据库实例
let db = uniCloud.database();
//在users表中插入一条记录
let collection = db.collection('users');
let result = await collection.add({name: '张三', age: 20});
console.log(result); //输出插入成功的结果

需要注意的是，使用uniCloud开发需要注册uniCloud账号，并在token文件中添加token密钥。

总结

本文介绍了uniapp中几种常见的数据存储方式，包括本地存储、数据库存储、文件系统存储和云存储。其中，本地存储使用localStorage或sessionStorage实现，数据库存储可以使用IndexedDB或Web SQL Database来实现，文件系统存储可以使用uni.saveFile()方法，云存储可以使用uniCloud或第三方云服务实现。需要根据具体业务需求来选择数据存储方式。

uniapp如何存数据