几种储存数据方案

不可丢失的重要数据

如用户订单。应当在后端存储，避免因客户端清理或设备丢失而造成数据丢失。

// 示例：前端提交订单到后端
await fetch('/api/order', {
  method: 'POST',
  body: JSON.stringify(orderData),
  headers: { 'Content-Type': 'application/json' }
});

应用程序的配置数据

如用户的语言偏好设置。应当使用 localStorage 存储。

// 使用 localStorage 保存语言偏好
localStorage.setItem('language', 'zh-CN');

// 读取语言偏好
const language = localStorage.getItem('language');

如用户的搜索历史。应当使用 IndexedDB 储存。

应用程序的缓存数据

// 使用 IndexedDB 保存用户搜索历史
const request = indexedDB.open('myAppDB', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  // 创建对象存储空间
  db.createObjectStore('searchHistory', { keyPath: 'id', autoIncrement: true });
};

request.onsuccess = (event) => {
  const db = event.target.result;
  const tx = db.transaction('searchHistory', 'readwrite');
  const store = tx.objectStore('searchHistory');

  // 添加一条搜索记录
  store.add({ query: 'EziApp 教程', timestamp: Date.now() });

  // 读取所有搜索记录
  store.getAll().onsuccess = (e) => {
    console.log('搜索历史:', e.target.result);
  };
};

用户主动打开的数据

如用户主动打开一个文件用于编辑。应当使用 File System Access API。

tsts

// 打开单个文件
const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const text = await file.text();
console.log(text);

// 打开文件夹
const dirHandle = await window.showDirectoryPicker();
for await (const [name, handle] of dirHandle.entries()) {
  console.log(name, handle.kind);
}

应用程序主动访问的数据

如应用程序需要读取某个系统配置。应当使用 EziApp FS接口 (目前未开放完成)
调用该接口有着最严厉的权限控制。
开发者应当避免使用此接口来保持应用程序友好。
每一次调用必须填写使用说明。使用说明、访问路径等信息会提示给用户。
用户可选择 本次运行允许、允许一次、拒绝。

几种储存数据方案 ​

不可丢失的重要数据 ​

应用程序的配置数据 ​

应用程序的缓存数据 ​