存储商品信息 - IndexedDB

Mars亟 / 2024-10-21 / 原文

  1 // 打开、创建数据库数据库
  2 function openDB(dbName, storeName, version = 1) {
  3     return new Promise(function (resolve, reject) {
  4         let indexedDB = window.indexedDB;
  5         let db;
  6         const request = indexedDB.open(dbName, version);
  7         request.onsuccess = function (event) {
  8             db = event.target.result;
  9             resolve(db);
 10         }
 11         request.onerror = function (event) {
 12             reject(event);
 13         }
 14         request.onupgradeneeded = function (event) {
 15             // 数据库创建或升级的时候会触发
 16             db = event.target.result;
 17             let objectStore;
 18             if (!db.objectStoreNames.contains(storeName)) {
 19                 objectStore = db.createObjectStore(storeName, {keyPath: 'id'});
 20             }
 21         }
 22     });
 23 }
 24 
 25 // 新增数据
 26 function addData(db, storeName, data) {
 27     return new Promise(function(resolve, reject){
 28         let request = db.transaction([storeName], 'readwrite').objectStore(storeName).add(data);
 29         request.onsuccess = function (event) {
 30             resolve(event);
 31         }
 32         request.onerror = function (event) {
 33             throw new Error(event.target.error);
 34             reject(event);
 35         }
 36     });
 37 }
 38 
 39 // 删除数据
 40 function deleteData(db, storeName, id) {
 41     let request = db.transaction([storeName], 'readwrite').objectStore(storeName).delete(id);
 42     return new Promise(function(resolve, reject) {
 43         request.onsuccess = function (event) {
 44             resolve(event);
 45         }
 46         request.onerror = function (event) {
 47             resolve(event);
 48         }
 49     });
 50 }
 51 
 52 // 更新数据
 53 function updateData(db, storeName, data) {
 54     let request = db.transaction([storeName], 'readwrite').objectStore(storeName).put(data);
 55     return new Promise(function(resolve, reject) {
 56         request.onsuccess = function (event) {
 57             resolve(event);
 58         }
 59         request.onerror = function (event) {
 60             resolve(event);
 61         }
 62     });
 63 }
 64 
 65 // 通过主键读取数据
 66 function getDataByKey(db, storeName, key) {
 67     return new Promise(function(resolve, reject) {
 68         let transaction = db.transaction([storeName]);
 69         let objectStore = transaction.objectStore(storeName);
 70         let request = objectStore.get(key);
 71         request.onsuccess = function (event) {
 72             resolve(request.result);
 73         }
 74         request.onerror = function (event) {
 75             reject(event);
 76         }
 77     });
 78 }
 79 
 80 // 通过索引读取数据
 81 function getDataByIndex(db, storeName, indexName, indexValue) {
 82     let store = db.transaction(storeName, 'readwrite').objectStore(storeName);
 83     let request = store.index(indexName).get(indexValue);
 84     return new Promise(function(resolve, reject) {
 85         request.onsuccess = function (event) {
 86             resolve(event.target.result);
 87         }
 88         request.onerror = function (event) {
 89             reject(event);
 90         }
 91     });
 92 }
 93 
 94 // 通过游标读取数据
 95 function listDataAll(db, storeName) {
 96     let list = [];
 97     let store = db.transaction(storeName, 'readwrite').objectStore(storeName);
 98     let request = store.openCursor();
 99     return new Promise(function(resolve, reject) {
100         request.onsuccess = function (event) {
101             let cursor = event.target.result;
102             if (cursor) {
103                 // 必须要检查
104                 list.push(cursor.value);
105                 cursor.continue(); // 遍历了存储对象中的所有内容
106             } else {
107                 resolve(list);
108             }
109         }
110         request.onerror = function (event) {
111             reject(event);
112         }
113     });
114 }
115 
116 // 通过索引和游标查询记录
117 function listDataByIndex(db, storeName, indexName, indexValue) {
118     let list = [];
119     let store = db.transaction(storeName, 'readwrite').objectStore(storeName);
120     let request = store.index(indexName).openCursor(IDBKeyRange.only(indexValue));
121     return new Promise(function(resolve, reject) {
122         request.onsuccess = function (event) {
123             let cursor = event.target.result;
124             if (cursor) {
125                 list.push(cursor.value);
126                 cursor.continue();
127             } else {
128                 resolve(list);
129             }
130         }
131         request.onerror = function (event) {
132             reject(event);
133         }
134     });
135 }
136 
137 // 关闭数据库
138 function closeDB(db) {
139     db.close();
140     console.log('数据库已关闭');
141 }
142 
143 // 删除数据库
144 function deleteDBAll(dbName) {
145     let deleteRequest = window.indexedDB.deleteDatabase(dbName);
146     return new Promise(function(resolve, reject) {
147         deleteRequest.onsuccess = function (event) {
148             console.log('删除数据库['+dbName+']成功');
149         }
150         deleteRequest.onerror = function (event) {
151             console.log('删除数据库['+dbName+']失败');
152         }
153     });
154 }
155 var priceTips = 
156 [
157     {"id":"3705608840985838048","openPrice":109.9,"closePrice":599,"title":"【LZ】COCO Amoni【缕空网纱】潮流时尚轻奢圆领长袖卫衣 FJ046"},
158     {"id":"3711654424024842572","openPrice":109.9,"closePrice":599,"title":"【LZ】时尚休闲百搭上衣拼接不规则刺绣蝴蝶袖显瘦长袖卫衣ZQ355"},
159     {"id":"3709382942422860093","openPrice":109.9,"closePrice":599,"title":"【LZ】COCO Amoni【缕空网纱】潮流时尚轻奢圆领长袖卫衣 FJ046"},
160     {"id":"3710466032167682295","openPrice":329.9,"closePrice":1599,"title":"【LZ】冬季时尚拼接褶皱收腰立领拉链款显瘦小个子感羽绒服女FJ099"},
161     {"id":"3710840031653527609","openPrice":359.9,"closePrice":1599,"title":"【LZ】潮流拼接立领连帽保暖个性宽松撞色羽绒服YR018"},
162     {"id":"3712643636521992446","openPrice":359.9,"closePrice":1599,"title":"优雅小香风翻领拼接抽绳收腰宽松时尚设计感洋气保暖羽绒服YR031"},
163     {"id":"3712643247735177353","openPrice":359.9,"closePrice":1599,"title":"甜美粉撞色格纹字母刺绣立领保暖设计感长袖羽绒服 YR075"},
164     {"id":"3712641806790426706","openPrice":359.9,"closePrice":1599,"title":"极简风纯色皮面连帽立领短款设计感宽松羽绒服AB253"},
165     {"id":"3712634902764716209","openPrice":359.9,"closePrice":1599,"title":"粉色格纹字母刺绣立领拉链款宽松时尚保暖短款羽绒服YR039"},
166     {"id":"3710837751009116527","openPrice":399.9,"closePrice":1599,"title":"【LZ】甜美纯色拼接连帽保暖时尚设计感宽松短款长袖羽绒服女YR064"},
167     {"id":"3710836417237221862","openPrice":399.9,"closePrice":1599,"title":"【LZ】甜美宽松立领连帽毛领小毛球设计感保暖短款羽绒服YR020"},
168     {"id":"3712642397373595951","openPrice":399.9,"closePrice":1599,"title":"冬季设计师拼接大毛领小个子面包服显瘦时尚百搭羽绒服JD057"},
169 ];
170 
171 async function updateSpPrice(){
172     let dbName = 'lz_db',storeName = 'lz_db_sp_price';
173     let db = await openDB(dbName, storeName);
174     for(let i = 0; i < priceTips.length; i++){
175         let data = priceTips[i];
176         let getResult = await getDataByKey(db, storeName, data.id);
177         if(getResult){
178             console.log('--------------- 主键查找的商品信息 ---------------')
179             console.log(getResult);
180         }else{
181             let addResult = await addData(db, storeName, data);
182             console.log('--------------- 添加['+data.id+']结果 ---------------')
183             console.log(addResult);
184         }
185     }
186     let listResult = await listDataAll(db, storeName);
187     console.log('--------------- 所有商品信息 ---------------')
188     console.log(listResult);
189     closeDB(db);
190 }
191 updateSpPrice();
192 
193 // // 打开、创建数据库数据库
194 // function openDB(dbName, storeName, version = 1)
195 // // 新增数据
196 // function addData(db, storeName, data)
197 // // 删除数据
198 // function deleteData(db, storeName, id)
199 // // 更新数据
200 // function updateData(db, storeName, data)
201 // // 通过主键读取数据
202 // function getDataByKey(db, storeName, key)
203 // // 通过索引读取数据
204 // function getDataByIndex(db, storeName, indexName, indexValue)
205 // // 通过游标读取数据
206 // function listDataAll(db, storeName)
207 // // 通过索引和游标查询记录
208 // function listDataByIndex(db, storeName, indexName, indexValue)