纯前端如何存储数据库

纯前端存储数据库的方法包括：本地存储、IndexedDB、Web SQL、使用外部API。

本地存储是最简单和常用的方法之一。它使用浏览器内建的localStorage和sessionStorage来存储数据。localStorage可以持久存储数据，直到手动删除，而sessionStorage则在页面会话结束后清空。使用本地存储的一个主要优势是它的易用性和广泛支持，但它也有一些局限性，如只能存储字符串数据和容量限制（一般为5MB）。

一、本地存储

1、LocalStorage

localStorage是一种持久化存储方式，数据保存在用户的浏览器中，直到手动删除。它使用简单且广泛支持。

存储数据

localStorage.setItem('key', 'value');

获取数据

const value = localStorage.getItem('key');

删除数据

localStorage.removeItem('key');

清空所有数据

localStorage.clear();

优点：

持久性：数据不会随浏览器关闭而消失。
简单易用：API友好，易于操作。

缺点：

容量限制：每个域名通常限制为5MB。
安全性：数据以纯文本形式存储，容易被窃取。

2、SessionStorage

sessionStorage与localStorage类似，但它的数据仅在页面会话期间有效。一旦关闭页面或浏览器，数据将被清除。

存储数据

sessionStorage.setItem('key', 'value');

获取数据

const value = sessionStorage.getItem('key');

删除数据

sessionStorage.removeItem('key');

清空所有数据

sessionStorage.clear();

优点：

会话隔离：适用于仅在当前会话中需要的数据。
简单易用：API与localStorage一致。

缺点：

持久性差：关闭页面或浏览器后数据消失。
容量限制：同样限制为5MB。

二、IndexedDB

1、什么是IndexedDB

IndexedDB是一种低级API，用于客户端存储大量结构化数据，包括文件/二进制数据。它使用索引来高效查询数据。

优点：

容量大：通常可以存储数百MB甚至更多的数据。
结构化数据：支持复杂的数据结构和事务处理。
异步操作：不会阻塞主线程。

缺点：

复杂度高：API较为复杂，需要理解事务、游标等概念。

2、使用IndexedDB

创建数据库和对象存储

let db;
const request = indexedDB.open('myDatabase', 1);
request.onupgradeneeded = function(event) {
  db = event.target.result;
  if (!db.objectStoreNames.contains('myStore')) {
    db.createObjectStore('myStore', { keyPath: 'id' });
  }
};
request.onsuccess = function(event) {
  db = event.target.result;
};
request.onerror = function(event) {
  console.error('Database error:', event.target.errorCode);
};

添加数据

const transaction = db.transaction(['myStore'], 'readwrite');
const store = transaction.objectStore('myStore');
const request = store.add({ id: 1, name: 'John Doe' });
request.onsuccess = function() {
  console.log('Data added successfully');
};
request.onerror = function(event) {
  console.error('Add error:', event.target.errorCode);
};

读取数据

const transaction = db.transaction(['myStore'], 'readonly');
const store = transaction.objectStore('myStore');
const request = store.get(1);
request.onsuccess = function(event) {
  console.log('Data:', event.target.result);
};
request.onerror = function(event) {
  console.error('Get error:', event.target.errorCode);
};

三、Web SQL

1、什么是Web SQL

Web SQL是一种过时的API，用于在浏览器中存储数据，使用类似SQL的查询语言。尽管已被废弃，但在某些旧浏览器中仍然可用。

优点：

SQL支持：熟悉SQL的开发者会觉得容易上手。
关系型数据：适合存储关系型数据。

缺点：

兼容性差：已被废弃，现代浏览器不再支持。
未来不确定：不建议在新项目中使用。

2、使用Web SQL

创建数据库和表

const db = openDatabase('myDatabase', '1.0', 'My Database', 2 * 1024 * 1024);
db.transaction(function(tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS myTable (id unique, name)');
});

插入数据

db.transaction(function(tx) {
  tx.executeSql('INSERT INTO myTable (id, name) VALUES (1, "John Doe")');
});

查询数据

db.transaction(function(tx) {
  tx.executeSql('SELECT * FROM myTable', [], function(tx, results) {
    const len = results.rows.length, i;
    for (i = 0; i < len; i++) {
      console.log(results.rows.item(i).name);
    }
  });
});

四、使用外部API

1、RESTful API

通过使用RESTful API，可以将数据存储在后端服务器上。前端通过fetch或axios等库发送HTTP请求来存储和检索数据。

优点：

数据持久性：数据存储在服务器上，不受浏览器限制。
安全性：可以通过身份验证和授权机制保护数据。

缺点：

依赖网络：需要网络连接，性能受网络状况影响。
复杂度高：需要维护后端服务器和API。

2、使用GraphQL

GraphQL是一种查询语言，允许客户端从服务器请求精确的数据。它比传统的RESTful API更灵活。

优点：

灵活性：客户端可以指定需要的确切数据。
高效：减少了多余的数据传输。

缺点：

学习曲线：需要学习新的查询语言。
复杂性：需要设置GraphQL服务器。

RESTful API示例

// 使用Fetch API
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ id: 1, name: 'John Doe' }),
})
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch((error) => console.error('Error:', error));

GraphQL示例

const query = `
  mutation {
    addUser(id: 1, name: "John Doe") {
      id
      name
    }
  }
`;
fetch('https://api.example.com/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ query }),
})
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch((error) => console.error('Error:', error));

五、结论

在纯前端环境中存储数据有多种方法可供选择，每种方法都有其优点和缺点。本地存储适用于简单数据的存储和读取，IndexedDB适合存储大量结构化数据，Web SQL尽管已被废弃但在某些情况下仍可使用，使用外部API则提供了更高的灵活性和安全性。根据具体需求选择合适的方法，可以使前端数据存储变得更加高效和可靠。在团队管理和项目协作中，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来提升效率。

纯前端如何存储数据库

一、本地存储

1、LocalStorage

存储数据

获取数据

删除数据

清空所有数据

2、SessionStorage

存储数据

获取数据

删除数据

清空所有数据

二、IndexedDB

1、什么是IndexedDB

2、使用IndexedDB

创建数据库和对象存储

添加数据

读取数据

三、Web SQL

1、什么是Web SQL

2、使用Web SQL

创建数据库和表

插入数据

查询数据

四、使用外部API

1、RESTful API

2、使用GraphQL

RESTful API示例

GraphQL示例

五、结论

相关问答FAQs：