Uniapp本地存储详解

一、本地存储的意义

在前端开发中，与后端交互的数据通常需要通过浏览器本地存储来达到某种数据缓存或离线操作的效果。这种数据存储方式有利于减小服务器压力，提高用户体验。对于uniapp这种跨平台开发框架，本地存储更是必不可少的一项技术。

uniapp提供了多种本地存储方式，以适应不同的场景需求。下面将对这些方式进行详细讲解。

二、storage静态方法

uniapp提供了storage静态方法，它是一个轻量级、基于键值对的本地存储方式。可以在本地存储中存储和读取简单的数据类型，如字符串、数字和布尔值等。

以下是使用storage存储和读取数据的示例代码：

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

// 读取数据
let value = uni.getStorageSync('key');

可以看到，storage存储和读取数据都非常简单。但是只支持简单的数据类型，无法存储复杂的数据结构。

三、数据库

uniapp支持使用SQLite数据库进行本地数据存储。SQLite是一种轻量级的关系数据库管理系统，使用非常方便。

以下是使用SQLite数据库存储和读取数据的示例代码：

// 打开数据库
const db = uni.requireNativePlugin('uni-sqlite').openDatabase('myDB');

// 存储数据
const sql = 'INSERT INTO myTable (name, age) VALUES (?, ?)';
db.executeSql({
    name: 'myTable',
    sql: sql,
    args: ['Tom', 18],
    success(res) {
        console.log('数据存储成功');
    }
});

// 读取数据
const sql = 'SELECT * FROM myTable';
db.executeSql({
    name: 'myTable',
    sql: sql,
    success(res) {
        console.log('查询结果：', res.data);
    }
});

可以看到，使用SQLite数据库进行数据存储需要打开数据库、编写SQL语句、执行SQL语句等多个步骤，但是可以存储和读取复杂的数据结构，很适合某些复杂的数据存储需求。

四、文件存储

uniapp还支持将数据存储在本地文件中。这种方式可存储复杂的数据结构，适合于存储图片、视频等数据。

以下是使用本地文件进行数据存储的示例代码：

// 获取文件系统管理器
const fs = uni.getFileSystemManager();

// 存储数据
const data = {name: 'Tom', age: 18};
const filePath = `${uni.env.USER_DATA_PATH}/data.json`;
fs.writeFileSync(filePath, JSON.stringify(data), 'utf8');
console.log('数据存储成功');

// 读取数据
const data = JSON.parse(fs.readFileSync(filePath, 'utf8'));
console.log('读取到的数据：', data);

可以看到，使用本地文件进行数据存储需要获取文件系统管理器、指定文件路径、将数据序列化为JSON字符串后写入文件等多个步骤，但是可以存储复杂的数据结构，很适合某些特殊的数据存储需求。

五、indexedDB

indexedDB是浏览器提供的一种客户端存储机制，可以存储和检索较大量的结构化数据。uniapp也支持使用indexedDB进行本地数据存储。

以下是使用indexedDB进行数据存储和读取的示例代码：

// 打开indexedDB数据库
const request = indexedDB.open('myDB', 1);
let db;

// 创建Object Store
request.onupgradeneeded = function(event) {
    db = event.target.result;
    const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
};

// 存储数据
request.onsuccess = function(event) {
    db = event.target.result;
    const transaction = db.transaction(['myObjectStore'], 'readwrite');
    const objectStore = transaction.objectStore('myObjectStore');
    objectStore.add({id: 1, name: 'Tom', age: 18});
    transaction.oncomplete = function() {
        console.log('数据存储成功');
    };
};

// 读取数据
request.onsuccess = function(event) {
    db = event.target.result;
    const transaction = db.transaction(['myObjectStore'], 'readonly');
    const objectStore = transaction.objectStore('myObjectStore');
    const request = objectStore.get(1);
    request.onsuccess = function() {
        console.log('读取到的数据：', request.result);
    };
};

可以看到，使用indexedDB进行数据存储和读取需要打开数据库、创建Object Store、创建transaction、添加或获取数据等多个步骤。但是可以存储和读取较大量的结构化数据，功能相对较强。