• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 使用隐私模式
2<!--Kit: ArkWeb-->
3<!--Subsystem: Web-->
4<!--Owner: @aohui-->
5<!--Designer: @yaomingliu-->
6<!--Tester: @ghiker-->
7<!--Adviser: @HelloCrease-->
8
9
10开发者在创建Web组件时，可以将可选参数[incognitoMode](../reference/apis-arkweb/arkts-basic-components-web-i.md#weboptions)设置为true，来开启Web组件的隐私模式。当使用隐私模式时，浏览网页时的Cookie、Cache Data等数据不会保存在本地的持久化文件，当隐私模式的Web组件被销毁时，Cookie、Cache Data等数据将不被记录下来。
11
12- 创建隐私模式的[Web组件](../reference/apis-arkweb/arkts-basic-components-web.md)。
13
14   ```ts
15  // xxx.ets
16  import { webview } from '@kit.ArkWeb';
17
18  @Entry
19  @Component
20  struct WebComponent {
21    controller: webview.WebviewController = new webview.WebviewController();
22
23    build() {
24      Column() {
25        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
26      }
27    }
28  }
29  ```
30
31- 通过[isIncognitoMode](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#isincognitomode11) 判断当前Web组件是否是隐私模式。
32
33  ```ts
34  // xxx.ets
35  import { webview } from '@kit.ArkWeb';
36  import { BusinessError } from '@kit.BasicServicesKit';
37
38  @Entry
39  @Component
40  struct WebComponent {
41    controller: webview.WebviewController = new webview.WebviewController();
42
43    build() {
44      Column() {
45        Button('isIncognitoMode')
46          .onClick(() => {
47            try {
48              let result = this.controller.isIncognitoMode();
49              console.log('isIncognitoMode' + result);
50            } catch (error) {
51              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
52            }
53          })
54        Web({ src: 'www.example.com', controller: this.controller })
55      }
56    }
57  }
58  ```
59
60隐私模式提供了一系列接口，用于操作地理位置、Cookie以及Cache Data。
61
62- 通过[allowGeolocation](../reference/apis-arkweb/arkts-apis-webview-GeolocationPermissions.md#allowgeolocation)设置隐私模式下的Web组件允许指定来源使用地理位置。
63
64  ```ts
65  // xxx.ets
66  import { webview } from '@kit.ArkWeb';
67  import { BusinessError } from '@kit.BasicServicesKit';
68
69  @Entry
70  @Component
71  struct WebComponent {
72    controller: webview.WebviewController = new webview.WebviewController();
73    origin: string = "file:///";
74
75    build() {
76      Column() {
77        Button('allowGeolocation')
78          .onClick(() => {
79            try {
80              // allowGeolocation第二个参数表示隐私模式（true）或非隐私模式（false）下，允许指定来源使用地理位置。
81              webview.GeolocationPermissions.allowGeolocation(this.origin, true);
82            } catch (error) {
83              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
84            }
85          })
86        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
87      }
88    }
89  }
90  ```
91
92- 通过[deleteGeolocation](../reference/apis-arkweb/arkts-apis-webview-GeolocationPermissions.md#deletegeolocation)清除隐私模式下指定来源的地理位置权限状态。
93
94  ```ts
95  // xxx.ets
96  import { webview } from '@kit.ArkWeb';
97  import { BusinessError } from '@kit.BasicServicesKit';
98
99  @Entry
100  @Component
101  struct WebComponent {
102    controller: webview.WebviewController = new webview.WebviewController();
103    origin: string = "file:///";
104
105    build() {
106      Column() {
107        Button('deleteGeolocation')
108          .onClick(() => {
109            try {
110              // deleteGeolocation第二个参数表示隐私模式（true）或非隐私模式（false）下，清除指定来源的地理位置权限状态。
111              webview.GeolocationPermissions.deleteGeolocation(this.origin, true);
112            } catch (error) {
113              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
114            }
115          })
116        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
117      }
118    }
119  }
120  ```
121
122- 通过[getAccessibleGeolocation](../reference/apis-arkweb/arkts-apis-webview-GeolocationPermissions.md#getaccessiblegeolocation)以回调方式异步获取隐私模式下指定源的地理位置权限状态。
123
124  ```ts
125  // xxx.ets
126  import { webview } from '@kit.ArkWeb';
127  import { BusinessError } from '@kit.BasicServicesKit';
128
129  @Entry
130  @Component
131  struct WebComponent {
132    controller: webview.WebviewController = new webview.WebviewController();
133    origin: string = "file:///";
134
135    build() {
136      Column() {
137        Button('getAccessibleGeolocation')
138          .onClick(() => {
139            try {
140              // getAccessibleGeolocation第三个参数表示隐私模式（true）或非隐私模式（false）下，以回调方式异步获取指定源的地理位置权限状态。
141              webview.GeolocationPermissions.getAccessibleGeolocation(this.origin, (error, result) => {
142                if (error) {
143                  console.log('getAccessibleGeolocationAsync error: ' + JSON.stringify(error));
144                  return;
145                }
146                console.log('getAccessibleGeolocationAsync result: ' + result);
147              }, true);
148            } catch (error) {
149              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
150            }
151          })
152        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
153      }
154    }
155  }
156  ```
157
158- 通过[deleteAllData](../reference/apis-arkweb/arkts-apis-webview-WebStorage.md#deletealldata)清除隐私模式下Web SQL当前使用的所有存储。
159
160  ```ts
161  // xxx.ets
162  import { webview } from '@kit.ArkWeb';
163  import { BusinessError } from '@kit.BasicServicesKit';
164
165  @Entry
166  @Component
167  struct WebComponent {
168    controller: webview.WebviewController = new webview.WebviewController();
169
170    build() {
171      Column() {
172        Button('deleteAllData')
173          .onClick(() => {
174            try {
175              // deleteAllData参数表示删除所有隐私模式（true）或非隐私模式（false）下，内存中的web数据。
176              webview.WebStorage.deleteAllData(true);
177            } catch (error) {
178              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
179            }
180          })
181        Web({ src: $rawfile('index.html'), controller: this.controller, incognitoMode: true })
182          .databaseAccess(true)
183      }
184    }
185  }
186  ```
187
188  加载的html文件。
189   ```html
190  <!-- index.html -->
191  <!DOCTYPE html>
192  <html>
193  <head>
194    <meta charset="UTF-8">
195    <title>test</title>
196    <script type="text/javascript">
197
198      var db = openDatabase('mydb','1.0','Test DB',2 * 1024 * 1024);
199      var msg;
200
201      db.transaction(function(tx){
202        tx.executeSql('INSERT INTO LOGS (id,log) VALUES(1,"test1")');
203        tx.executeSql('INSERT INTO LOGS (id,log) VALUES(2,"test2")');
204        msg = '<p>数据表已创建,且插入了两条数据。</p>';
205
206        document.querySelector('#status').innerHTML = msg;
207      });
208
209      db.transaction(function(tx){
210        tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
211          var len = results.rows.length,i;
212          msg = "<p>查询记录条数：" + len + "</p>";
213
214          document.querySelector('#status').innerHTML += msg;
215
216              for(i = 0; i < len; i++){
217                msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
218
219          document.querySelector('#status').innerHTML += msg;
220          }
221        },null);
222      });
223
224      </script>
225  </head>
226  <body>
227  <div id="status" name="status">状态信息</div>
228  </body>
229  </html>
230  ```
231
232- 通过[fetchCookieSync](../reference/apis-arkweb/arkts-apis-webview-WebCookieManager.md#fetchcookiesync11)获取隐私模式下指定url对应cookie的值。
233
234  ```ts
235  // xxx.ets
236  import { webview } from '@kit.ArkWeb';
237  import { BusinessError } from '@kit.BasicServicesKit';
238
239  @Entry
240  @Component
241  struct WebComponent {
242    controller: webview.WebviewController = new webview.WebviewController();
243
244    build() {
245      Column() {
246        Button('fetchCookieSync')
247          .onClick(() => {
248            try {
249              // fetchCookieSync第二个参数表示获取隐私模式（true）或非隐私模式（false）下，webview的内存cookies。
250              let value = webview.WebCookieManager.fetchCookieSync('https://www.example.com', true);
251              console.log("fetchCookieSync cookie = " + value);
252            } catch (error) {
253              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
254            }
255          })
256        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
257      }
258    }
259  }
260  ```
261
262- 通过[configCookieSync](../reference/apis-arkweb/arkts-apis-webview-WebCookieManager.md#configcookiesync11)设置隐私模式下指定url的单个cookie的值。
263
264  ```ts
265  // xxx.ets
266  import { webview } from '@kit.ArkWeb';
267  import { BusinessError } from '@kit.BasicServicesKit';
268
269  @Entry
270  @Component
271  struct WebComponent {
272    controller: webview.WebviewController = new webview.WebviewController();
273
274    build() {
275      Column() {
276        Button('configCookieSync')
277          .onClick(() => {
278            try {
279              // configCookieSync第三个参数表示获取隐私模式（true）或非隐私模式（false）下，对应url的cookies。
280              webview.WebCookieManager.configCookieSync('https://www.example.com', 'a=b', true);
281            } catch (error) {
282              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
283            }
284          })
285        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
286      }
287    }
288  }
289  ```
290
291- 通过[existCookie](../reference/apis-arkweb/arkts-apis-webview-WebCookieManager.md#existcookie)查询隐私模式下是否存在cookie。
292
293  ```ts
294  // xxx.ets
295  import { webview } from '@kit.ArkWeb';
296
297  @Entry
298  @Component
299  struct WebComponent {
300    controller: webview.WebviewController = new webview.WebviewController();
301
302    build() {
303      Column() {
304        Button('existCookie')
305          .onClick(() => {
306            // existCookie参数表示隐私模式（true）或非隐私模式（false）下，查询是否存在cookies。
307            let result = webview.WebCookieManager.existCookie(true);
308            console.log("result: " + result);
309          })
310        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
311      }
312    }
313  }
314  ```
315
316- 通过[clearAllCookiesSync](../reference/apis-arkweb/arkts-apis-webview-WebCookieManager.md#clearallcookiessync11)清除隐私模式下所有cookie。
317
318  ```ts
319  // xxx.ets
320  import { webview } from '@kit.ArkWeb';
321
322  @Entry
323  @Component
324  struct WebComponent {
325    controller: webview.WebviewController = new webview.WebviewController();
326
327    build() {
328      Column() {
329        Button('clearAllCookiesSync')
330          .onClick(() => {
331            // clearAllCookiesSync参数表示清除隐私模式（true）或非隐私模式（false）下，webview的所有内存cookies。
332            webview.WebCookieManager.clearAllCookiesSync(true);
333          })
334        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
335      }
336    }
337  }
338  ```
339