# Class (WebStorage)
Implements a **WebStorage** object to manage the Web SQL database and HTML5 Web Storage APIs. All **Web** components in an application share a **WebStorage** object.
> **NOTE**
>
> - The initial APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
>
> - The initial APIs of this class are supported since API version 9.
>
> - You can preview how this component looks on a real device, but not in DevEco Studio Previewer.
>
> - You must load the **Web** component before calling the APIs in **WebStorage**.
## Modules to Import
```ts
import { webview } from '@kit.ArkWeb';
```
## deleteOrigin
static deleteOrigin(origin: string): void
Deletes all data in the specified origin.
**System capability**: SystemCapability.Web.Webview.Core
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------ | ---- | ------------------------ |
| origin | string | Yes | Index of the origin, which is obtained through [getOrigins](#getorigins).|
**Error codes**
For details about the error codes, see [Webview Error Codes](errorcode-webview.md).
| ID| Error Message |
| -------- | ------------------------------------------------------ |
| 17100011 | Invalid origin. |
| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. |
**Example**
```ts
// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct WebComponent {
controller: webview.WebviewController = new webview.WebviewController();
origin: string = "resource://rawfile/";
build() {
Column() {
Button('deleteOrigin')
.onClick(() => {
try {
webview.WebStorage.deleteOrigin(this.origin);
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
Web({ src: $rawfile('index.html'), controller: this.controller })
.databaseAccess(true)
}
}
}
```
HTML file to be loaded:
```html
test
Status
```
## getOrigins
static getOrigins(callback: AsyncCallback\>): void
Obtains information about all origins that are currently using the Web SQL Database. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.Web.Webview.Core
**Parameters**
| Name | Type | Mandatory| Description |
| -------- | -------------------------------------- | ---- | ------------------------------------------------------ |
| callback | AsyncCallback\> | Yes | Callback used to return the information about the origins.|
**Error codes**
For details about the error codes, see [Webview Error Codes](errorcode-webview.md).
| ID| Error Message |
| -------- | ------------------------------------------------------ |
| 17100012 | Invalid web storage origin. |
| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. |
**Example**
```ts
// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct WebComponent {
controller: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
Button('getOrigins')
.onClick(() => {
try {
webview.WebStorage.getOrigins((error, origins) => {
if (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
return;
}
for (let i = 0; i < origins.length; i++) {
console.log('origin: ' + origins[i].origin);
console.log('usage: ' + origins[i].usage);
console.log('quota: ' + origins[i].quota);
}
})
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
Web({ src: $rawfile('index.html'), controller: this.controller })
.databaseAccess(true)
}
}
}
```
For details about the HTML file loaded, see the HTML file loaded using the [deleteOrigin](#deleteorigin) API.
## getOrigins
static getOrigins(): Promise\>
Obtains information about all origins that are currently using the Web SQL Database. This API uses a promise to return the result.
**System capability**: SystemCapability.Web.Webview.Core
**Return value**
| Type | Description |
| -------------------------------- | ------------------------------------------------------------ |
| Promise\> | Target Promise used to return the information about the origins.|
**Error codes**
For details about the error codes, see [Webview Error Codes](errorcode-webview.md).
| ID| Error Message |
| -------- | ------------------------------------------------------ |
| 17100012 | Invalid web storage origin. |
| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. |
**Example**
```ts
// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct WebComponent {
controller: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
Button('getOrigins')
.onClick(() => {
try {
webview.WebStorage.getOrigins()
.then(origins => {
for (let i = 0; i < origins.length; i++) {
console.log('origin: ' + origins[i].origin);
console.log('usage: ' + origins[i].usage);
console.log('quota: ' + origins[i].quota);
}
})
.catch((e: BusinessError) => {
console.log('error: ' + JSON.stringify(e));
})
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
Web({ src: $rawfile('index.html'), controller: this.controller })
.databaseAccess(true)
}
}
}
```
For details about the HTML file loaded, see the HTML file loaded using the [deleteOrigin](#deleteorigin) API.
## getOriginQuota
static getOriginQuota(origin: string, callback: AsyncCallback\): void
Obtains the storage quota of an origin in the Web SQL Database, in bytes. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.Web.Webview.Core
**Parameters**
| Name | Type | Mandatory| Description |
| -------- | --------------------- | ---- | ------------------ |
| origin | string | Yes | Index of the origin.|
| callback | AsyncCallback\ | Yes | Storage quota of the origin.
**number** is a long integer ranging from -2,147,483,648 to 2,147,483,647. |
**Error codes**
For details about the error codes, see [Webview Error Codes](errorcode-webview.md).
| ID| Error Message |
| -------- | ------------------------------------------------------ |
| 17100011 | Invalid origin. |
| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. |
**Example**
```ts
// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct WebComponent {
controller: webview.WebviewController = new webview.WebviewController();
origin: string = "resource://rawfile/";
build() {
Column() {
Button('getOriginQuota')
.onClick(() => {
try {
webview.WebStorage.getOriginQuota(this.origin, (error, quota) => {
if (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
return;
}
console.log('quota: ' + quota);
})
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
Web({ src: $rawfile('index.html'), controller: this.controller })
.databaseAccess(true)
}
}
}
```
For details about the HTML file loaded, see the HTML file loaded using the [deleteOrigin](#deleteorigin) API.
## getOriginQuota
static getOriginQuota(origin: string): Promise\
Obtains the storage quota of an origin in the Web SQL Database, in bytes. This API uses a promise to return the result.
**System capability**: SystemCapability.Web.Webview.Core
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------ | ---- | ------------------ |
| origin | string | Yes | Index of the origin.|
**Return value**
| Type | Description |
| --------------- | --------------------------------------- |
| Promise\ | Promise used to return the storage quota of the origin.|
**Error codes**
For details about the error codes, see [Webview Error Codes](errorcode-webview.md).
| ID| Error Message |
| -------- | ------------------------------------------------------ |
| 17100011 | Invalid origin. |
| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. |
**Example**
```ts
// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct WebComponent {
controller: webview.WebviewController = new webview.WebviewController();
origin: string = "resource://rawfile/";
build() {
Column() {
Button('getOriginQuota')
.onClick(() => {
try {
webview.WebStorage.getOriginQuota(this.origin)
.then(quota => {
console.log('quota: ' + quota);
})
.catch((e: BusinessError) => {
console.log('error: ' + JSON.stringify(e));
})
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
Web({ src: $rawfile('index.html'), controller: this.controller })
.databaseAccess(true)
}
}
}
```
For details about the HTML file loaded, see the HTML file loaded using the [deleteOrigin](#deleteorigin) API.
## getOriginUsage
static getOriginUsage(origin: string, callback: AsyncCallback\): void
Obtains the storage usage of an origin in the Web SQL Database, in bytes. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.Web.Webview.Core
**Parameters**
| Name | Type | Mandatory| Description |
| -------- | --------------------- | ---- | ------------------ |
| origin | string | Yes | Index of the origin.|
| callback | AsyncCallback\ | Yes | Storage usage of the origin. |
**Error codes**
For details about the error codes, see [Webview Error Codes](errorcode-webview.md).
| ID| Error Message |
| -------- | ------------------------------------------------------ |
| 17100011 | Invalid origin. |
| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. |
**Example**
```ts
// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct WebComponent {
controller: webview.WebviewController = new webview.WebviewController();
origin: string = "resource://rawfile/";
build() {
Column() {
Button('getOriginUsage')
.onClick(() => {
try {
webview.WebStorage.getOriginUsage(this.origin, (error, usage) => {
if (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
return;
}
console.log('usage: ' + usage);
})
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
Web({ src: $rawfile('index.html'), controller: this.controller })
.databaseAccess(true)
}
}
}
```
For details about the HTML file loaded, see the HTML file loaded using the [deleteOrigin](#deleteorigin) API.
## getOriginUsage
static getOriginUsage(origin: string): Promise\
Obtains the storage usage of an origin in the Web SQL Database, in bytes. This API uses a promise to return the result.
**System capability**: SystemCapability.Web.Webview.Core
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------ | ---- | ------------------ |
| origin | string | Yes | Index of the origin.|
**Return value**
| Type | Description |
| --------------- | ------------------------------------- |
| Promise\ | Promise used to return the storage usage of the origin.|
**Error codes**
For details about the error codes, see [Webview Error Codes](errorcode-webview.md).
| ID| Error Message |
| -------- | ----------------------------------------------------- |
| 17100011 | Invalid origin. |
| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3.Parameter verification failed. |
**Example**
```ts
// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct WebComponent {
controller: webview.WebviewController = new webview.WebviewController();
origin: string = "resource://rawfile/";
build() {
Column() {
Button('getOriginUsage')
.onClick(() => {
try {
webview.WebStorage.getOriginUsage(this.origin)
.then(usage => {
console.log('usage: ' + usage);
}).catch((e: BusinessError) => {
console.error('error: ' + JSON.stringify(e));
})
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
Web({ src: $rawfile('index.html'), controller: this.controller })
.databaseAccess(true)
}
}
}
```
For details about the HTML file loaded, see the HTML file loaded using the [deleteOrigin](#deleteorigin) API.
## deleteAllData
static deleteAllData(incognito?: boolean): void
Deletes all data in the Web SQL Database.
**System capability**: SystemCapability.Web.Webview.Core
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------ | ---- | ------------------ |
| incognito11+ | boolean | No | Whether to delete all data in the Web SQL Database in incognito mode. The value **true** means to delete all data in the Web SQL Database in incognito mode, and **false** means the opposite.|
**Example**
```ts
// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct WebComponent {
controller: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
Button('deleteAllData')
.onClick(() => {
try {
webview.WebStorage.deleteAllData();
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
Web({ src: $rawfile('index.html'), controller: this.controller })
.databaseAccess(true)
}
}
}
```
For details about the HTML file loaded, see the HTML file loaded using the [deleteOrigin](#deleteorigin) API.