随着移动互联网的发展，越来越多的公司和开发者选择使用H5来开发移动应用。H5开发使用的是网页技术，因此打包后的应用和网页一样，需要保存数据。本文将介绍H5打包的应用如何保存数据。
H5打包的应用数据保存有两种方式：一种是使用浏览器提供的本地存储技术，另一种是使用原生APP提供的存储技术。
1.使用浏览器提供的本地存储技术
浏览器提供了几种本地存储技术：localStorage、sessionStorage和IndexedDB。其中localStorage和sessionStorage都是键值对存储技术，IndexedDB则提供了一个更为底层的API，可以支持更加复杂的数据结构。
localStorage
localStorage是HTML5中新添加的Web存储机制。可以将某些数据存储在本地的浏览器中，当用户关闭浏览器再打开时，仍然能够读取这些数据。localStorage的数据是持久性的，即便关闭浏览器，数据依然可以保存在浏览器中。
具体使用方法：
```javascript
// 存储数据
localStorage.setItem('key', 'value');
// 获取数据
localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
```
sessionStorage
sessionStorage与localStorage类似，不同之处在于sessionStorage的作用域是当前会话，即在同一个浏览器标签页中，数据可以共享。当用户关闭浏览器标签页或浏览器时，数据就会消失。
具体使用方法：
```javascript
// 存储数据
sessionStorage.setItem('key', 'value');
// 获取数据
sessionStorage.getItem('key');
// 删除数据
sessionStorage.removeItem('key');
```
IndexedDB
IndexedDB是HTML5中新添加的Web数据库存储机制，它是一个事务型数据库系统，可以存储结构化的数据。IndexedDB在存储上限方面很大（一般是50兆），因此比localStorage和sessionStorage更加适合存储大量的数据。
具体使用方法：
```javascript
// 打开数据库
var request = indexedDB.open('myDB', 1);
// 创建对象存储空间
request.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
// 添加索引
objectStore.createIndex('name', 'name', { unique: false });
objectStore.createIndex('email', 'email', { unique: true });
};
// 添加数据
request.onsuccess = function(event) {
var db = event.target.result;
var transaction = db.transaction(['myObjectStore'], 'readwrite');
var objectStore = transaction.objectStore('myObjectStore');
var request = objectStore.add({ id: 1, name: 'John Doe', email: 'john@example.com' });
};
// 获取数据
request.onsuccess = function(event) {
var db = event.target.result;
var transaction = db.transaction(['myObjectStore'], 'readonly');
var objectStore = transaction.objectStore('myObjectStore');
var request = objectStore.get(1);
request.onsuccess = function(event) {
console.log(event.target.result);
};
};
// 删除数据
request.onsuccess = function(event) {
var db = event.target.result;
var transaction = db.transaction(['myObjectStore'], 'readwrite');
var objectStore = transaction.objectStore('myObjectStore');
var request = objectStore.delete(1);
};
```
2.使用原生APP提供的存储技术
在H5应用中，也可以调用原生APP提供的存储技术。原生APP提供了很多存储技术，如SQLite数据库、文件存储、键值对存储等等。使用原生APP提供的存储技术需要开发者与APP开发者进行合作。
总体来说，H5打包的应用数据保存可以通过浏览器本地存储技术和原生APP提供的存储技术来实现。在数据量小的情况下，建议使用localStorage或sessionStorage，如果数据量较大，建议使用IndexedDB。如果需要与原生APP进行交互，则需要与APP开发者进行合作，使用原生存储技术。
