• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Class (WebStorage)
2<!--Kit: ArkWeb-->
3<!--Subsystem: Web-->
4<!--Owner: @yuzhouhang1-->
5<!--Designer: @handyohos-->
6<!--Tester: @ghiker-->
7<!--Adviser: @HelloCrease-->
8
9通过WebStorage可管理Web SQL数据库接口和HTML5 Web存储接口，每个应用中的所有Web组件共享一个WebStorage。
10
11> **说明：**
12>
13> - 本模块首批接口从API version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
14>
15> - 本Class首批接口从API version 9开始支持。
16>
17> - 示例效果请以真机运行为准，当前DevEco Studio预览器不支持。
18>
19> - 目前调用WebStorage下的方法，都需要先加载Web组件。
20
21## 导入模块
22
23```ts
24import { webview } from '@kit.ArkWeb';
25```
26
27## deleteOrigin
28
29static deleteOrigin(origin: string): void
30
31清除指定源所使用的存储。
32
33**系统能力：** SystemCapability.Web.Webview.Core
34
35**参数：**
36
37| 参数名 | 类型   | 必填 | 说明                     |
38| ------ | ------ | ---- | ------------------------ |
39| origin | string | 是   | 指定源的字符串索引，来自于[getOrigins](#getorigins)。 |
40
41**错误码：**
42
43以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。
44
45| 错误码ID | 错误信息                                               |
46| -------- | ------------------------------------------------------ |
47| 17100011 | Invalid origin.                             |
48| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. |
49
50**示例：**
51
52```ts
53// xxx.ets
54import { webview } from '@kit.ArkWeb';
55import { BusinessError } from '@kit.BasicServicesKit';
56
57@Entry
58@Component
59struct WebComponent {
60  controller: webview.WebviewController = new webview.WebviewController();
61  origin: string = "resource://rawfile/";
62
63  build() {
64    Column() {
65      Button('deleteOrigin')
66        .onClick(() => {
67          try {
68            webview.WebStorage.deleteOrigin(this.origin);
69          } catch (error) {
70            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
71          }
72
73        })
74      Web({ src: $rawfile('index.html'), controller: this.controller })
75    }
76  }
77}
78```
79
80加载的html文件。
81 ```html
82  <!-- index.html -->
83  <!DOCTYPE html>
84  <html>
85  <head>
86    <meta charset="UTF-8">
87    <title>test</title>
88    <script type="text/javascript">
89
90        // 打开或创建数据库
91        var request = indexedDB.open('myDatabase', 1);
92
93        // 如果数据库版本变化或首次创建时触发
94        request.onupgradeneeded = function(event) {
95            var db = event.target.result;
96
97            // 创建对象存储（表），设置主键为‘id’
98            var objectStore = db.createObjectStore('customers', { keyPath: 'id' });
99
100            // 为‘name’创建索引
101            objectStore.createIndex('name', 'name', { unique: false });
102        };
103
104        // 打开数据库成功时的回调
105        request.onsuccess = function(event) {
106            var db = event.target.result;
107
108            const customerData = [
109                {id: 1, name: 'John Doe', email: 'john@example.com'},
110                {id: 2, name: 'John Doe', email: 'john@example.com'},
111            ]
112
113            // 插入数据
114            var transaction = db.transaction('customers', 'readwrite');
115            var objectStore = transaction.objectStore('customers');
116
117            customerData.forEach((customer) => {
118                objectStore.add(customer);
119            });
120
121            transaction.oncomplete = function () {
122                console.info('Transaction completed: data added');
123            }
124
125            transaction.onerror = function (event) {
126                console.error("Transaction failed", event);
127            }
128
129            // 查询数据
130            var queryTransaction = db.transaction(['customers']);
131            var queryObjectStore = queryTransaction.objectStore('customers');
132            var query = queryObjectStore.get(2);
133
134            query.onsuccess = function (event) {
135                console.info('query succ');
136                console.info('Customer:', event.target.result);
137                console.info('Customer id:', event.target.result.id);
138                console.info('Customer name:', event.target.result.name);
139                console.info('Customer email:', event.target.result.email);
140            };
141
142            queryObjectStore.openCursor().onsuccess = (event) => {
143                const cursor = event.target.result;
144                if (cursor) {
145                    var msg = "<p>查询记录：" + cursor.key + "</p>";
146                    document.querySelector("#status").innerHTML += msg;
147                    var msg = "<p><b>" + cursor.value.name + "</b></p>";
148                    document.querySelector("#status").innerHTML += msg;
149                    console.info(`SSN ${cursor.key} 对应的名字是 ${cursor.value.name}`);
150                    cursor.continue();
151                } else {
152                    console.info("没有更多记录了")
153                }
154            }
155        };
156
157        // 错误处理
158        request.onerror = function(event) {
159            console.error('Database error:', event.target.error);
160        };
161
162      </script>
163  </head>
164  <body>
165  <div id="status" name="status">状态信息</div>
166  </body>
167  </html>
168 ```
169
170## getOrigins
171
172static getOrigins(callback: AsyncCallback\<Array\<WebStorageOrigin>>): void
173
174以回调方式异步获取当前使用Web SQL数据库的所有源的信息。
175
176**系统能力：** SystemCapability.Web.Webview.Core
177
178**参数：**
179
180| 参数名   | 类型                                   | 必填 | 说明                                                   |
181| -------- | -------------------------------------- | ---- | ------------------------------------------------------ |
182| callback | AsyncCallback\<Array\<[WebStorageOrigin](./arkts-apis-webview-i.md#webstorageorigin)>> | 是   | 以数组方式返回源的信息。 |
183
184**错误码：**
185
186以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。
187
188| 错误码ID | 错误信息                                               |
189| -------- | ------------------------------------------------------ |
190| 17100012 | Invalid web storage origin.                             |
191| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. |
192
193**示例：**
194
195```ts
196// xxx.ets
197import { webview } from '@kit.ArkWeb';
198import { BusinessError } from '@kit.BasicServicesKit';
199
200@Entry
201@Component
202struct WebComponent {
203  controller: webview.WebviewController = new webview.WebviewController();
204
205  build() {
206    Column() {
207      Button('getOrigins')
208        .onClick(() => {
209          try {
210            webview.WebStorage.getOrigins((error, origins) => {
211              if (error) {
212                console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
213                return;
214              }
215              for (let i = 0; i < origins.length; i++) {
216                console.info('origin: ' + origins[i].origin);
217                console.info('usage: ' + origins[i].usage);
218                console.info('quota: ' + origins[i].quota);
219              }
220            })
221          } catch (error) {
222            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
223          }
224
225        })
226      Web({ src: $rawfile('index.html'), controller: this.controller })
227    }
228  }
229}
230```
231
232加载的html文件，请参考[deleteOrigin](#deleteorigin)接口下的html文件。
233
234## getOrigins
235
236static getOrigins(): Promise\<Array\<WebStorageOrigin>>
237
238以Promise方式异步获取当前使用Web SQL数据库的所有源的信息。
239
240**系统能力：** SystemCapability.Web.Webview.Core
241
242**返回值：**
243
244| 类型                             | 说明                                                         |
245| -------------------------------- | ------------------------------------------------------------ |
246| Promise\<Array\<[WebStorageOrigin](./arkts-apis-webview-i.md#webstorageorigin)>> | Promise实例，用于获取当前所有源的信息。 |
247
248**错误码：**
249
250以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。
251
252| 错误码ID | 错误信息                                               |
253| -------- | ------------------------------------------------------ |
254| 17100012 | Invalid web storage origin.                             |
255| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. |
256
257**示例：**
258
259```ts
260// xxx.ets
261import { webview } from '@kit.ArkWeb';
262import { BusinessError } from '@kit.BasicServicesKit';
263
264@Entry
265@Component
266struct WebComponent {
267  controller: webview.WebviewController = new webview.WebviewController();
268
269  build() {
270    Column() {
271      Button('getOrigins')
272        .onClick(() => {
273          try {
274            webview.WebStorage.getOrigins()
275              .then(origins => {
276                for (let i = 0; i < origins.length; i++) {
277                  console.info('origin: ' + origins[i].origin);
278                  console.info('usage: ' + origins[i].usage);
279                  console.info('quota: ' + origins[i].quota);
280                }
281              })
282              .catch((e: BusinessError) => {
283                console.error('error: ' + JSON.stringify(e));
284              })
285          } catch (error) {
286            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
287          }
288
289        })
290      Web({ src: $rawfile('index.html'), controller: this.controller })
291    }
292  }
293}
294```
295
296加载的html文件，请参考[deleteOrigin](#deleteorigin)接口下的html文件。
297
298## getOriginQuota
299
300static getOriginQuota(origin: string, callback: AsyncCallback\<number>): void
301
302使用callback回调异步获取指定源的Web SQL数据库的存储配额，配额以字节为单位。
303
304**系统能力：** SystemCapability.Web.Webview.Core
305
306**参数：**
307
308| 参数名   | 类型                  | 必填 | 说明               |
309| -------- | --------------------- | ---- | ------------------ |
310| origin   | string                | 是   | 指定源的字符串索引。 |
311| callback | AsyncCallback\<number> | 是   | 指定源的存储配额。<br>number是long型整数，范围为(-2,147,483,648)~(2,147,483,647)。   |
312
313**错误码：**
314
315以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。
316
317| 错误码ID | 错误信息                                               |
318| -------- | ------------------------------------------------------ |
319| 17100011 | Invalid origin.                             |
320| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. |
321
322**示例：**
323
324```ts
325// xxx.ets
326import { webview } from '@kit.ArkWeb';
327import { BusinessError } from '@kit.BasicServicesKit';
328
329@Entry
330@Component
331struct WebComponent {
332  controller: webview.WebviewController = new webview.WebviewController();
333  origin: string = "resource://rawfile/";
334
335  build() {
336    Column() {
337      Button('getOriginQuota')
338        .onClick(() => {
339          try {
340            webview.WebStorage.getOriginQuota(this.origin, (error, quota) => {
341              if (error) {
342                console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
343                return;
344              }
345              console.info('quota: ' + quota);
346            })
347          } catch (error) {
348            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
349          }
350
351        })
352      Web({ src: $rawfile('index.html'), controller: this.controller })
353    }
354  }
355}
356```
357
358加载的html文件，请参考[deleteOrigin](#deleteorigin)接口下的html文件。
359
360## getOriginQuota
361
362static getOriginQuota(origin: string): Promise\<number>
363
364以Promise方式异步获取指定源的Web SQL数据库的存储配额，配额以字节为单位。
365
366**系统能力：** SystemCapability.Web.Webview.Core
367
368**参数：**
369
370| 参数名 | 类型   | 必填 | 说明               |
371| ------ | ------ | ---- | ------------------ |
372| origin | string | 是   | 指定源的字符串索引 |
373
374**返回值：**
375
376| 类型            | 说明                                    |
377| --------------- | --------------------------------------- |
378| Promise\<number> | Promise实例，用于获取指定源的存储配额。 |
379
380**错误码：**
381
382以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。
383
384| 错误码ID | 错误信息                                               |
385| -------- | ------------------------------------------------------ |
386| 17100011 | Invalid origin.                             |
387| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. |
388
389**示例：**
390
391```ts
392// xxx.ets
393import { webview } from '@kit.ArkWeb';
394import { BusinessError } from '@kit.BasicServicesKit';
395
396@Entry
397@Component
398struct WebComponent {
399  controller: webview.WebviewController = new webview.WebviewController();
400  origin: string = "resource://rawfile/";
401
402  build() {
403    Column() {
404      Button('getOriginQuota')
405        .onClick(() => {
406          try {
407            webview.WebStorage.getOriginQuota(this.origin)
408              .then(quota => {
409                console.info('quota: ' + quota);
410              })
411              .catch((e: BusinessError) => {
412                console.error('error: ' + JSON.stringify(e));
413              })
414          } catch (error) {
415            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
416          }
417
418        })
419      Web({ src: $rawfile('index.html'), controller: this.controller })
420    }
421  }
422}
423```
424
425加载的html文件，请参考[deleteOrigin](#deleteorigin)接口下的html文件。
426
427## getOriginUsage
428
429static getOriginUsage(origin: string, callback: AsyncCallback\<number>): void
430
431以回调方式异步获取指定源的Web SQL数据库的存储量，存储量以字节为单位。
432
433**系统能力：** SystemCapability.Web.Webview.Core
434
435**参数：**
436
437| 参数名   | 类型                  | 必填 | 说明               |
438| -------- | --------------------- | ---- | ------------------ |
439| origin   | string                | 是   | 指定源的字符串索引 |
440| callback | AsyncCallback\<number> | 是   | 指定源的存储量。   |
441
442**错误码：**
443
444以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。
445
446| 错误码ID | 错误信息                                               |
447| -------- | ------------------------------------------------------ |
448| 17100011 | Invalid origin.                             |
449| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. |
450
451**示例：**
452
453```ts
454// xxx.ets
455import { webview } from '@kit.ArkWeb';
456import { BusinessError } from '@kit.BasicServicesKit';
457
458@Entry
459@Component
460struct WebComponent {
461  controller: webview.WebviewController = new webview.WebviewController();
462  origin: string = "resource://rawfile/";
463
464  build() {
465    Column() {
466      Button('getOriginUsage')
467        .onClick(() => {
468          try {
469            webview.WebStorage.getOriginUsage(this.origin, (error, usage) => {
470              if (error) {
471                console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
472                return;
473              }
474              console.info('usage: ' + usage);
475            })
476          } catch (error) {
477            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
478          }
479
480        })
481      Web({ src: $rawfile('index.html'), controller: this.controller })
482    }
483  }
484}
485```
486
487加载的html文件，请参考[deleteOrigin](#deleteorigin)接口下的html文件。
488
489## getOriginUsage
490
491static getOriginUsage(origin: string): Promise\<number>
492
493以Promise方式异步获取指定源的Web SQL数据库的存储量，存储量以字节为单位。
494
495**系统能力：** SystemCapability.Web.Webview.Core
496
497**参数：**
498
499| 参数名 | 类型   | 必填 | 说明               |
500| ------ | ------ | ---- | ------------------ |
501| origin | string | 是   | 指定源的字符串索引 |
502
503**返回值：**
504
505| 类型            | 说明                                  |
506| --------------- | ------------------------------------- |
507| Promise\<number> | Promise实例，用于获取指定源的存储量。 |
508
509**错误码：**
510
511以下错误码的详细介绍请参见[webview错误码](errorcode-webview.md)。
512
513| 错误码ID | 错误信息                                              |
514| -------- | ----------------------------------------------------- |
515| 17100011 | Invalid origin.                            |
516| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. |
517
518**示例：**
519
520```ts
521// xxx.ets
522import { webview } from '@kit.ArkWeb';
523import { BusinessError } from '@kit.BasicServicesKit';
524
525@Entry
526@Component
527struct WebComponent {
528  controller: webview.WebviewController = new webview.WebviewController();
529  origin: string = "resource://rawfile/";
530
531  build() {
532    Column() {
533      Button('getOriginUsage')
534        .onClick(() => {
535          try {
536            webview.WebStorage.getOriginUsage(this.origin)
537              .then(usage => {
538                console.info('usage: ' + usage);
539              }).catch((e: BusinessError) => {
540              console.error('error: ' + JSON.stringify(e));
541            })
542          } catch (error) {
543            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
544          }
545        })
546      Web({ src: $rawfile('index.html'), controller: this.controller })
547    }
548  }
549}
550```
551
552加载的html文件，请参考[deleteOrigin](#deleteorigin)接口下的html文件。
553
554## deleteAllData
555
556static deleteAllData(incognito?: boolean): void
557
558清除Web SQL数据库当前使用的所有存储。
559
560**系统能力：** SystemCapability.Web.Webview.Core
561
562**参数：**
563
564| 参数名 | 类型   | 必填 | 说明               |
565| ------ | ------ | ---- | ------------------ |
566| incognito<sup>11+</sup>    | boolean | 否   | true表示删除所有隐私模式下内存中的web数据，false表示删除正常非隐私模式下Web的SQL数据库当前使用的所有存储。<br>默认值：false。<br>传入undefined与null时为false。 |
567
568**示例：**
569
570```ts
571// xxx.ets
572import { webview } from '@kit.ArkWeb';
573import { BusinessError } from '@kit.BasicServicesKit';
574
575@Entry
576@Component
577struct WebComponent {
578  controller: webview.WebviewController = new webview.WebviewController();
579
580  build() {
581    Column() {
582      Button('deleteAllData')
583        .onClick(() => {
584          try {
585            webview.WebStorage.deleteAllData();
586          } catch (error) {
587            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
588          }
589        })
590      Web({ src: $rawfile('index.html'), controller: this.controller })
591    }
592  }
593}
594```
595
596加载的html文件，请参考[deleteOrigin](#deleteorigin)接口下加载的html文件。